Related Videos

• Guide to Components in Figma

  Before you start

  Who can use this feature

  Users on any plan

  Users with can edit access to a file can create and edit components.

  Users with can view access to the original file can use components from that Library.

  Video tutorials

  Check out these video tutorials about components:

  Overview

  Components are elements you can reuse across your designs. They help to create and manage consistent designs across projects.

  You can create components from any layers or objects you've designed. These could be a whole range of things like buttons, icons, layouts, and more.

  There are two aspects to a Component:

  1. A Main Component defines the properties of the Component.
  2. An Instance is a copy of the Component you can reuse in your designs. Instances are linked to the main Component and receive any updates made to the Component.

  You can create components to use within a single file. Or, you can use Team Library to share components and Styles across files and projects.

  Related articles

  Read these articles to learn more detailed and specific information about components.

  1. Create a component
  2. Create and use variants
  3. Name and organize components
  4. Create an instance of a component
  5. Swap between component instances in a file
  6. Override properties of an instance
  7. Reset instances to remove overrides
  8. Detach instances from components
  9. Make changes to components and instances
• Create components to reuse in designs

  Before you start

  Who can use this feature

  Users on any plan can create Components. Users on a Starter team can't publish Components to a Library.

  Users with can edit access to a file can create and edit components.

  Users with can view access to a file can use components from a library, if they have access to it.

  You can create a component out of any collection of objects or layers. components can be as simple as shapes, buttons or fields, or more complex design like cards and menus.

  Tip! As you create components and build out your design system, you'll find the need for components that are similar to each other, with only slight differences.

  Variants allow you to group and organize similar components into a single container. This simplifies your component library and makes it easier for everyone to find what they need.

  Learn how to create and use variants →

  Create a component

  You can create a single component out of selection of layers. Or, create individual components in bulk from a selection of objects.

  Create a single component

  There are a few ways to create a component. First, you'll need to select the layers you'd like to include in the component. 

  1. Select the layers you’d like to be included in the component.
  2. You then have a few different methods for create a component:
     • Click Create component in the toolbar.
     • Right-click on your selection and choose Create component.
     • Use the keyboard shortcuts:
       • Mac: ⌥ Option - ⌘ Command - K
       • Windows: Ctrl + Alt + K
  3. Figma will nest the layers within a special component frame. Identify components in the Layers panel using the purple icon.
  4. In the right sidebar, add a Description and Documentation link for collaborators. Collaborators and developers can view this information in the Inspect panel.

  Tip! Figma will create a custom button if you add a link from any of the following domains:

  • Github
  • Notion
  • Storybook
  • Zeroheight
  • Confluence
  • Dropbox Paper

  Create components in bulk

  By default, the Create component action will create a single component from your selection.

  You can also create components in bulk. This allows you to select multiple groups or frames and create components out of them. Create multiple components from:

  • Objects and layers in frames
  • Objects and layers in groups
  • Single layers, like a path or vector network
  • Layers in a boolean operation

  Note: If you select more than one layer that isn't on one of the above configurations, Figma will create a component for each individual layer.

  1. Select the layers you want to create components from,
  2. Click the next to Create component in the toolbar.
  3. Select Create Multiple components from the options.
  4. Figma will create a component for each frame, group, boolean operation, or path.

  

