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. Name and organize components
  3. Create an instance of a component
  4. Swap between component instances in a file
  5. Override properties of an instance
  6. Reset instances to remove overrides
  7. Detach instances from components
  8. Make changes to components and instances
• Prepare for Variants

  This feature is currently in beta. Figma will be partnering with a group of beta customers to test Variants. This is to iron out any bugs or issues, before making them available to everyone.

  Figma plans to roll out Variants to everyone by the end of November. Support for Interactive Components will come early 2021.

  Variants introduce a new way to group and organize variants of the same component. This makes components easier to maintain and more intuitive to use.

  Combine variants into a single component with custom properties and values. These can mirror front-end code, simplify asset libraries, and make picking the right variant easier.

  In our example, we have a button component which has 24 variants. You can see these variants in this image of our design system:

  

  There are four properties in this example, each containing a 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 with True and False values.

  Figma uses this set of properties and values to identify each unique variant. The screenshot below shows this variant in the Instance section of the right sidebar.

  

  Use the next to the property to select your preferred combination of values. Or toggle specific properties off and on using the and switches.

  Note: You can only convert components into variants. If your selection includes other layers or objects, you won’t have the option to combine them as variants.

  Prepare for Variants

  There are a couple of things that you can do to make converting your existing design system components as easy as possible.

  1. Use a consistent naming convention
  2. Organize components on the canvas
  3. Group related components

  Note: These suggestions affect how users can select components from libraries in Figma. If this will cause problems for your team, hold off on making these changes until you have access to Variants.

  Use a consistent naming system

  Figma already supports slash / naming system to organize components. You can use this naming system to help convert your existing components to Variants.

  We recommend using the following structure for any components you want to convert: componentName/property1value/property2value/property3value

  • Any text before the first / will become the component name. Every extra / level will create a new property.
  • By default, Figma will name the first property Variant, the next Property 2, then Property 3, and so on.
  • Every variant will need a value for each property. Make sure that each component uses the same number of slashes.
  • If you have suffixes in your naming system, you should convert these to / levels before combining the components as variants. For example: if you have component states for - hover or - pressed, create another / level for the state.
  • When you combine variants into one component, Figma will create toggles for any Yes/No or True/False values.

  For example: our button component has the following name: Button/Primary/Large/Default/True

  Once converted, the resulting variant will look like:

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

  You’ll be able to change the name and order of any properties once you convert them to variants. Reorder properties in the Variants section of the right sidebar. This will also change the order of the values in each variant’s name.

  

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

  Organize components on the canvas

  It can be easier to keep track of all your variants if you lay them out in a grid. The top-level container of a component can’t hold anything other than variants. This means you can't group a set of variants together, or insert text or other annotations into the container.

  To annotate your variants, we recommend adding text labels for relevant properties and values beside the variant container.

  You don’t need to have a component for every possible combination of properties and values, just the ones that you and your team use. This can include any variants you’ll need for interactive components.

  Figma groups variants in a single container. By default, Figma will represent this container with a dashed, purple border. Like regular frames, you can adjust the properties, like Fill or Stroke, to suit your design system.

  

  Group related components

  Figma only looks at layer names when combing components, not page and frame names. If you were using pages or frames to organize variants, these may 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.

  You could use an approach similar to Shopify’s Polaris design system. It groups sets of components, that are functionally similar. For example Button and Button Groups under Actions, or Text field and Date picker under Forms.

  Create instances of Variants: Figma will make sure your instances point to the correct component. When you convert components to Variants, any instances will reference the new variant.

  Anyone accessing design systems in the Assets panel or Instance menu will see a single result for that component. Once they place an instance on the canvas, they can select the desired variant in the right sidebar.

• 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.

  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 Instance section of the right sidebar, add a Description. 
  5. Figma displays the Description when you hover over the component in the Assets and Inspect panels.

     

  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 an instance of a component

  Before you start

  Who can use this feature

  Users on any plan can create instances.

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

  New to components? Check out our Guide to components in Figma and Get started with Team Library articles.

  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

  You can create Instances of component in a few different ways.

  Component from other files

  The Assets panel in the left sidebar allows you to search for components to add to your file. Use the Assets panel to:

  • Search for a component from any library you have access to. This includes libraries shared in a team or across an Organization, as well as files you have can view or can edit access to.
  • Switch between Grid and List view
  • Open the Library modal
  • View Local components created in the current file
  • View components Used in the file
  • Explore components from enabled libraries.

  

  Access components in the Assets panel

  1. Click on the Assets tab in the left sidebar, or use the keyboard shortcut:
     1. Mac: ⌥ Option - 2
     2. Windows: Alt + 2

  2. Click on a Component and drag it into the canvas to create an Instance.

  You can choose which libraries are available in the Assets panel.

  • Enable libraries in the Assets panel for a file
  • Enable libraries in the Assets panel for a team
  • Choose default Libraries in an Organization

  Components in the same file

  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.

  Duplicate it using the keyboard shortcut:

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

  Hold down the modifier key 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.

  • Mac: ⌥ Option
  • Windows: Alt

  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
• Swap between component instances in a file

  Before you start

  Who can use this feature

  Users on Education, Professional, and Organization, plans

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

  New to components and libraries? Check out our Guide to components and Get started with Team Library articles.

  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.

  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.

  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.

  

