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.