• Create and insert component instances

  Who can use this feature

  Supported on any team or plan.

  Anyone with can view access to the file can use components from that library.

  New to components? Guide to style and component libraries →

  Components are UI elements that you can reuse across your designs.

  • The main component defines the properties of the element.
  • The instance is a copy of the component you can reuse in your designs.

  

  Create instances

  There are a few ways to create instances. Which method you can use depends on whether the components are published or local to the file.

  Method	Local components	Published components
  Assets panel	✓	✓
  Quick insert	✓	✓
  Copy/paste or duplicate	✓	✕

  Assets panel

  The Assets panel in the left sidebar allows you to search for components to add to your file. You can choose which libraries are available in the Assets panel.

  • Manage libraries for your drafts
  • Manage libraries in design files
  • Manage libraries in teams
  • Manage default organization libraries

  To open the Assets panel:

  1. Select the Assets tab in the left sidebar, or use the shortcut:
     • Mac: ⌥ Option 2
     • Windows: Alt + 2
  2. Find the component you want to use:
     • View Local components created in the current file.
     • Explore components from enabled libraries. Open the Library modal to manage available libraries.
     • View private local components and any components Used in the file.
     • Use the and to switch between grid and list view.
     • Use the search field to find components from any library you have access to. This includes team or organization libraries and files you have at least can view access to
  3. Click and drag the component into the canvas to create an instance of that component.

  

  Quick insert

  Insert instances of components from your keyboard using quick insert. Quick insert opens a Components modal where you can find and view components from enabled libraries. 

  The Components modal mirrors what you'd see in the Assets panel. Explore components from libraries you have access to:

  • Recently used components across all your files
  • Local components in the current file, organized by page
  • Select an enabled library to explore components in that library

  

  You can keep the modal open while you interact with layers in the canvas or explore layers in the Layers panel.

  1. Use the keyboard shortcut Shift I to open quick insert. This mirrors what you'd see in the Assets panel.
     • Use the search field to find a specific component. Use your mouse or arrow keys to navigate to the relevant component.
     • Use the and icons to switch between grid and list view.
     • Select from Recent components used across your files, or select from an enabled library. If a library isn't showing up here, you'll need to enable the library first. Manage libraries in design files →
  2. To swap: Select or hover over the instance, then hold down ⌥ Option (Mac) or Ctrl (Windows). Swap components and instances →
  3. Press Enter to insert or replace the component.
  4. Click or press Shift I to close quick insert menu.

  

  Tip! You can keep the quick insert modal open and move it around within the file, allowing you to quickly assess components when editing files. It's not possible to minimize the modal.

  Copy or duplicate

  If you're working in the same file, you can copy a component to create an instance. There are a few ways to copy objects in Figma.

  • A

    Duplicate using the keyboard shortcut

    • Mac: ⌘ Command D
    • Windows: Ctrl + D
  • B

    Drag to copy

    Hold down ⌥ Option (Mac) or Alt (Windows) and drag to create an instance.

    Release the click before you release the modifier key. Otherwise, Figma will move the original component instead of duplicate it.

  • C

    Copy and paste

    Copy the component and paste it as an Instance using the keyboard shortcuts:

    • Mac: ⌘ Command - C and ⌘ Command - V
    • Windows: Ctrl + C and Ctrl + V