• Override properties of a component Instance

  Before you start

  Who can use this feature

  Users on Education, Professional, and Organization, plans

  Users with Edit access to a file can Override properties.

  New to Components? Check out our Guide to components in Figma and Get started with Team Library articles.

  When we make a change to a property in a single Instance, we call this an Override.

  You can use overrides to create variations of a Component. e.g. changing the text in a button, or creating different states of a Component.

  Looking for how to reset overrides? Try our Reset Instances to remove overrides article.

  Override a component

  Overrides allow you to make changes to:

  ✅ Text: Font, Weight, Size, Line Height, Letter Spacing, Paragraph Spacing, Indentation.
  ✅ Color/Paints: Fill (including Images, GIFs and Gradients), Stroke, Background Color, Opacity.
  ✅ Effects: Drop Shadow, Inner Shadow, Layer Blur, Background Blur.

  It's not possible to make changes to:

  🚫 Position of any layers within the Component
  🚫 Layer order
  🚫 Constraints
  🚫 Layout Grids
  🚫 Bounds of any Text layers

  In our example below, we've changed both the icons and the labels in our buttons:

  

  This ensures we keep the override when you switch between Instances. Learn more in our Preserve Text Overrides section below.

  Push overrides to main component

  If you've made an override you want to apply to other Instances, you can push your changes to the Main Component. This will also affect any other Instances of that Component.

  ✅ You can only push overrides when the Main Component is in the same file
  🚫 It's not possible to push overrides to Components in a published Team Library
  🚫 It's not possible to push overrides to nested Components

  To push your changes to the Main Component:

  1. Select the Instance with your overrides applied to it.
  2. Click on the Instance name in the Properties Panel.
  3. Select Push overrides to Main from the options: 
  4. Figma will update the Main Component to reflect your changes.

  Preserve overrides

  When swapping between Instances, you may want to preserve the overrides you've applied.

  At the moment, we can only preserve Text overrides. We won't keep any other overrides - such as Colors and Effects - when you swap an Instance.

  To make sure Figma preserves any text overrides, you will need to name the affected Text layers something unique. This ensures Figma doesn't replace those overrides with the Text layers of the swapped Component.

  There are a few ways to rename a layer:

  • Double-click on the layer in the Layers panel to edit the layer name.
  • Right-click on the layer in the Layers panel and choose Rename Layer.
  • Use the Keyboard Shortcuts:
    • Mac: ⌘ Command R
    • Windows: Ctrl + R
  • Rename layers in bulk

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

• Reset Instances to remove overrides

  Before you start

  Who can use this feature

  Users on any team or plan.

  Users with can edit access to a file can reset component overrides.

  New to components? Check out our Guide to components in Figma and Getting Started with Team Library articles.

  When you change the properties of a single instance, Figma will record your changes as an override. This allows you to create variations of the component, including:

  • Customizing a text label or icon in a button
  • Different visual styling for interaction states
  • Creating entirely new components

  If no longer want to use the override, you can reset an Instance to restore the properties of the main component. You can reset the entire Instance, or choose which properties you want to reset.

  Learn how to override properties of a component →

  View and reset overrides

  Figma lets you see any overrides for your current selection. Once you have made your selection, view details of the Instance and any overrides in the Instance section of the Design tab.

  • Select the entire Instance to view and reset overrides for the entire Instance.
  • Select a specific layer to view and reset overrides for each layer.

  

  1. Select the instance or layer within the instance. Hold down the modifier key to selected a nested layer:
     • Mac: ⌘ Command
     • Windows: Ctrl
  2. In the Instance section of the Design tab, click the icon.
  3. Figma will open a menu that allows you to view any overrides for your selection. Properties with overrides will have the option to reset overrides.
     
     

  Reset all overrides

  To restore the properties of the main component, you can reset all overrides. You can reset all overrides on a single layer, a selection of layers, or the entire Instance.

  Once you have made your selection, there are a few ways to reset all overrides:

  • Right-click on the layer/instance and select Reset Instance
  • Click in the Instance section of the Design tab. Select Reset All Overrides.
  • Click in the toolbar.

  Reset a specific property

  You can also choose to reset a specific property. This allows you to reset one property while keeping any other overrides you've applied.

  If you only want to reset one property, you can do this from the Instance section of the Design tab.

  1. Select the Instance in the canvas or Layers panel.
  2. In the Instance section in the Design tab, click to open the overrides menu.

  3. Select which property you wish to reset.

     • Select Reset [Property] to reset a specific property
     • Select Reset Overrides to reset all properties for that layer
       
       

  4. Figma will reset the property to match the main component.

• 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.
• Make changes to Components and Instances

  Before you start

  Who can use this feature

  Users on any team or plan can make changes to the main component.

  Users with can edit access to a file can edit the main component.

  New to Components? Check out our Guide to components in Figma and Get started with Team Library articles.

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

  Warning! It's not current possible to move a main component to another file. Moving the main component will break the link between the main component and any instances.

  Make changes to 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 the main component in the file where it currently lives.

  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.

  Update the main component

  You can go to the main component from any instance. 

  1. Select an instance in the current file.
  2. Open the Design tab in the right sidebar.
  3. In the Instance section, click the Go to main Component link.

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

  Tip! If you accessed the main component from another file, Figma will give you the option to Return to Instance after making your changes.

  Publish changes to the library

  Warning: You can only publish and use components via the library, on a Professional team. Learn more about Figma's Professional plans: https://www.figma.com/pricing/

  When you make changes to a component, those changes will only apply to instances within the current file. 

  If you want to update instances in other files you will need to publish your changes to the library. 

  1. Go to the library with the main component.
  2. Make any changes you'd like to the main component.
  3. Publish your changes to the library.
  4. Figma will notify you of those changes when you open a file that uses these components. 
  5. Click Review and the choose which updates to apply to your file.

  Learn more about sharing components and publishing updates in our Team Library article.

  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.