Related Videos

• Get started with Components

  Before you start

  Who can use this feature

  Users on any plan

  Users with Edit access to a file can create and edit Components.

  Users with View access to a file can use Components from libraries they have access to.

  Video Tutorials

  Check out these easy to follow 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. Master Component defines the properties of the Component.
  2. Component Instance is a copy of the Component that you use in your designs.

  Instances are linked to the Master Component, we will apply any  changes you make to the Master Component to any Component Instance.

  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 Instances of a Component
  5. Override Properties of a Component Instance
  6. Reset Overrides to Restore the Master Component
  7. Detach Instances from the Master Component
  8. Make changes to Master Components
• Create a Master Component to reuse in designs

  Before you start

  Who can use this feature

  Users on any plan can create Components. Users on a Starter Team cannot publish Components to a Library.

  Users with Edit access to a file can create and edit Components.

  Users with View access to a file can use Components from libraries they have access to.

  You can create a Component out of any collection of objects or layers. This could be something as simple as a button or a field, or a more complex design like a menu.

  Create a Component

  You can create a single Component out of selection of layers.

  1. Select the layers you’d like to be included in the Master Component:

     

  2. There are a few ways to create a Component:
     • In the Options menu, click the Create Component button:

       

     • Right-click on the selected layers - in the canvas or in the Layers Panel - and choose Create Component from the options:

       

     • Use the Keyboard shortcuts:
       • Mac: Option - Command - K
       • Windows: Ctrl + Alt + K There are then a couple of different ways you can create a Component:
  3. Figma will nest the layers within a Component. This works like a Frame and will be purple in the layers panel:

     

  4. In the Instance section of the Properties Panel (right sidebar), add a Description. We display the Description when you hover over the Component in the Assets and Code Panels.

     

  Tip You will still be able to edit the individual layers and objects within a Master Component.

  Create Multiple Components in Bulk

  By default, when you create a Component, Figma will create a single Component from the selected layers.

  You can now also create Components in bulk. This allows you to select multiple Groups or Frames and create Components out of them.

  You can create multiple Components out of:

  • Objects and Layers contained within Frames
  • Objects and Layers contained within Groups
  • Single Layers, like a path or Vector Network
  • Layers within a Boolean Operation

  Note: If you select multiple layers that aren't within the above configurations, Figma will create a Component for each individual layer.

  1. Select the layers you want to create Components out of. Remember, these can be layers within Frames, Groups, Boolean operations or single vector paths.
  2. Click the arrow next to the Create Component icon in the Menu bar.
  3. Select Create Multiple Components from the options:
  4. Figma will create a Component out of each Frame, Group, Boolean operation or Path you selected.

  

• Create an instance of a Master Component

  Before you start

  Who can use this feature

  Users on any plan can create Instances.

  Users with View access to the original Library file can use the Library Components in files they have Edit access on.

  Users with Edit access can create new Instances in a file containing a Master Component.

  New to Components? Check out our Getting Started with Components and Getting Started with Team Library articles.

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

  The Master Component defines the properties of the Component. The Instance is a copy of the Component you reuse in your designs.

  Learn more about Components in our Getting Started with Components article.

  From a Component in Another file

   The Assets Panel in the left sidebar allows you to search for Components to add to your file(s).

  You can find Components from any Libraries you have access to:

  • Libraries shared within a Team
  • Libraries shared across an Organization
  • Components from any files you are a Viewer or Editor on

  Click on the Assets heading in the Layers Panel. Or, use the Keyboard Shortcut:

  • Mac: Option - 2
  • Windows: Alt + 2

  

  You can then use the Assets tab to:

  1. Search for a Component from any Library you have access to
  2. Switch between Grid and List view
  3. Open the Team Library modal
  4. View Local Components created in the current file
  5. View Components Used in the file
  6. Explore Enabled Libraries

  You can then drag any Component from the Assets panel into the Canvas to create an Instance.

  From a Component in the Current file

  If you're working in the same file, you can also copy a Master Component to create an Instance. There are a few ways to do this.

  Duplicate the Master Component

  Create a duplicate of the Component.

  1. Select the Master Component.
  2. Duplicate it by using the Keyboard Shortcut:
     • Mac: Command - D
     • Windows: Ctrl + D

  Drag to Copy

  Hold down the modifier key when dragging to create a Component Instance.

  1. Select the Master Component.
  2. Hold down the modifier key and drag the Component
     • Mac: Option
     • Windows: Alt
  3. Release the mouse before releasing the modifier key. Otherwise, we will only move the Component.

  Copy and Paste the Master Component

  Make a copy of the Master Component and paste it into the Canvas. We will automatically create a Component Instance when you paste it.

  1. Select the Master Component.
  2. Copy the Component using the keyboard shortcut:
     • Mac: Command - C
     • Windows: Ctrl + C
  3. Paste an Instance of the Component using the keyboard shortcut:
     • Mac: Command - V
     • Windows: Ctrl + V