• Create and use variants

  Before you start

  Who can use this feature

  Variants are supported on any team or plan. Publishing component sets to a library is only supported Professional and Education teams, or Figma Organizations.

  Anyone with Can edit access to a file can create variants and component sets in that file.

  Anyone with Can view access to a file can use components or components sets from that library.

  As you create components and build out your design system, you'll find the need for components that are similar to each other, with only slight differences.

  For example: you might have multiple components for buttons, with separate components for various states and sizes, as well as light and dark modes.

  Variants allow you to group and organize similar components into a single container. This simplifies your component library and makes it easier for everyone to find what they need.

  Customize the properties and values of your variants, to take the guesswork out of your design system and bring your components closer to front-end code.

  Note: We don't recommend using variants to group different icons.If you have different sizes of the same icon, then you could combine these as variants instead.

  Properties and values

  Properties and their values allow you to define attributes of your variants. 

  You can add as many properties and values as you need, and customize them to suit your design system. You can even map your properties and values to code components in your design system.

  • Properties are the variable aspects of our component. For example: the properties of a button component could be the type, size, state, or whether it has an icon.
  • Values are the different options available for each property. For example: the state property could have default, hover, pressed, and disabled values.

  All variants within the component set will use the same properties and values, but each variant needs to be a unique combination of them. You don’t need to have a component for every possible combination of properties and values.

  Properties and values in action

  Let's take a look at an example! We have a button component that has 24 unique variants. The image below shows all of the variants for this component inside a single component set.

  

  There are four properties in our button component set, each with its own set of values.

  • Type property with Primary and Secondary values.
  • Size property with Large and Small values.
  • State property with Default, Pressed, and Inactive values.
  • Icon property has True and False values.

  Figma uses these properties and values to determine which variant we need from the component set. In the image below, we've created an instance of our component set and configured the following values:

  •  Type: Primary
  • Size: Large
  • State: Default
  • Icon: False (or off)

  

  Layer names and syntax

  Layer naming is an important aspect of creating and managing variants. Unlike other layer names in Figma, which can be mostly arbitrary, the names of variants in a component set have a very specific syntax.

  This includes information about the properties and values of that variant. You can only see this syntax when you try to rename a variant in the layers panel.

  Variant names follow this structure: Property1=value, Property2=value, Property3=value

  

  Combine components as variants

  Caution: When you add an instance with variants to a file, Figma will import every variant in that component set. Importing large component sets will impact Figma's speed and performance.

  If you already have component libraries in Figma, you can combine your components as variants. The general process looks like this:

  • Rename your components so they use the slash naming convention
  • Organize your components on the canvas
  • Combine components as variants
  • Give your properties descriptive names

  Note: Figma only looks at layer names when combining components as variants, not page and frame names. If you were using pages or frames to organize components, these will become redundant on conversion.

  You’ll still be able to use pages and top-level frames to create extra levels of hierarchy. This makes for better component organization in the Assets panel and Instance menu.

  Rename your components

  Figma uses the slash naming system to organize components in the Assets panel and Instance menu. Each / in a component's name will create another level of hierarchy.

  This makes it easier to navigate your library, or find and swap related components. Learn how to name and organize components →

  Tip! You can rename layers in bulk using the rename layers modal. Learn more about renaming layers in bulk →

  You can also use this naming system to convert your existing components to variants. To be accurately converted, component names need to follow this structure:

  componentName/property1value/property2value/property3value

  • The text before the first / will become the name of the component set.
  • Figma will create a new property for every other / in the component's name, then add the attribute as a value.
  • If you have used suffixes in your naming system, you will need to add these to the component's name, separated by a /.

  Caution: To make sure your values match up with the same property, every component you are combining needs to have the same number of slashes.

  A button component with the name Button/Primary/Large/Default/False will have the following properties and values:

  Component set name: Button
  Variant: Primary
  Property 2: Large
  Property 3: Default
  Property 4: False

  In the image below, we can see how the rest of our component names (on the left) are converted to variant values (on the right).

  Organize components on the canvas

  Note: Component sets can only contain components, so it's not possible to add text or annotations, nest frames, or group a subset of variants inside a component set.

  When combining components as variants, Figma will apply your existing layout and spacing to variants inside the component set. We recommend organizing your components before converting them, to save you having to rearrange them after.

  If you have a lot of variants for a particular component, you may want to organize your components in rows, columns, or grids.

  This will help to communicate their multi-dimensional nature to anyone who's using your design system. You can also add text layers beside your component set to annotate the relevant properties and values.

  In our example below, we've arranged our button variants in a grid. We've also added text layers to the canvas that correspond to a property's values.

  Tip! By default, component sets have a dashed-purple stroke and no fill. You can adjust the fill and stroke properties of the component set to better suit your brand or design system.

  Combine as variants

  1. Select the components you want to combine. Learn how to select layers and objects →
  2. In the right sidebar, click the Combine as Variants button.
  3. Figma will add all components to a single component set.

  

  Give properties descriptive names

  As part of the conversion process, Figma will create generic properties and add any attributes you added to the component's name as values.

  As Figma doesn't know the names of the properties, it will name the first property Variant, then number them sequentially: Property 2, then Property 3, and so on.

  You'll need to rename those properties to something more descriptive.

  1. Select the component set.
  2. View the current properties in the Variants section in the right sidebar.
  3. Hover over the property so a grey box appears around it.
  4. Click to edit the property and give it a more descriptive name.
  5. Click outside the property to apply.
  6. Repeat for the remaining properties.

  

  Note: Figma handles component sets the same way as regular components. You can add descriptions and links to documentation to them. You can also drag them into the canvas from the Assets panel, and swap between instances of them.

  Create new variants

  Note: Figma places variants in a single container called a component set. Component sets can only contain components. Click Create component in the toolbar, or use the keyboard shortcut to turn your selection into a component:

  • Mac: ⌥ Option ⌘ Command K
  • Windows: Ctrl + Alt + K

  Learn how to create components →

  1. Select a component
  2. Rename the component so it uses the slash naming convention (recommended).
  3. In the right sidebar, click the under the Variants section to add your first variant.
  4. Figma will do a few things:
     • Make an identical component with the same properties
     • Add both components as variants to a component set
     • If you used the slash naming convention, the text before the / will become the name of the component set and the attributes after will be used as values.
  5. Make any visual changes to the variant as required.

  Tip! By default, component sets have a dashed-purple stroke and no fill. You can adjust the fill and stroke properties of the component set to better suit your brand or style guide.

  Add properties and values

  Add properties and values to your variants when you first create them, or as your design system evolves.

  Add properties to the component set:

  1. Select the component set.
  2. Click the in the Variant section of the right sidebar.
  3. Select Add New Property.

  You can only add values when you have a variant selected. There are a few ways to do this:

  • Click the next to the current value and select Add new from the options.
  • Click into the value field and enter in a new value.
  • Double-click on the variant in the layers panel and update the value for the desired property.

  Tip! If you have a property that has only two possible options, Figma considers this a binary choice or a boolean value and can represent that property as a toggle switch. Figma recognizes both true/false and on/off as boolean values.

  Fix conflicted value errors All variants within the component set will use the same properties and values, but each variant needs to be a unique combination of them.

  If any variants have the exact same combination of values, Figma will let you know that there is a conflict. You'll see this error even if the variants themselves are visually different.

  To resolve this issue, you'll need to add or update the values of the affected variants, so they have a unique combination of values.

  Add more variants to a component set

  Continue to add variants to your component set using any of the following methods:

  • Click on the canvas, inside the component set. You'll only see this option once you have at least two variants.
  • Click in the Variants section of the right sidebar and select Add New Variant.
  • Duplicate existing variant using the keyboard shortcut:
    • Mac: ⌘ Command D
    • Windows: Ctrl + D
  • Drag other components into the component set to add them as variants.

  Tip! Dragging in other components won't reflow existing variants. You can use Smart Selection to adjust the layout of your variants. Learn more about smart selection →

  Caution: When you add an instance with variants to a file, Figma will import every variant in that component set. Importing large component sets will impact Figma's speed and performance.

  Manage variants

  Organize variants

  When you add new variants to a component, Figma's default behavior is to add variants in a single column, with equal spacing between them.

  If you have your components in another layout before converting them, Figma will keep the same layout for the component set.

  You can override Figma's default behavior and arrange variants in any way you choose.

  • Select a variant and move it to new co-ordinates within the component set. Figma will allow you to place variants anywhere within the component set, including over the top of other variants.
  • Adjust the dimensions of the component set in the right sidebar, or resize it in the canvas like you would a regular frame.
  • With all variants selected: Use the fields in the right sidebar to adjust the horizontal and vertical space between variants.

  Note: Figma will use the variant in the top-left corner as the default variant. This variant will represent the entire component set in the Assets panel.

  Rename properties and values

  To rename a property or value, you'll need to select the component set and update the property or value in the Variants section of the right sidebar.

  To rename a property:

  1. Click on the property and enter a more descriptive name.
  2. Press the Enter / Return key to apply or click outside the property to apply.
  3. Repeat for the remaining properties.

  To rename a value:

  1. Double-click on the value and enter a new name.
  2. Press the Enter / Return key to apply.

  

  Note: If you've converted your existing components to variants, you'll need to rename your properties to make them more descriptive.

  Fix corrupted variant errors You will get a corrupted variant error if any of your variants do not follow this syntax. This can happen if you mistype a property or value, or use an invalid naming structure when converting existing components.

  To fix this issue, you'll need to rename the properties and values of the variant. While it's possible to rename them using this syntax in the layer name, we recommend renaming properties and values in the right sidebar instead.

  Reorder properties and values

  You can change the order that properties and values appear in the right sidebar. If you reorder properties, Figma will adjust the name and syntax of your variants to match.

  To reorder properties:

  1. Select the component set.
  2. In the Variants section, hover over the left edge of the property field until the appears.
  3. Click and drag the property up or down to change its order.

  To reorder values:

  1. Click and hold on the value.
  2. Drag to value so its in the new order.
  3. Release to apply.

  Remove properties

  To remove a property:

  1. Select the component set.
  2. Hover over the property in the Variant section of the sidebar.
  3. Click to remove.

  Note: Figma will only keep values that are currently applied to a variant. You can remove a value by making sure no variant uses it.

  Publish component sets to a library

  If you're a member of a Professional or Education team, or a Figma Organization, you can share your variants with collaborators.

  Publish component sets alongside your styles and regular components to allow members of your team or organization to use them.

  Component sets appear in the Assets panel alongside your other components. Figma will use the variant in the top-left corner of the component set as the default variant.

  Collaborators can then drag the component set into their files to create an instance. They can then access all the other variants in the component set by configuring the property values in the right sidebar.

  Learn how to publish libraries →

  Are you a member of a Figma Organization? Design system analytics allow you to see how members of your organization are using components and variants. Learn how to track component and variant usage →

  Use variants

  Component sets appear in the Assets panel alongside any regular components. So instead of looking for a specific variant in the Assets panel, you only need to select the component set.

  Once you have an instance of that component set on the canvas, you can configure the instance's property values to select a variant.

  Select component sets

  1. Click on the Assets tab in the left sidebar, or use the keyboard shortcut:
     • Mac: ⌥ Option 2
     • Windows: Alt + 2
  2. Click on a component set and drag it on to the canvas. Figma will create an instance of the default variant of that component set.
  3. View the component set's name and properties in the right sidebar.
  4. Use the next to the property to select your preferred combination of values.
  5. Turn specific properties off and on using the and toggle switches.

  Configure variants

  Select other variants in a component set by configuring the properties and values in the right sidebar.

  1. Select the instance.
  2. View the name of the component in the right sidebar. If the component has variants, you'll see fields underneath the component name to configure the properties and values of that component set.
     • Use the next to the property to select your preferred combination of values.
     • Turn specific properties off and on using the and toggle switches

  Swap between instances

  You can still swap between instances when using variants, like you would with regular components.

  The most efficient way to do this is using the Instance menu. The Instance menu allows you to find component replacements from the current file, or any of your enabled team libraries.

  Access the Instance menu from the properties panel in the right sidebar, when you have a component selected.

  1. Select the instance you want to change.
  2. Click on the component name in the right sidebar.
  3. Use the instance menu to search for and select another component.

  Learn how to swap using the instance menu →

  Override properties

  Component libraries define and outline the ideal implementation of our design system.

  These components often contain generic information which you'll need to change, like a button label. Under some circumstances, you may need to change other aspects of that specific instance.

  Overrides allow you to make superficial changes to instances. Figma supports overrides to text, fill, stroke, and effect properties. Learn more about supported overrides →

  Override preservation

  Figma will attempt to preserve your overrides when you select a different variant, or swap between instances in the Instance menu.

  Figma uses the following criteria to determine whether to preserve an override:

  • Layer names need to match between the current instance and the variant or instance you're selecting. This applies both when swapping instances and selecting variants
  • When selecting variants, Figma will also check if the layer properties you’ve overridden originally match between variants. If so, Figma will preserve your overrides.

  In our example below, Figma preserves the fill override on Step 3, but not on Step 4. This is because the default primary button and hover primary button both started with the same fill of #1BC47D. Our override was to change the hex code from #1BC47D to #F531B3.

  Figma doesn't preserve our override in Step 4 as the hover secondary variant has a fill of #ffffff, which is different to the fill we applied our original override to (#1BC47D).

  

  Tip! If you're not sure what variants are available in a component set, or their original styling, you can view the component set in the original file. With the instance selected, click the next to the component name in the right sidebar.

