Creating Interactive Carousels in Figma: A Step-by-Step Guide (2026)

Carousels are a staple of UI design — onboarding screens, product galleries, testimonials, image sliders. Building an interactive carousel in Figma lets you prototype the exact sliding behavior, dot indicators, and transitions your developers will implement. In this step-by-step guide, you’ll build a fully interactive carousel from scratch using Figma’s prototype tool and Variants.

---

What We’re Building

By the end of this tutorial, you’ll have:

• A 3-slide carousel with content (image, title, description)
• Navigation arrows (previous/next)
• Dot indicators that update with each slide
• Smooth slide transitions using Figma’s Prototype interactions
• A component-based structure ready for developer handoff

---

Method 1: Simple Carousel Using Multiple Frames (Beginner)

This is the quickest way to prototype a carousel without using Components or Variants.

Step 1: Create your slide frames

1. Open a new Figma file
2. Press F and draw a frame — set it to your target size (e.g., 390 × 844px for a mobile screen, or 1440 × 600px for a web banner carousel)
3. Name it “Slide 1”
4. Duplicate it twice (Ctrl+D × 2) and name them “Slide 2” and “Slide 3”
5. Arrange them side by side on the canvas (doesn’t affect the prototype)

Step 2: Design each slide

For each slide frame, add:

• A background color or image
• A headline (H1 text style)
• A short description
• An optional image or illustration

Keep the layout consistent across slides — same text positions, same visual weight.

Step 3: Add navigation arrows

On each slide:

1. Press R to draw a rectangle for the arrow button (e.g., 44 × 44px)
2. Add a right-pointing arrow icon from the icon plugin (Iconify) or draw one manually
3. Group the rectangle and icon → name it “Next Arrow”
4. Copy and mirror it for “Prev Arrow” (skip on slide 1, skip next on slide 3)

Step 4: Add dot indicators

1. Press R to draw a small circle (8 × 8px) — this is the inactive dot
2. Duplicate it and change the fill to your brand color — this is the active dot
3. Create a row of 3 dots for a 3-slide carousel (use Auto Layout with 8px gap)
4. Position the dot group at the bottom center of each slide
5. On each slide, the corresponding dot should be the active color

Step 5: Wire up the prototype interactions

1. Click the Prototype tab in the right panel
2. Select the “Next Arrow” on Slide 1
3. Drag the blue arrow connector to the “Slide 2” frame
4. Set the interaction: On Click → Navigate to → Slide 2
5. Set the animation: Smart Animate with Ease In and Out, 300ms
6. Repeat for Slide 2 → Slide 3
7. Wire the back arrows: Slide 2 → Slide 1, Slide 3 → Slide 2

Step 6: Preview the prototype

1. Click Present (play button in the top right)
2. Click the arrows — slides should transition with a smooth animation
3. Check that dots update correctly on each slide

---

Method 2: Component-Based Carousel with Variants (Advanced)

This method uses Figma Components and Variants for a cleaner, more maintainable carousel — recommended if you’re building this for a design system or handing it off to developers.

Step 1: Create the Carousel Slide component

1. Design one slide with all its elements (background, image placeholder, text, dots, arrows)
2. Select all elements → press Ctrl+Alt+K (Mac: Cmd+Option+K) to create a component
3. Name it “Carousel/Slide”

Step 2: Add Variants for each slide state

1. With the component selected, click + Add variant in the right panel
2. Figma creates a variant set — you’ll see two versions of the slide
3. Add a property called “Slide” with values: 1, 2, 3
4. For each variant, change the content (image, text, active dot)
5. For Slide 1: first dot is active; for Slide 2: second dot is active; etc.

Step 3: Add Variants for arrow states

For polish, add hover states for your navigation arrows:

1. Select your arrow component
2. Add a boolean variant property called “Hovered” (True/False)
3. For the True state, slightly change the arrow button appearance (scale up, change opacity, add shadow)

Step 4: Wire Variants in Prototype mode

In the Prototype tab, you can set interactions directly between Variants:

1. In the Variant set, select the arrow on Slide 1 Variant
2. Add an interaction: On Click → Change to → Slide 2 Variant
3. Animation: Smart Animate, 300ms, Ease In and Out
4. Repeat for all forward/backward transitions

Step 5: Use the component in your design

1. From the Assets panel, drag your Carousel/Slide component onto your canvas
2. In the Design panel, use the Variant dropdown to set which slide is shown
3. In Prototype mode, the interactions work automatically

---

Adding Swipe Interactions (Mobile Carousels)

For mobile designs, users expect to swipe, not just tap arrows.

1. Select your slide frame
2. In the Prototype tab, click + under Interactions
3. Set trigger: Drag
4. Set action: Navigate to → Next slide
5. Animation: Slide Left, 300ms
6. Repeat in the other direction: Drag (left to right) → Navigate to → Previous slide

Note: Figma’s drag interactions are directional — you need to set them up separately for left and right.

---

Dot Indicators: How to Build Them Properly

Dot indicators are simple but need care to be reusable.

Creating a reusable dot component:

1. Draw a circle: 8 × 8px, fill with your inactive color (e.g., grey at 40% opacity)
2. Create a component (Ctrl+Alt+K)
3. Add a boolean variant property: “Active” (True/False)
4. For Active = True: change fill to your brand color, optionally make it wider (12 × 8px for an elongated active dot)

Using dots in your carousel:

1. Drop 3 instances of the dot component into your carousel
2. For each slide variant, set the corresponding dot’s “Active” property to True

This way, when you switch slide variants, the dots update automatically via Smart Animate.

---

Carousel Transitions: Which Animation to Use

Transition	Best for	Figma setting
Slide left/right	Standard image carousel	Navigate → Slide Left/Right
Fade	Content carousels, testimonials	Navigate → Dissolve
Smart Animate	Component-based with matching layers	Change To → Smart Animate
Instant	Quick mockup, no animation needed	Navigate → Instant

Smart Animate is the most impressive — it interpolates between matching layers, creating natural movement of text, images, and dots simultaneously. Use it for client presentations.

---

Exporting Carousel Specs for Developers

Once your carousel prototype is complete:

1. Select your carousel component
2. Right-click → Copy/Paste as → Copy link
3. Share the link with developers with Can view access
4. In the Design panel, all spacing, colors, fonts, and sizes are visible for inspection
5. Use the Measure feature (hold Alt/Option while hovering over elements) to show exact distances

Include in your handoff notes:

• Slide count and transition duration
• Swipe threshold (how far a user must drag to trigger a slide change)
• Auto-advance behavior (if applicable — not something Figma prototypes, but document it)
• Dot indicator behavior (update on swipe start or swipe complete?)

---

Common Carousel Mistakes in Figma

• Not using Smart Animate — the slide will jump instead of slide
• Inconsistent layer names — Smart Animate relies on matching layer names across variants
• Dots not updating — check that each slide variant has the correct active dot
• No back arrow on slide 1 / no next arrow on slide 3 — prototype should match final UX
• Forgetting the mobile swipe interaction — keyboard-only interactions frustrate mobile test sessions

---

Carousels in Figma come alive when the prototype interactions are properly wired. Even a simple three-slide carousel with arrows and smooth transitions communicates the intent clearly to stakeholders and developers. Start with the simple frame-based method if you’re new to prototyping, and graduate to Variants when you need a component you can reuse and scale.