How to Make a Carousel in Figma

Carousels are everywhere. Product galleries, app onboarding screens, testimonial sliders.

Learning how to make a carousel in Figma lets you prototype these scrollable components without writing a single line of code.

The process is simpler than most designers expect. A few frames, some overflow settings, and you’ve got a working horizontal scroll prototype.

This guide walks you through creating an interactive carousel from scratch. You’ll set up container frames, configure scroll behavior in the Prototype tab, and test everything in presentation mode.

By the end, you’ll have a fully functional image slider ready for client demos or developer handoff.

How to Make a Carousel in Figma

Making a carousel in Figma is the process of creating a horizontally scrollable container that displays multiple images or content cards within a single frame.

You do this using the Prototype tab’s overflow settings.

Users need this when designing mobile app interfaces, landing pages, product galleries, or any screen with limited space for multiple visual elements.

This guide covers 6 steps requiring 5 to 10 minutes and basic Figma knowledge.

Prerequisites

Before you start, make sure you have these ready:

• Figma account (free or paid version works)
• Figma desktop app or browser version
• Images or content for the carousel (minimum 3 items)
• Basic understanding of frames and layers

Time needed: 5 to 10 minutes.

Step One: How Do You Create a Container Frame for the Carousel?

Press F on your keyboard or click the Frame icon in the toolbar to create a new frame on the design canvas.

This frame acts as the visible window for your carousel.

Choose a device frame preset (like iPhone 14 Pro) from the right panel, or set custom dimensions.

For mobile carousels, 375px width works well.

Action:

1. Press F or click Frame icon in toolbar
2. Select device preset from Design tab > Frame section, or enter custom Width and Height values
3. Position the frame on your canvas

Purpose: The container frame defines the viewport boundaries. Only content within these bounds will be visible during prototype playback.

If you need help with frames, check out how to make a frame in Figma.

Step Two: How Do You Add and Arrange Images Inside the Frame?

Click the Figma icon > File > Place Image to import your carousel content.

Select multiple images at once to speed things up.

Drag each image into the container frame and arrange them horizontally, side by side.

Leave consistent spacing between each item.

Action:

1. Figma icon > File > Place Image (or Ctrl+Shift+K / Cmd+Shift+K)
2. Select images from your computer
3. Click inside the frame to place each image
4. Arrange horizontally with 16px gaps between items

Need to adjust image dimensions? Learn how to crop in Figma or how to scale in Figma for precise sizing.

You can also round the corners in Figma for a softer card appearance.

Purpose: Horizontal arrangement creates the image slider layout that users will scroll through.

Step Three: How Do You Group the Images Into a Scrollable Frame?

Select all images inside your container frame.

Right-click and choose Frame Selection (or press Ctrl+Alt+G / Cmd+Option+G).

This creates a nested frame holding all your carousel items.

Action:

1. Select all carousel images (click + Shift to multi-select)
2. Right-click > Frame Selection
3. Rename this frame to “Carousel-Content” in the Layers panel
4. Ensure the nested frame extends beyond the parent frame’s width

The nested frame should be wider than the container. This extra width is what creates scrollable content.

Want even spacing that adapts automatically? Learn how to use auto layout in Figma for responsive carousel designs.

Purpose: Grouping into a frame allows Figma to apply scroll behavior to all items as one unit.

Step Four: How Do You Set Up Horizontal Overflow in the Prototype Tab?

Select the parent container frame (not the nested content frame).

Open the Prototype tab in the right properties panel.

Find the Scroll Behavior section and click the Overflow dropdown.

Select Horizontal Scrolling.

Action:

1. Click the parent container frame in Layers panel
2. Switch to Prototype tab (right panel)
3. Scroll Behavior > Overflow > select “Horizontal”
4. Verify the overflow indicator appears on the frame

This is where the magic happens. The horizontal overflow setting tells Figma to enable swipe and drag interactions in prototype mode.

For more complex interactions, explore how to prototype in Figma.

If certain elements should stay visible while scrolling, check out how to set Figma fixed position when scrolling.

Purpose: Overflow settings define how users interact with content extending beyond visible boundaries.

Step Five: How Do You Test the Carousel in Presentation Mode?

Click the Present button (play icon) in the top-right corner of Figma.

Or press Ctrl+Alt+Enter / Cmd+Option+Enter.

Your prototype opens in a new tab.

Action:

1. Click Present button or use keyboard shortcut
2. Click and drag horizontally to scroll through carousel items
3. Test on different device frames if needed
4. Press Esc to exit presentation mode

The carousel should scroll smoothly from left to right.

If it doesn’t scroll, double-check that the nested frame extends past the container boundaries.

For touch-friendly navigation testing, use Figma’s mobile preview app on your phone.

Purpose: Presentation mode simulates real user experience and reveals any usability issues before handoff.

Step Six: How Do You Fix Common Spacing and Alignment Issues?

The last image often overlaps with the device frame edge. This looks sloppy.

Add padding inside your nested content frame to fix it.

Action:

1. Select the nested carousel content frame
2. Design tab > Auto Layout > Add auto layout (Shift+A)
3. Set horizontal padding to 16px on both sides
4. Set gap between items to 16px

