Interactive components allow you to create prototype interactions between variants in a component set. Any time you add an instance to your designs, those interactions are set up and ready to go. This saves you time when creating prototypes and prevents unnecessary noodle soup.

• Create interactive elements that automatically switch between variants, like buttons that change from hover to pressed states.
• Set default interactions at a component level and remove the guesswork when it comes to building prototypes.
• Reduce the amount of frames and connections needed to prototype input fields, like a set of checkboxes or toggles.

Before variant interactions

In the example below we've added all the possible connections to prototype a frame with five checkboxes. Without interactive components, we would need to duplicate the same frame 32 times and create 160 connections between them to prototype every possible combination.

With variant interactions

With interactive components, we only need to add an instance of the checkbox to our design and its variant interactions are ready to go. When we view the prototype, Figma automatically switches between the checked and unchecked variants.

Create interactive components

You can only create interactive components using variants from the same component set. If you don't have a component set to work with, you'll need to create one first. Learn how to create variants →

Create variant interactions

Interactive components introduces a new prototype action: Change to.

1. Select the starting variant for the interaction from within the component set.
2. Navigate to the Prototype tab of the right sidebar.
3. Click the on the right of the frame's bounding box and drag it to the destination variant. You can also click the in the Interactions section of the Prototype panel, set the action to Change to, then select the destination variant using the dropdown menu.
4. Once the connection has been made, use the Interaction details panel to adjust the trigger and action.

You can also use the Change to action on a nested instance to change the parent component variant. In the example below, a variant from the Show details component set is nested within another container component set. A Change to interaction is placed on the nested instance to change the parent component from its collapsed variant to its expanded variant.

Use interactive components

Add instances of interactive components to your designs like any other component. The only difference is the instances already have interactions applied for prototyping.

To use interactive components:

1. Add an instance of an interactive component to a frame in your design.
2. When you're ready to prototype your design, navigate to the Prototype tab of the right sidebar.
3. Build your prototype.
4. Preview designs and interactions in Presentation view.

Add more interactions

When you're building a prototype with interactive components, you can add regular interactions on top of the variant interactions.

In the example below, we have added an interaction with a click trigger on top of the variant interaction with delay.

The interaction order will depend on whether the triggers you use are the same triggers as the variant interactions. Learn more about prototype triggers →

Same triggers

When both interactions use the same trigger, Figma will use the prototype interaction and ignore the variant interaction.

For example:

1. A toggle switch has an On click → Change to variant interaction between the On and Off variants in its component set.
2. You add an On click → Navigate to interaction from the toggle switch to another frame.

Figma will navigate to the next frame when the user clicks on the toggle switch.

Different triggers

When you add an interaction with a different trigger, Figma will play both the interaction and the variant interactions.

For example:

1. A button has an On hover → Change to variant interaction between the default and hover variants.
2. You add an On click → Navigate to interaction when building your prototype.

Figma will Change to the hover variant on hover , then Navigate to the next frame On click.

View interactions

When using interactive components, you will see separate sections for Interactions and Variant interactions in the Prototype tab of the right sidebar.

• Use the Interactions section to create prototype interactions and animations
• Use the Variant interactions section view a variant interaction's details

Edit variant interactions

You can override a variant interaction for an instance in your prototype. If you want to edit a variant interaction for the main component, you'll need to do so from the source file.

To access a component set from an instance and make your edits:

1. Select the instance.
2. Click in the Instance section of the right sidebar.
3. Select Go to main component.
4. Navigate to the Prototype tab of the right sidebar.
5. Make your edits to the variant interactions.

State management across frames

Your prototypes likely involve interactions across multiple frames. By default, Figma uses state management controls to determine how interactive components work across frames.

• State memorization: Figma memorizes the last set variant of your interactive component.

  For example, you might have an interactive component for a checkbox. If you set the interactive component to the checked variant, Figma remembers the state of that variant. This means that if you navigate away from that frame and come back to it later, the interactive component will remain in the checked state.

• State sharing: Figma shares states between matching interactive components. States are only shared after the component has been initially interacted with.

  For example, you might have an interactive component for a checkbox, with an instance of the component on each of two frames. If you set the interactive component to the checked variant on the first frame, then navigate to the second frame, the matching component on the second frame will also be set to the checked variant.

If you don’t want to maintain states across frames, check off Reset component state on the Interaction details panel of the prototype interaction.

Learn more about prototype state management →

Use with variables

Apply variables to interactive components to extend their power even further.

When you click an interactive component with an applied variable:

• The variant updates
• The variable updates, which in turn updates any other elements bound to that same variable

Learn more about using variables with interactive components →

Interactive components with custom fonts

When using custom fonts for text inside interactive components, keep in mind that prototype viewers might not have those custom fonts installed on their devices. In these cases, Figma uses cached information about variants of interactive components to display custom fonts correctly when presenting a prototype, but may replace a font with Inter when we can’t both preserve text overrides and change font settings for an interaction.

For example, let's say a person viewing your prototype doesn't have the custom font being used installed on their device. If an instance of an interactive component has a text overrides:

• Figma may replace the custom font with Inter if the change in variants includes changing a font setting like weight or underline.
• Figma will display the correct font if the change in variant isn't related to a font setting, like a button's background color.

We recommend using Google fonts for prototypes that are being shared with viewers who may not have access to custom fonts in your designs. If your team is on the Organization or Enterprise plan, you can make sure prototype viewers have access to custom fonts by uploading them as shared fonts.