• Create interactive components with variants

  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 →

  Before

  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.

  

  After

  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.

  

  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:

  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.

  

  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

  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:

  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.

  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 support@figma.com.

  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 edit access 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 edit access 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 access to 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.

  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:

  1. Select an interactive component from your canvas or layers panel.
  2. Navigate to the Prototype tab in the right sidebar.
  3. 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.

  Explore the playground file →

• Swap components and instances

  Who can use this feature

  Supported on Education, Professional, and Organization, plans

  Anyone with can edit access to a file can insert components into a file.

  New to components and libraries? Guide to style and component libraries →

  Components let you create and reuse elements of your designs to speed up the process and keep things consistent.

  When building interfaces, we often switch between instances of these components for objects like icons, buttons, and cards.

  The Instance menu lets you quickly search, preview, and swap one component for another. There are a few ways you replace or swap instances in Figma.

  Want to swap instances in bulk? Use the Swap libraries feature to replace local instances with components from another library. Swap libraries →

  Note: Figma will try to preserve any overrides when you select a different variant, or swap between instances in the Instance menu. Learn more about override preservation →

  Instance menu

  The Instance menu allows you to find component replacements from the current file and any of your enabled team libraries.

  Access the Instance menu from the properties panel in the right sidebar, when you have a component selected.

  

  Figma orders components in the Instance menu based on the component's Name and Location.

  • Related components are components that share the same hierarchy. This includes components in the same file, page, and frame.
    
    For example: you can have a file containing your app's UI design system, a page for each operating system, and frames within each page where your components are grouped by type.

  • Figma also groups related components organized using the slash naming structure.
    
    For example: Figma considers UI/Button/Active, UI/Button/Hover, and UI/Button/Inactive as related components.

  

  Learn how to name and organize components →

  To swap an instance using the Instance menu:

  1. Select the instance you want to replace. Figma will display the name of the component in the Instance section of the right sidebar.
  2. Click the name of the component to open the Instance menu.
  3. Use the menu to navigate through components:
     1. Select from the group of related components for your selection.
     2. Use the field to search a component by name.
     3. Click to switch between enabled libraries.
     4. Click to navigate to a different group of components.
     5. Use the and to switch between grid and list view.
  4. Select an instance to replace the current selection.

  

  Assets panel

  The Assets panel in the left sidebar allows you to search for components to add to your file. You can find components from any libraries you have access to.

  You can drag a component onto the canvas to create an instance of that component. If you use the modifier key while dragging a component from the Assets panel, you can replace the existing component.

  1. Open the Assets panel and find the component.
  2. Hold down the modifier key: If the component isn't nested within another frame or component
     • Mac: ⌥ Option
     • Windows: Alt
     If the component is nested within another Frame or component
     • Mac: ⌥ Option - ⌘ Command
     • Windows: Alt + Control
  3. Drag the component above the instance you want to swap in the canvas.
  4. Release the mouse, then release the modifier key. If you release the modifier key first, Figma will only add the new component, not replace.

  Note: Figma only preserves text overrides. To keep any changes you've made to text layers, rename the layers so they're unique. If you swap a component with other overrides applied, we won't apply these to the new component. Learn more about overriding properties of an instance.

  Quick insert

  Swap instances of components from your keyboard using quick insert. Quick insert opens a Components modal where you can find and view components from enabled libraries.

  The Components modal mirrors what you'd see in the Assets panel. You can keep the modal open while you explore layers in the Layers panel. Select or hover over a layer or instance to replace it with another component.

  1. Select the layer or instance you want to swap.
  2. Use the keyboard shortcut Shift I to open quick insert. 
     • Use the search field to find a specific component. Use your mouse or arrow keys to navigate to the relevant component.
     • Use the and icons to switch between grid and list view.
     • Select from Recent components used across your files, or select from an enabled library. If a library isn't showing up here, you'll need to enable the library first. Manage libraries in design files →
  3. Hold down ⌥ Option (Mac) or Ctrl (Windows). Press Enter to replace the component.
  4. Click or press Shift I to close quick insert menu.

  

  Tip! You can keep the quick insert modal open and move it around within the file, allowing you to quickly assess components when editing files. It's not possible to minimize the modal.

  Right-click menu

  You can also use the right-click menu to switch between related components. This will only allow you to select components in the same frame or hierarchy.

  1. Right-click on the instance in the canvas.
  2. Hover over the Swap Instance option.
  3. Select an instance from the list of related components.

  

