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.

  

• Name and organize Components

  Before you start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can rename layers, including Components.

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

  We recommend defining and documenting a Component structure within your Team or company.

  This will make it easier to find Components in the Assets panel. As well as Swap between Related Components.

  There are many different ways to structure your Components. We'll show you how we structure Components for the Assets Panel and Related Components.

  Tip! Not sure where to start with building a Component Library? Our Best practices: components, styles, and shared libraries article has some great tips.

  Assets Panel

  The fastest way to access Components in a File is via the Assets Panel.

  To open the  Assets Panel:

  • Click on the Assets heading in the Layers Panel.
  • Or, use the Keyboard Shortcuts:
    • Mac: Option - 2
    • Windows:: Alt + 2

  Structure

  In the Assets Panel, you will have access to the following Components:

  • Local Components:Components that you created in this File.
    • Private to this File: Components that you created in this File, but didn't publish to the Team Library.
  • Used in this File: Components from other Libraries that you have already used in this File.
  • Enabled Libraries: Any default Libraries that anyone has enabled in a Team or Organization.

  There will be a heading for each of these sections in the Assets Panel. We will list all enabled Libraries, with their File name as the heading. You can collapse the headings to reduce the space they take up. Or expand them to explore the Components within those Files.

  

  Explore Library Files

  We display Components in a path that mirrors the file's structure. The file path will follow this general structure: File/Page/Frame/

  Each step in the path will represent a heading in the Assets Panel. You can use the arrows to expand the file path and explore the Components within each frame.

  We display Pages in alphabetical order, not the order they are in the original file.

  

  Tip! If you use a slash-separated naming convention, we will group those Components together. e.g. File / Page / Frame /**Name**/

  Related Components

  You can view the selected Component in Instance section in the Properties Panel.

  You can use this to switch between related Components, without leaving the file.

  We determine Related Components by:

  • How you have named the Component. e.g. We will display UI/Button/Active, UI/Button/Hover and UI/Button/Inactive together.
  • How you have arranged the Component in the origin file. e.g. We treat all Components within the same frame as Related Components.

  Examples

  Name Components

  If you want to add another layer of Organization, you can name your Components in a particular way. We recommend you use the slash separated convention e.g. Component/State.

  Let's say you have named the Components in a frame like this:

  • Login/Active
  • Login/Hover
  • Login/Inactive
  • Create/Active
  • Create/Hover
  • Create/Inactive

  Tip! Need to update your Component names in bulk? Check out our Rename Layers in Bulk article.

  Organize our Components

  In this example, we've structured our Components based on their location. We've used Pages and Frames to organize our Components into groups.

  • In our Figma UI file, we have the Components that make up the Figma UI.
  • We have created a Page for the Left Sidebar. The will house all our Components related to that sidebar.
  • The left sidebar consists of two main panels: the Layers Panel and the Assets Panel. We've created a frame for each of these panels.
  • We support two sizes for each icon: 16px and 32px. We add both sets of icons to each respective frame.
  • To make it easier to differentiate between the icon sizes, we name the Components. In the Layers Panel we use the slash convention to name each Component e.g. 16 / Team Library or 32 / Team Library.

  

  We've created a dialog window - in another file - that needs a close icon. We've already created one of these for the Assets Panel, so we can use that one again.

  We need the 32px version of that Component. To find it in the Assets Panel we go to: Figma UI / Left Sidebar / Assets Panel / 32

  We can then drag that Component from the Assets Panel into the file.

  

  Note: For this approach, you will need to have the Library enabled in the Assets Panel. Learn more about enabling default libraries in our Enable and Disable Libraries article.

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