Figma carousel components

The carousel has the worst evidence record of any common interface pattern, and it is still everywhere. Product galleries, onboarding tours, testimonial rows, app store screenshots. Before you build one it is worth knowing what the numbers actually say, and then deciding whether your case is the exception. These 4 components and 22 variants give you the slide, the arrows, and the indicators.

The uncomfortable data

Erik Runyon has published click statistics from real homepage carousels, and the shape of it is consistent. On the University of Notre Dame homepage roughly 1% of visitors clicked a feature at all, and 84% of those clicks landed on the first slide. Across three static carousels the opening slot took between 48% and 62% of clicks. An auto-forwarding version drew far more interaction in total and still concentrated 40% on the first frame.

Nielsen Norman Group's work on auto-forwarding content explains the rest of it: people cannot read something that is about to leave, and movement inside a banner-shaped box reads as an advertisement and gets ignored.

When a carousel still earns its place

Slide two of a marketing hero is where content goes to be unread, so put your one message in slide one and stop negotiating. The pattern is genuinely right in three situations, though. When the items are equivalent and the user intends to browse them, such as photos of a product or a hotel room, where nobody expects a ranking. When horizontal space is a hard constraint rather than a preference, which describes most of mobile. And when the thing is swipeable rather than arrow-driven, because a thumb drag costs almost nothing while clicking a 36px arrow costs a decision.

A row of testimonials clears the first two. It fails the same way every time, with unrelated messages queued behind one another because nobody in the room would give up their slot.

Slides at 640px, arrows at 36px and 44px

The slide frame is 640px by 400px in both md and lg, a 16:10 crop that suits content imagery better than a widescreen one, though a slide built around a video player will want the widescreen crop instead. Arrows come at 36px and 44px, with left and right chevrons as separate variants so you can put one inside the frame and one outside it without detaching anything.

The indicators are the part worth studying: dots at 8px and 10px or lines 40px wide at 6px and 8px, either bare or framed, where framed sits them on a pill background. Use framed whenever they overlap imagery, because bare dots disappear on a pale photograph and you will not catch it in Figma while your placeholder is an evenly toned grey. The same indicator group is shared with pagination, so a swipeable card row and a paged table use one component instead of two near-identical ones.

Prototyping and handoff

In Figma a carousel is either a set of frames wired with click-through interactions or a single wide Auto Layout row moved with smart animate. Both demo fine, and neither reproduces the momentum of a real swipe, so budget for that surprise in build.

For handoff the W3C carousel pattern is the document to hand over: rotation has to stop on hover and on keyboard focus, the rotation control belongs first in the tab order, and each slide needs a role and a position announcement so somebody not looking at it knows there are five more. If you take one rule from all of this, take auto rotation off by default. Every frame in the file is drawn twice, light and dark.

When the slides need to move for real, Untitled UI React carousels are open source, built with Tailwind CSS and React Aria, with drag, keyboard control, and the indicator state handled for you.