• Apply overrides to instances

  Before you start

  Who can use this feature

  Supported on Education, Professional, and Figma Organization, plans

  Anyone with Can edit access to a file can override properties of an instance in that file.

  Component libraries define and outline the ideal implementation of a design system.

  These components often contain generic information which designers will need to change, like the text on a button or the contents of a menu.

  Overrides are changes you make to the properties of a single instance. They allow you to customize an instance to suit its new context, or explore iterations of a design.

  Figma will record the changes you make to an instance and preserve them, even when you swap between instances or select different variants.

  

  Supported properties

  Figma supports overrides to text, fill, stroke, and effect properties. This allows you to make changes to the more superficial aspects of an instance.

  You can apply the following overrides:

  • Adjust text properties, including font, weight, size, line height, letter spacing, and resizing.
  • Adjust the fill or stroke of any layers, including the fill type, value, and opacity.
  • Add, adjust, or remove any shadow or blur effects.
  • Add, adjust, or remove layout grids.
  • Swap nested instances of other components, like icons.

  It's not possible to make changes to the underlying structure of an instance. You can't override:

  • The order, or z-index, of any layers within the instance.
  • Position of any layers within the component, including items in an Auto Layout.
  • Any constraints applied to the layers.
  • The bounds of any text layers. You can still change a text layer's resizing properties.

  Tip! If you have applied an override to a specific Instance, copying that Instance will also copy the overrides.

  Preserve overrides

  Figma will attempt to preserve your overrides when you select a different variant, or swap between instances in the Instance menu.

  Figma uses the following criteria to determine whether to preserve an override:

  • Layer names and hierarchy need to match between the current instance and the variant or instance you're selecting. This applies both when swapping instances and selecting variants
  • When selecting variants, Figma will also check if the layer properties you’ve overridden originally match between variants. If so, Figma will preserve your overrides.

  The criteria is less strict for preserving text overrides. Figma will keep any changes you've made to text layers if the name of the text layer is the same between components. Figma will also check if the text layer's hierarchy is similar.

  Push overrides to main component

  You can choose to push your overrides back to the main component. This will apply your overrides to the main component, which will then update any other instances of that component.

  You can only push overrides if the main component is in the same file as the instance. It's not possible to push overrides to components in another file, including published libraries.

  Note: It's not possible to push overrides to a component that's nested within another component. You will need to make those changes to the main component itself.

  1. Select the instance with your overrides applied to it. You'll need to select the instance itself, and not a specific layer within it.
  2. In the right sidebar, click the next to the component name.
  3. Select Push overrides to Main from the options.
  4. Figma will apply your overrides to the main component.

  Tip! If you are working in a published library file, you will need to publish your changes to allow other instances to receive those updates. Learn how to publish updates to a library →

  Reset overrides

  Reset the instance to restore the properties of the main component. You can choose to reset the entire instance, or just a specific property.

  View any overrides for your current selection in the in Instance section of the right sidebar. From there, you can reset overrides for an individual property, or for the entire instance.

  • Select the entire Instance to view and reset overrides for the entire instance.
  • Select a specific layer to view and reset overrides for only that layer.

  1. Select the instance to view overrides for the entire instance, or a specific layer to view overrides for that layer only. Hold down the modifier key to selected a nested layer:
     • Mac: ⌘ Command
     • Windows: Ctrl
  2. In the Instance section of the right sidebar, click the icon.
  3. Figma will open a menu that allows you to view any overrides for your selection. Figma will only list properties that have overrides applied.
     • Select Reset [Property] to reset a specific property.
     • Select Reset All Overrides to reset all properties for that layer.
  4. Figma will reset the property to match the main component.

  Tip! If you know that you want to reset all overrides, you can also reset the instance in a few other places:

  • Right-click on the instance in the canvas and select Reset Instance
  • Click the Reset All Overrides button in the toolbar.
