···

    Create interactive components with variants

    Who can use this feature

    Supported on any team or plan.

    Anyone with can edit access can create interactive components.

    Anyone with can edit access to the file can publish components to a library.

    New to Prototyping? Check out our Guide to prototyping in Figma →

    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 →

    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.

    Creating connections for a frame with multiple check boxes

    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.

    Using a checkbox interactive component to prototype a frame that includes multiple checkboxes

    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.

    Component set in prototype tab when creating variant interactions

    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.

    Hands-on learner? Explore the interactive components playground file →

    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.

    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.

    Interactions and Variant interactions sections of the Prototype tab

    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.

    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.

    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.

    Tip! Visit the Figma Forum to ask questions, share feedback, and connect with the Figma community!

    Related Videos

    See more