There’s no carousel component in Figma. You fake one, either with an auto layout frame set to scroll horizontally, or with a stack of separate frames wired together by Smart Animate. Both simulate a swipeable or click-through slider before anyone writes a line of code.
Designers build these to test onboarding flows, product galleries and promo banners while there’s still time to change them cheaply.
Smart Animate arrived in Figma’s prototyping tools back in 2019, and it still does the work behind every click-based carousel transition being built today.
What Is a Carousel in Figma
Stacked frames plus some prototype wiring. That’s the whole mechanism.
It’s a prototyped interaction pattern, which means it only exists inside the file. When a developer needs the real thing, somebody rebuilds it in code.
The illusion comes out of Figma’s prototyping tools, which let you wire up drag gestures and clicks so the mockup responds roughly the way a live product would.
Product teams use them for onboarding screens, testimonial sliders and promo banners sitting near the top of a landing page.
Nothing in the toolbar generates a working slider for you, and no plugin does it either, whatever a Community listing claims. The bigger gap shows up later: none of this is usable by a screen reader, so accessibility stays a developer problem after handoff.
What Are the Different Ways to Build a Carousel in Figma
Scroll behavior inside a single frame gets you a swipe. Clicking arrows between separate frames gets you something closer to slideshow software. There’s a third route through component variants that costs more setup and pays it back only if you reuse the thing.
Have you seen the latest Figma statistics?
Discover comprehensive Figma statistics including revenue growth, market share, user demographics, and funding data.
Check them out →| Method | Core Tools | Best For | Limitation |
|---|---|---|---|
| Scroll-based | Auto layout, scroll behavior | Swipe-heavy mobile mockups | Drag gesture only, no arrows by default |
| Click-based | Smart Animate, on click trigger | Arrow-controlled web banners | More frames to maintain |
| Variant-based | Component variants, boolean properties | Reusable dot indicators | More setup work up front |
Scroll-Based Carousel
Cards sit inside one auto layout frame that’s wider than the parent holding it. They stack horizontally with a fixed gap between them, clip content hides whatever runs past the frame edge, and the horizontal scrolling setting lives in the prototype tab.
Drag is the only trigger in play. Nobody clicks anything.
Click-Based Carousel
Click-based carousels feel more like slideshow software.
Building each slide as a component variant rather than a loose frame keeps the set manageable when someone inevitably asks for a fourth slide. Smart Animate handles the movement by matching layer names across frames and animating whatever changed between them, and the arrows fire an on click trigger instead of waiting for a finger drag.
How to Build a Scroll-Based Carousel with Auto Layout
This is the fastest way to fake a swipeable carousel. Everything starts with one frame sized to match your target screen.
- Create a frame sized to your target screen and drop your cards inside it
- Select all the cards and apply auto layout with horizontal direction
- Set a consistent gap and padding so spacing stays even across cards
- Round the corner radius on each card if the design calls for it
- Turn on clip content so the frame hides everything past its edge
- Open the prototype tab and set scroll behavior to horizontal
- Hit preview and drag across the cards to confirm the swipe works
Figma won’t let a layer keep a fixed position while scrolling if it sits inside an auto layout frame. The exception is a layer with absolute position turned on.
That restriction comes straight from Figma’s own prototyping documentation, and it trips up more carousel builds than any other setting.
How to Build a Click-Based Carousel with Smart Animate
Here you trade the swipe gesture for buttons people can actually see. Every slide becomes its own frame, linked to the next one with a short animated transition.
The arrow fires an on click trigger, navigate to tells Figma which frame it points at, and Smart Animate fills in the movement by matching identically named layers and animating the gap between them. Both arrows can reuse the same button component, so restyling them later happens once.
- Create one frame per slide, keeping every layer name identical across frames
- Add a left and right arrow to each frame using the same button component
- Select the right arrow, open the prototype tab, and drag a connection to the next frame
- Set the trigger to on click and the animation to Smart Animate
- Repeat the connections for every slide, looping the last one back to the first
- Preview and click through to confirm the transition feels smooth
Those layer names have to match exactly. Rename one and the transition breaks with no error message telling you why.
How to Add Pagination Dots with Component Properties
In a 2022 release, Figma pulled boolean and instance swap properties out into their own dedicated component properties, separate from variants entirely. That’s the change that makes pagination dots manageable instead of a pile of duplicate shapes.
A boolean property flips one dot between its active and inactive state. The main component holds both states as a single toggle rather than two stacked layers. Then every slide frame gets a nested instance of the dot row with the correct dot switched on.
Building that dot component from scratch takes about five minutes once you know which layer to toggle. Pair it with the arrows from the click-based method and the carousel finally looks finished.
How to Fill Carousel Slides with Content
- A plugin such as Content Reel drops in placeholder photography fast
- Unsplash works the same way if you want real stock imagery instead of gray boxes
- Figma Community carries premade carousel files you can gut and refill
- Instance swap replaces one card’s image without disturbing the layout around it
Every slide needs the same width and height, or auto layout reflows the whole row. Cropping each image to that exact size before it goes in avoids the problem entirely.
Real content beats gray boxes once you’re testing with people. For early wireframes, placeholder speed still wins.
Should a Figma Carousel Autoplay
Nielsen Norman Group has repeatedly cited a Notre Dame University analysis showing that only about 1% of visitors click a carousel at all, and that 84% of those clicks land on the first slide.
Autoplay doesn’t fix that. It removes the one thing users had left, which was control over when the slide changed.
- Only about 1% of visitors click a carousel at all (Notre Dame University research, via Nielsen Norman Group)
- 84% of the clicks a carousel does get land on its first slide (Notre Dame University research)
- 33% of top US and European ecommerce desktop sites carry a homepage carousel (Baymard Institute)
- 52% of mobile sites and apps with a carousel set it to auto-rotate by default (Baymard Institute)
- 46% of all homepage carousels tested show some kind of usability performance issue (Baymard Institute)
That’s valuable space above the fold going mostly unread, autoplay or not.
Inside Figma’s interaction settings, the argument is for reaching toward on click or on drag more often than after delay. A carousel someone controls tests better than one that controls them.
When a Figma Carousel Does Not Work
Figma carousels break in a handful of predictable places. Most of them surface before launch if you know where to look.
Prototype Links That Will Not Connect
Most broken carousel prototypes trace back to one setup mistake. Figma won’t let an interaction connect two elements when a main component and its instance sit on the same frame.
Move every source component to its own Components page and drag instances into the carousel frame instead. That’s it, that’s the fix, and it’s the single most common carousel complaint on Figma’s community forum.
Auto Layout Restrictions on Fixed Position
Sticky position was built for vertical pages, so it behaves unpredictably the moment you drop it into a horizontal scroll frame. A dot row switched to absolute position has a different problem: it stops resizing along with the cards beside it, so adding or removing a slide later leaves it sitting in the wrong spot.
None of this shows up until somebody tests the file on an actual phone.
That’s not an argument for skipping the pattern. It’s a reminder that a static Figma file stops representing reality the moment the real slide count starts changing with every CMS update.
Is Figma the Right Tool to Prototype a Carousel, or Should It Be Built in Code
Figma answers one question well. Does this interaction make sense to a person looking at it.
What it won’t tell you is whether the real thing feels fast, because nothing about its drag simulation matches the momentum of a genuine touch scroll.
The upside is still worth having. Stakeholders react to a prototype in minutes instead of waiting on a sprint. There’s no build environment, no dependencies, nothing to host. Changes take seconds rather than a pull request and a review cycle.
Then there’s the other column.
- Drag physics stay approximate. A coded slider has real momentum scroll; this doesn’t
- Screen readers get nothing out of it, no matter how carefully the file is built
And a developer rebuilds the whole thing from scratch regardless. Plenty of teams shortcut that by turning the Figma file into code directly instead of maintaining two builds side by side.
Coded carousels built with JavaScript are common enough that Swiper.js alone pulls in more than 2.5 million weekly downloads on npm.
How to Hand Off a Figma Carousel to Developers
Dev Mode turns a finished prototype into something a developer can read instead of guess at.
Figma said at Config 2023 that about a third of its total users are developers, which is exactly who the mode was built for.
| What Developers See | Where It Lives | Why It Matters for a Carousel |
|---|---|---|
| Spacing and gap values | Inspect panel | Matches the auto layout gap to a CSS flex or grid gap |
| Trigger and animation notes | Prototype annotations | Drag and Smart Animate settings don’t export on their own |
| Color and radius tokens | Variables panel | Keeps dot colors and card corners consistent with code |
On, the Zurich-based sportswear brand, credits Dev Mode with helping its front-end team move faster and ask fewer questions during handoff.
A written developer handoff still beats assuming the file speaks for itself. A closer Figma Dev Mode guide covers annotation shortcuts most designers never open.
How to Make a Figma Carousel Accessible
ARIA Carousel Pattern
The W3C documents an ARIA carousel pattern, which gives developers a structure to translate the Figma file into.
| Attribute | Applied To | Purpose |
|---|---|---|
| aria-roledescription=”carousel” | Outer container | Names the whole widget for screen readers |
| role=”group”, aria-roledescription=”slide” | Each slide | Marks individual slides inside the set |
| aria-label | Previous and next buttons | Gives the arrows a name beyond an icon |
None of it happens automatically, and half-applying it can make things worse. WebAIM’s 2025 Million report found that home pages using ARIA averaged 57 detected errors against 27 on pages using none at all.
The pattern helps when every attribute in that table gets implemented, not just the first one somebody copied out of a blog post.
WCAG Pause Requirement
WCAG’s Success Criterion 2.2.2, a Level A requirement, applies the moment a carousel starts moving on its own.
- Content that moves automatically for more than five seconds needs a pause, stop, or hide control
- The rule covers anything running in parallel with other page content, which describes nearly every auto-advancing carousel
For a Figma file, that means the after delay trigger used for autoplay should ship next to a visible pause control in the coded build, even though Figma can’t preview that control itself.
Running a web accessibility checklist during handoff catches this before launch instead of after a complaint.
FAQ on How To Make A Carousel In Figma
What Other Triggers Can Start a Carousel Besides Drag or Click
Figma also supports mouse wheel or trackpad scrolling on frames set to scroll behavior, plus keyboard arrows once a layer has focus. After delay handles autoplay. Wheel and keyboard triggers rarely get tested, though both matter for non-touch accessibility.
Can You Preview a Carousel’s Drag Gesture on an Actual Phone
Yes. Figma Mirror installs on iOS and Android and streams the live file to your device. Open the carousel frame, swipe with a real finger, and feel the actual drag interaction instead of the desktop trackpad simulation.
What Size Should Carousel Slides Be for Mobile Versus Web
Match the target viewport. Mobile app carousels usually sit at 375 to 430 pixels wide, matching common phone frames. Web banner carousels run wider, often 1200 pixels or more, matching desktop layout widths.
What Should You Fix First in How To Make A Carousel In Figma?
Start with the prototype connection between components and instances. A broken link there blocks every trigger and transition in the file, from drag through to Smart Animate, and it looks like an animation bug when it isn’t one.
After that, in rough order of what wastes the most time later:
- Separate every component from its instances onto its own page
- Confirm the scroll behavior or Smart Animate trigger fires on the first try
- Align pagination dots and label each slide before handoff
Nielsen Norman Group’s carousel guidance caps a usable set at five slides, and no fix order changes that limit. Sorting out the connection structure first costs you an early rebuild. It also saves the hours you’d otherwise spend debugging an animation that was never the real fault.
That same component discipline carries into general component best practices once the carousel ships.