• Swap between Components in a file

  Before you start

  Who can use this feature

  Users on Education, Professional, and Organization, plans

  Users with Edit access to a file can insert Components into a file.

  New to Components? Check out our Getting Started with Components and Getting Started with Team Library articles.

  When building interfaces, we often switch between different icons. Or, Components that represent different states.

  To speed up the process, you can swap one Instance for another. There are a few ways you replace or swap instances in Figma.

  Swap Related Components

  Switch between Related Components using the Right-click menu.

  1. Right-click on the Instance in the canvas.
  2. Hover over the Swap Instance option.
  3. Select the Instance from the list of Related Components.
     
     

  We determine Related Components by Name and Location.

  • Components using the slash naming structure. e.g. We treat UI/Button/Active, UI/Button/Hover and UI/Button/Inactive as Related Components
  • We treat Components in the same file / page / frame structure as Related Components

  Learn how to name and organize Components.

  Instance Menu

  The Instance menu allows you to find replacements from any of your Component libraries.

  We order Components in the Instance menu based on the file/page and Frame they live in. You can use the menu to find Components nested within files, pages and frames.

  To swap an Instance using the Instance menu:

  1. Select the Instance you want to replace.

  2. In the Properties Panel, click the field in the Instance section: 
     
     

  3. Components are arranged in the Instance menu based on the file, page and frame they live in.

  4. You can use the menu to navigate through Components nested within files, pages and frames.

     • Select a Component from the Related Components section.
     • Use the explorer to select a Component from This file.
     • Find a Component from any of your Enabled Libraries.

     Learn how to Enable and Disable Team Libraries.

  5. Select to swap the current selection with an Instance of that Component: 

     

  Swap Instances from the Assets Panel

  The Assets Panel in the left sidebar allows you to search for Components to add to your file(s). You can find Components from any Libraries you have access to.

  You can drag Components from the Assets Panel into an existing design.

  If you use a modifier key when dragging, you can replace an existing Instance with the one from the Assets Panel.

  1. Open the Assets Panel and find the Component

  2. Hold down the modifier key:

     If the Component is not 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 before releasing the modifier key. Otherwise, we will just add a new Component to the canvas.

  Note: Have overrides applied? Figma only preserves Text overrides. To preserve Text overrides, you will need to change the name of any text layer(s) 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 Overrides in our Override Properties of a Component Instance article.

• 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 Getting Started with Components and Getting 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 Overrides to Restore a Master Component 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:

  

  Note: Looking for how to reset overrides? Try our Reset Overrides to Restore a Master Component article. 

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

  Push Overrides to Master

  If you've made an override you want to apply to other Instances, you can Push Overrides to Master.

  We will then apply any changes you've made to that Instance to the Master Component. This will also affect any other Instances of that Component.

  ✅You can only push Overrides when the Master 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 Overrides to the Master 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 Master from the options: 
     
     

  4. We will update the Master 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 we preserve any Text Overrides, you will need to name the affected Text layers something unique. This ensures that we don'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 overrides to restore a Master Component

  Before you start

  Who can use this feature

  Users on any plan

  Users with Edit access to a file can reset Component Overrides.

  New to Components? Check out our Getting Started with Components and Getting 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.

  You can reset overrides on an Instance to restore the properties of the Master Component.

  View Overrides

  You can view Overrides in the Instance section of the Properties Panel.

  We won't show any layer specific overrides if you select the entire Instance. Make sure you select that specific layer to view Overrides applied to it.

  

  1. Select the layer in the canvas or Layers Panel.

  2. Find the Instance section in the Properties Panel. Click the Reset Instance icon.

  3. We will show a Reset [Property] option for any properties that has overrides applied.

     In the example, both the Text and the Layer Name have been overridden: 
     
     

  Reset All Overrides

  You can reset all Overrides applied to a single layer, a selection of layers, or the entire Instance.

  1. Select the layer(s) or Instance you want to reset.

     Tip! Hold down the modifier key to selected a nested layer:

     • Mac:   Command
     • Windows:   Ctrl

  2. Reset Overrides in one of the following ways:

     1. Right-click on the layer/Instance and select Reset Instance

     2. In the Properties Panel, click the Reset Instance icon and select Reset Overrides

     3. Click the Reset Instance icon in the Toolbar

  

  Note: You can only reset a specific property from the Instance menu in the Properties Panel.

  Reset a Specific Property

  1. Select the Instance in the canvas or Layers Panel.

  2. Find the Instance section in the Properties Panel. Click the Reset Instance icon.

  3. Select which Properties you wish to reset.

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

  4. We will reset the property to match the Master Component.