Equal spacing at start and end prevents that ugly overlap issue.

If images aren’t centered when scrolling stops, enable “Snap to center” in your scroll behavior settings.

Purpose: Proper spacing creates polished, professional user interface designs that match production-ready apps.

Verification

Your carousel works correctly when:

• Content scrolls horizontally in presentation mode
• First and last items have equal edge spacing
• Scrolling feels smooth, not jumpy
• Images stay within the visible frame boundaries
• No content clips unexpectedly at the edges

Test on multiple device frames to confirm responsive design behavior.

Troubleshooting

Issue: Images Overlap with Device Frame Edges

Solution: Select nested frame > add auto layout > set horizontal padding to 16px minimum on left and right sides.

Issue: Carousel Scrolls Too Fast or Does Not Stop at Center

Solution: Prototype tab > Scroll Behavior > enable “Snap” option, then set snap position to “Center.”

Adjust smart animate duration if transitions feel jarring.

Issue: Content Does Not Scroll in Prototype Mode

Solution: Verify nested content frame width exceeds parent container width.

Check Layers panel hierarchy. Content frame must be inside the container frame, not beside it.

Confirm Overflow is set to “Horizontal” on the parent frame, not the content frame.

Alternative Methods

Using Auto Layout for Responsive Carousels

Auto layout carousels adapt when you add or remove items.

Select your images, press Shift+A, set direction to horizontal, adjust gap spacing.

The frame resizes automatically. No manual repositioning needed.

Better for design system components that need flexibility.

Using Interactive Components with Variants

Create variants in Figma for carousels with navigation dots or arrow controls.

Build one component with multiple states: slide 1 active, slide 2 active, slide 3 active.

Add micro-interactions between variants for click-based navigation instead of scroll.

This method gives you navigation indicators and slide transition animations.

More complex to set up. Worth it for high-fidelity prototypes.

Learn how to animate in Figma for smoother transitions between carousel states.

Related Processes

Once your carousel is built, you might need these related skills:

• How to make a button in Figma for carousel navigation arrows
• How to make a grid in Figma for consistent card layouts
• How to link pages in Figma for multi-screen prototypes
• How to make Figma interactive for advanced prototype behaviors
• How to export GIF from Figma to share carousel animations

For developers receiving your design, turning Figma into code will translate your carousel prototype into working HTML, CSS, and JavaScript.

If you’re building carousels for web development, you might also explore the Bootstrap carousel component for ready-made code solutions.

FAQ on How To Make A Carousel In Figma

What is a carousel in Figma?

A carousel in Figma is a horizontally scrollable component that displays multiple images or content cards within a single frame. Users swipe or drag to navigate through items in prototype mode.

Can you make a scrolling carousel in Figma?

Yes. Select your container frame, open the Prototype tab, and set Overflow to Horizontal. The nested content frame must extend beyond the parent frame boundaries to enable scrolling.

How do I add horizontal scroll to a Figma prototype?

Click the parent frame, go to Prototype tab, find Scroll Behavior section, then select Horizontal from the Overflow dropdown. Test in presentation mode by clicking and dragging left or right.

Why is my Figma carousel not scrolling?

Your content frame likely doesn’t extend past the container boundaries. Check the Layers panel hierarchy. The scrollable content must be nested inside the parent frame and wider than it.

How do I make a carousel with navigation dots in Figma?

Create component variants for each carousel state. Add dot indicators below the carousel. Use interactive components to switch between variants when users click specific dots.

Can I add auto-scroll to a Figma carousel?

Yes, using Smart Animate and After Delay triggers. Create duplicate frames for each scroll position, connect them with After Delay interactions, and set animation duration to control scroll speed.

How do I make carousel items snap to center?

Select the parent frame, open Prototype tab, enable the Snap option under Scroll Behavior. Set snap position to Center. Items will now snap into place when users stop scrolling.

What frame size should I use for a mobile carousel?

Use 375px width for iPhone or 360px for Android. Individual carousel cards typically range from 280px to 320px wide with 16px gaps between items for comfortable touch targets.

How do I export my Figma carousel design?

For static images, select frames and use Export in the Design tab. For interactive prototypes, click Share and copy the prototype link. Developers can inspect spacing and dimensions in Dev Mode.

Can I create an infinite loop carousel in Figma?

Figma doesn’t support true infinite loops natively. Workaround: duplicate your content sequence, connect the last frame back to the first using Smart Animate. Creates the illusion of continuous scrolling.

Conclusion

You now know how to make a carousel in Figma using frames, auto layout, and prototype overflow settings.

The entire process takes under 10 minutes once you understand the frame hierarchy.

Start with a container frame, nest your content inside, and set horizontal scrolling in the Prototype tab. Test in presentation mode. Adjust spacing until it feels right.

Carousels work great for product galleries, onboarding flows, and testimonial sections. They solve the problem of displaying multiple items in limited screen space.

For more polished results, add navigation dots using component variants. Include swipe gesture indicators for mobile prototypes.

Practice with different content types. Cards, images, text blocks.

Each carousel you build makes the next one faster.