• Edit main components

  Who can use this feature

  Components are supported on any team or plan. You must be on a Professional, Education, or Organization plan to publish components to libraries.

  Anyone with edit access to the file can make changes to the main components in that file.

  New to components and libraries? Guide to style and component libraries →

  Any instance you create is linked to the main component. When you make changes to the main component, Figma will apply any changes you apply to any linked instances.

  If you are using instances within the same file as your main components, Figma applies changes immediately. If the components are published to a library, you need to publish those changes to see those updates in subscribed files.

  Update components

  To make sure Figma applies changes to all instances of a component, you will need to edit the main component. You can only edit main components in the original files where they live.

  • Unpublished components:

    If you're on the Starter plan, or haven't published the components to a library, you can edit your main components like you would any other layers.

    Figma will automatically apply any changes you make to the main component to any local instances in your file.

  • Published components:
    Figma will immediately apply any changes you make to any instances in that file. If you want those changes to apply to instances in other files, you will need to publish those changes to the Library.

  Want to change the location of components? You can move published components between files and libraries. Move published components →

  Find main components

  If you're working with instances in a separate file, use the Go to main component setting to open the library file. From there, you can apply any changes you want to the main component.

  1. Select an instance in the current file.
  2. Open the Design tab in the right sidebar.
  3. Click in the instance section to open the library file.

  Once you select the main component selected, you can make any changes. Figma will make sure those changes are applied to any linked instances.

  Note: If you accessed the main component from another file, Figma will give you the option to Return to instance after making your changes.

  Push overrides to main component

  There may be situations where you want changes you've applied to an instance to apply to the main component as well.

  You can use the Push overrides to main component setting to apply any overrides to the main component. This will also update any other instances of that component.

  You can only push overrides if the main component is in the same file as the instance. It's not possible to push overrides to components in another file, including published libraries.

  Note: It's not possible to push overrides to a component that's nested within another component. You will need to make those changes to the main component itself.

  1. Select the instance with your overrides applied to it. You need to select the parent frame of the instance, not a sublayer.
  2. In the right sidebar, click next to the component name.
  3. Select Push overrides to main component from the options.
  4. Figma will apply your overrides to the main component.

  Publish changes to the library

  If you make changes to a published style or component, this will only apply those changes to instances in the current file. If you want those changes to be reflected in your library, you will also need to publish those changes to the library.

  Figma will display a blue dot on the icon in the Assets panel of the left sidebar to let you know if there are any updates that need to be published:

  Caution: You can only publish and use components via the library, on the Professional, Education, or Organization plans. Learn more about plans and pricing →

  1. Click either the Assets panel at the top of the left sidebar to open the library modal.
  2. Add a description of any decisions or changes. This will show in the file's version history, and the Updates tab of the Libraries modal.
  3. View a list of changes to the library. This details any styles and components added, modified, or removed.
  4. Choose which changes you want to publish:
     • Check individual components you do want to publish
     • Uncheck individual components you don't want to publish
     • Uncheck Changes to deselect all styles and components
  5. When you've finalized your styles and components, click the Publish button. Figma will show a notification to confirm your file has been successfully published.

  

  Publish styles and components →

  Note: By default, Figma will open the main component file in a new tab. Figma won't show you the Return to instance prompt, but you can switch between tabs to return to the original instance.

