Before you start
🚧 This feature is currently in beta
Only members of the Interactive components beta ↓ can create interactive components.
Only users with can edit access to a file can create and edit interactive components.
Warning: As with any beta program, this feature is still in development.
You can expect:
- Slower prototype load times for larger files
- Changed, added, or removed functionality before moving to general availability
- Auto layout limitations when presenting a prototype
- Observation view limitations when presenting a prototype
To minimize risk, we advise against using interactive components for critical projects until after the beta.
Read more about the interactive components beta ↓
About interactive components
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.
Note: Interactive components are an extension of variants. If you don't have a component set to work with, you'll need to create one first. Learn how to create and use variants →
In the example below we've added all the possible connections for a prototype with three checkboxes. We've duplicated the same frame eight times and have a total of 24 connections between them to create every possible combination.
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.
- Select the starting variant for the interaction from within the component set.
- Navigate to the Prototype tab of the right sidebar.
- 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.
- Once the connection has been made, use the Interaction Details panel to adjust the trigger and action.
Note: The Change to action can only be used on variants in a component set. It's not possible to use this action between two separate components or top-level frames.
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:
- Add an instance of an interactive component to a frame in your design.
- When you're ready to prototype your design, navigate to the Prototype tab of the right sidebar.
- Build your prototype.
- Preview designs and interactions in Presentation View.
Note: Figma will use the existing rules to preserve any overrides you apply to the default variant in a component set. For example: changing the contents of a button label or swapping an icon.
When you add an instance of a component set to the canvas, you also bring along the other variants in that component set. While you can technically still apply overrides to those other variants, Figma won't reflect those overrides 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 →
When both interactions use the same trigger, Figma will use the prototype interaction and ignore the variant interaction.
- A toggle switch has an
Change tovariant interaction between the On and Off variants in its component set.
- You add an
Navigate tointeraction from the toggle switch to another frame.
Figma will navigate to the next frame when the user clicks on the toggle switch.
When you add an interaction with a different trigger, Figma will play both the interaction and the variant interactions.
- A button has an
Change tovariant interaction between the default and hover variants.
- You add an
Navigate tointeraction when building your prototype.
Change to the hover variant on
hover , then
Navigate to the next frame
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
Note: Observation mode when presenting a prototype is not supported for interactive components, but we're working on it!
Edit variant interactions
Add and edit variant interactions from the main component. It's not possible to edit variant interactions from an instance.
To access a component set from an instance and make your edits:
- Select the instance.
- Click in the Instance section of the right sidebar.
- Select Go to main component.
- Navigate to the Prototype tab of the right sidebar.
- Make your edits to the variant interactions.
About the interactive components beta
Sign up for the interactive components beta
- The beta is open to all Figma users regardless of team or plan.
- Request access to the interactive components beta using the email address associated with your Figma account.
- Figma's goal is to add those who request access to the beta within three business days. A confirmation email is sent to the email address associated with your account once interactive components are turned on for your account.
- During this beta, you can always turn off interactive components within a file to improve prototype loading times. If you would like to be removed from the beta entirely, please email firstname.lastname@example.org.
Provide feedback and get help
The feedback you provide to us during the beta is crucial to make sure we fix any issues and improve the experience before interactive components launch to everyone.
Visit the dedicated Support Forum channel to ask questions, report bugs, provide feedback, and discuss interactive components with fellow beta users.
Share files with interactive components
- Anyone with
can editaccess to a file can view and edit variant interactions for interactive components, even if they're not part of the beta. You must be in the beta to create new variant interactions.
- Any member of the beta with
can editaccess to a file can turn interactive components off and on ↓ when presenting a prototype. This helps to prevent any performance issues from interactive components.
- Any person with can
view accessto prototype with interactive components can preview the interactions in presentation view.
Interactive components with custom fonts
When using custom fonts on text inside interactive components, keep in mind that prototype viewers might not have those custom fonts installed on their devices.
When this happens:
- custom fonts in interactive components playing in presentation view are replaced with Inter for viewers who don't have the font installed on their device
- the toolbar in presentation view will include a warning of possible font mismatches
Main components and other text layers using the custom font that aren't part of an interactive component will not be affected. This only applies to instances of interactive components displayed in presentation view.
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 in a Figma Organization plan, you can ensure that all prototype viewers have access to custom fonts in your prototype by uploading them as shared fonts.
Interactive components with auto layout
We’ve added full support for auto layout to the interactive components beta. Interactive components with auto layout now work the same in prototype presentation view as they do in the editor when switching between variants of an instance. This means interactive components will resize and reposition along with their parent frames and siblings according to their auto layout properties.
Turn interactive components off or on for a file
During the beta, you can turn interactive components off for a specific file to improve prototype load times. To do so:
- Select an interactive component from your canvas or layers panel.
- Navigate to the Prototype tab in the right sidebar.
- In the Interactive components beta section, check the option to Enable interactive components.
Interactive components in the Figma Community
- Any member of the beta can publish files with interactive components to the Figma Community.
- If you're not part of the beta, you can still duplicate a Figma Community file with interactive components but the feature will be turned off. You can still view and edit variant interactions in the file, but you can't create new interactive components or see them when presenting a prototype.