---
name: figma-prototype-builder
description: "Build interactive Figma prototypes — smart animate, overlays, conditional flows, variables-driven state. Designs high-fidelity Figma prototypes: smart-animate transitions, overlays, scroll behavior, conditional logic with variables, interactive components, and the flow structure that survives usability testing. Turns static frames into a clickable product demo stakeholders can actually use."
license: MIT
---

# Figma Prototype Builder

Figma Prototype Builder turns static design frames into a working, clickable prototype with realistic motion and state. It wires up interactions, transitions, overlays, and variable-driven logic so a flow behaves like the real product, not a slideshow of screenshots. Built for product designers and UX researchers who need a prototype that holds up in stakeholder reviews and moderated usability sessions.

## When to use it

- You have polished frames but no connections, and a demo is due tomorrow.
- A research session needs branching paths (logged-in vs. guest, empty vs. populated state) driven by real input.
- You want a modal, toast, or bottom sheet to appear over the current screen instead of navigating away.
- Stakeholders keep asking "what happens when I tap this?" and you want them to find out themselves.
- A list, toggle, or form should remember state as the user moves between frames.

## How it works

It operates on Figma's native prototyping model, so everything stays editable in the file:

- **Connections & triggers** — On Tap, On Drag, While Hovering, While Pressing, After Delay, Mouse Enter/Leave, and Key/Gamepad triggers between frames and within component variants.
- **Actions** — Navigate To, Open/Swap/Close Overlay, Back, Scroll To, Open Link, plus Set Variable and Conditional (if/else) actions.
- **Animations** — Smart Animate with matched layer names, plus Instant, Dissolve, Move/Push/Slide In/Out, and easing curves (ease-in-out, spring, custom bezier) with duration control.
- **Variables & conditionals** — Boolean, text, number, and color variables read and written via Set Variable; conditional flows branch on them so one button can do different things based on accumulated state.
- **Overlays** — Positioning (centered, manual, relative to trigger), background scrim, "close when clicking outside," and swap-overlay chains for multi-step modals.
- **Component interactions** — interactive component variants so hovers, toggles, and presses work everywhere an instance is placed.
- **Scroll** — horizontal/vertical scrolling, fixed-position layers, and Scroll To a specific layer.

## Usage example

```
curl -fsSL --create-dirs -o ~/.claude/skills/figma-prototype-builder/SKILL.md https://claudeskil.com/skills/figma-prototype-builder/SKILL.md

# In your Figma file, point the skill at a flow:
"Connect the Login frame to Dashboard with Smart Animate, 300ms, ease-out.
 Make the avatar open a Profile overlay centered with a scrim.
 Add a boolean variable isLoggedIn; if false, route the CTA to Sign Up instead."
```

## Tips & gotchas

- **Smart Animate matches by layer name.** Rename matching layers identically across both frames or the transition snaps instead of morphing.
- **Set Variable runs before Navigate.** Order actions so state is written before the frame changes, or the destination reads a stale value.
- **Overlays inherit the starting frame's scroll position** — pin headers/footers as fixed so they don't drift.
- **Interactive component variants beat per-instance wiring.** Build the interaction once in the component, not on every screen.

## FAQ

**Does it change my visual designs?** No. It only adds prototype connections, variables, and interaction settings. Layout, styles, and content are untouched.

**Can researchers run this without edit access?** Yes — share the file in Present/view mode. Variables and conditionals evaluate live in the prototype player and in shared links.

**Will it work with my existing component library?** Yes. It uses your published components and variant sets, and wires interactions into instances rather than detaching them.