Figma Interactive Components

Interactive components carry their own behavior. A toggle flips, a checkbox ticks, and a button reacts to hover or press. The interaction lives inside the component, so every instance on every screen works without extra wiring.

The Problem They Solve

Without interactive components, a prototype needs a separate frame for every state of every control. A screen with five toggles needs dozens of connections. Interactive components remove that clutter. Each control manages its own states.

Without interactive components
Screen 1 → Screen 2 → Screen 3 → Screen 4 ...   (one frame per combination)

With interactive components
Screen 1  [Toggle]  [Checkbox]  [Button]
          each control switches its own state

What You Need

• A component set with at least two variants, such as Off and On.
• An interaction connecting one variant to another.
• Instances of the component placed on a screen.

Build a Toggle

1. Create a toggle component showing the Off state.
2. Add a variant and set it to the On state.
3. Name the property State and the values Off and On.
4. Open the Prototype tab.
5. Select the Off variant and drag a connection to the On variant.
6. Choose On click as the trigger and Change to as the action.
7. Select the On variant and connect it back to Off.

State = Off  ── click ──→  State = On
State = On   ── click ──→  State = Off

Drop an instance on any screen and press Play. Each click flips the switch.

Triggers You Can Use

On click           Tap or click the component
While hovering     Active only while the pointer rests on it
While pressing     Active only while the button stays down
Mouse enter        Fires when the pointer arrives
Mouse leave        Fires when the pointer departs
After delay        Fires automatically after a set time

Build a Button with Hover and Press States

A button needs three variants: Default, Hover, and Pressed. Connect them with two interactions.

Default  ── While hovering ──→  Hover
Hover    ── While pressing ──→  Pressed

Pointer movement now changes the button color live. Users feel the response before they click.

Animate the Change

Add Smart animate to a Change to action for smooth transitions. A toggle dot glides across the track instead of jumping. Keep durations short, around 150 to 250 milliseconds.

Compose Larger Interactions

Interactive components nest inside each other. A settings panel can hold five toggles, and every toggle works independently. A navigation bar can hold tabs that each switch their own active state.

Settings Panel (instance)
  ├── Toggle: Notifications   (flips on its own)
  ├── Toggle: Dark Mode       (flips on its own)
  └── Toggle: Location        (flips on its own)

Checklist Before Testing

• Every variant has a connection leading to the next state.
• Layer names match across variants for smooth animation.
• Instances sit on a frame included in the prototype flow.
• Preview mode runs from the correct starting frame.

Common Mistakes

• Adding interactions to instances when the component itself should hold them.
• Forgetting the return path, which traps the control in one state.
• Using too many variants where a boolean property would work.
• Testing in design mode instead of Play mode.

Practice Task: Checkbox with Three States

Create a checkbox component with Unchecked, Hover, and Checked variants. Connect Unchecked to Hover with a hovering trigger. Connect Hover to Checked with a click trigger. Add a click connection from Checked back to Unchecked. Place five instances in a list and run the prototype. Each box responds on its own, which proves the interaction lives inside the component.