• Detach an instance from the component

  Before you start

  Who can use this feature

  Users on any plan

  Users with Edit access to a file can detach Component Instances.

  Learn more about Components in our Guide to components in Figma and Get started with Team Library articles.

  You can detach any Instance from its main Component. This is useful if you want to make changes to the Component that aren't supported by overrides.

  Or, if you want to create a variation of a Component from your changes.

  When you detach an Instance Figma will:

  • Make the Instance a regular frame, while keeping the current layers and properties.
  • Remove the link to the original Component.
  • No longer apply any changes made to the Component, to that object.

  Note: Figma Organizations can track how often Instances are detached with Design System Analytics.

  Instance menu

  1. Select the Instance you wish to detach.
  2. Click on the Instance menu in the Properties Panel.
  3. Select Detach Instance from the menu.
     

  Right-click menu

  1. Right-click on the Instance on the canvas or in the Layers Panel.
  2. Select Detach instance from the options: 

  Keyboard shortcuts

  You can quickly detach instances using the keyboard shortcut:

  • Mac: ⌥ Option ⌘ Command B
  • Windows: Ctrl + B

  Tip! Accidentally created a Component? You can turn this back into an Instance.

  This allows you to keep the object(s) you created, without having them as Components.

  • If you just created the Component you can undo it right away using the shortcut:
  • mac: ⌘ Command Z
  • Windows: Control + Z
  • If you want to revert something that's been a Component for a while:
    1. Create an Instance of the new Component.
    2. Detach the Instance from the Component.
    3. Delete the original Component.