• Detach Instances from the Master Component

   

  Before you start

  Who can use this feature

  Users on any plan

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

  New to Components? Check out our Getting Started with Components and Getting Started with Team Library articles.

  You can detach an Instance from its Master Component. When you detach an Instance we will:

  • Remove the link to the original Master Component.
  • No longer apply any changes made to the Master Component, to the detached Instance.
  • Make the Instance into a regular Frame with the layers nested inside it.

  This is great if you want to make changes to the Component that aren't supported by Overrides. Or, want to create a new Component from your changes, like a different state.

   There are a few ways to detach an Instance from the Component.

  Note: Figma Organizations can track how often Instances are detached with Design System Analytics. Learn more in our Track Library and Component Usage with Design System Analytics article.

  Instance Menu

  1. Select the Instance you wish to detach.

  2. Click on the Instance menu in the Properties Panel.

  3. Select Detach Instance:

  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 an Instancing using the Keyboard shortcut:

  • MacOS: 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 to maintain a Master Component.

  • If you just created the Component you can undo it right away using
  • macOS: 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 Master Components and their Instances

  Before you start

  Who can use this feature

  Users on any plan can edit Components in the file containing the Master.

  Users with Edit access to a file can edit a Component and Instances

  New to Components? Check out our Getting Started with Components and Getting Started with Team Library articles.

  Instances are linked to the Master Component, so any changes you make to the Master Component will be applied to the Instance.

  Warning! It's not current possible to copy and paste - or move - a Master Component to another file. Doing so will break the link between the Master Component and any Instances.

  Change Components in the current file

  If you are using Instances within the same File as your Master Components, any changes you make to the Master Component will be applied to those Instances immediately.

  1. Locate the Master Component in the file
     • You can use the Go to Master Component link (see below) in the Properties Panel to locate the Component: 
     • Components will be displayed in purple in the Layers Panel: 
  2. Make any changes to the Master Component.
  3. Those changes will be instantly reflected on any related Instances.

  Locate the Master Component

  If you're using Instances within a File, you may need to make tweaks and improvements to the Master Component itself.

  You can use the Go to Master Component link to quickly locate the Master Component. You can use this within a File, or to view a Master Component shared via a Team Library.

  You can find this in the Instance section of the Properties Panel:

  1. Click Go to Master Component. This will take you to the Component's location on the current page. Or, open the File where the Master Component lives.
  2. Make any changes to the Master Component.
  3. You can then use the Return to Instance prompt at the bottom of the screen, to return the original instance you were working with.

  

  Make Changes to Components in a Team Library

  Note: You can only publish and use Components via the Team 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 within the current File. 

  If you want to use Components across Files, then you will need to publish these to your Team Library. This will ensure your Instances across all your Files and Project are updated, when you make any changes to the Master Component.

  How it Works

  1. Open the File where your Master Component(s) live.
  2. Make any changes you'd like to the Master Components.
  3. Publish those changes to the Team Library.
  4. We will notify you when any changes are published to the Team Library.
  5. You can then Review and update any Files that use Instances of those Component.

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

  Note: it isn't possible to Return to Instance when viewing Master Components from a Team Library. This is because Figma will open the Master Component file in a new tab anyway. You can switch between tabs to return to the original instance.