Components are UI elements that can be reused across your designs. They help you to create and manage consistent designs across projects.
How does it work?
The Master Component is created first and defines the style.
You can then create Instances, which are occurrences of the Master Component.
When you update the Master Component, all Instances of that Component will also be updated.
In this article, we will cover how to:
- Create a Component.
- Create an Instance.
- Swap an Instance.
- Override an Instance.
- Detach an Instance.
- Share Components.
1 | Create a Component
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.
First, select the layers you’d like to be included in the Master Component.
There are a couple of different ways you can create a Component:
- In the Options menu, click the Create Component button:
- Right-click on one of the selected layers and choose Create Component from the options:
- Use the Keyboard shortcut: [⌥ ]+ [⌘]+ [K] (Mac) or [Ctrl] + [K] (Windows)
The selected layers will then be nested within a new Component layer, which will show up as purple in the layers panel.
Tip! You will still be able to edit the individual layers and objects within a Master Component.
A File can contain any number of Components. You can access a list of all of the Components, within a given file, at any time.
In the Layers panel, head to the Components tab. You can quickly open the Components tab using the Keyboard Shortcuts: [⌥] + (Mac) or [Ctrl] +  (Windows)
2 | Create an Instance
When you want to reuse a Component elsewhere in your design, you can create an Instance of that Component.
As the Instance is still linked to the Component, any changes you make to the Master Component will be reflected across all Instances in your design. For example: updating the color of a button Component from blue to green would update all button Instances across your website design.
If we make a change to a single Instance, only that Instance will be updated and the Master Component will retain its original properties. Find out more what properties you can and can't update in our Override Components section below.
To create an Instance, you can do any of the following:
- Duplicate the Master Component by using the keyboard shortcut [⌘] + [D]
- Hold down the [⌥] (Alt/Option) key and drag the Component to create a copy.
- Select the Component and copy and paste it to the canvas:[⌘] + [C] and [⌘] + [V] Mac [Ctrl] + [C] and [Ctrl] + [V] Windows
- Click and drag to select Components from the tab and place them on the canvas. If you're on a Professional Figma Team, you can also select Components from your shared Team Library.
You can also perform any of the first three actions on an Instance, which will create another Instance of the Master Component.
Tip! If you have overridden something on a specific Instance, then make a copy of that Instance, any Overrides will also be copied to the new Instance.
Identify the Master Component
You can identify Master Components in the Layers Panel by the quadruple diamond icon. Instances on the other hand, have a single diamond icon:
If you're wanting to make changes to the Master Component, you can quickly locate the original Component from any of its Instances:
- Select an Instance in the canvas.
- In the Properties Panel, find the Instance section.
- Click the Go to Master Component link:
Or, right-click on an Instance and select Go to Master Component from the options:
You'll be taken to the section of the canvas that the Component is added to, and the Component will be selected.
3 | Swapping Instances
While you're designing, you may wish to replace, or swap, an Instance for another. For example: when switching between the designs for the hover or active state of a button.
Once an Instance is selected, you can use the Instance menu in the Properties Panel to quickly switch between Related Components.
1.Select the Instance you want to replace.
2. In the Properties Panel, click on the drop down field in the Instance section. There will be some suggested in the Related Components section of the Properties Panel. These are based around the names of the Components:
3. Or, you can use the menu below to select another Instance from the file, or from a shared Team Library in the This file section.
4. Select the Component from the list to swap.
To make swapping between Components easier, you can organize your Components into groups by naming them in a slash-separated naming convention.
For example: Button/Login, Button/Cart and Button/Plan:
Then when it comes to swapping Instances, your Components will be broken down into easy-to-navigate groups, with each slash representing a new menu level.
In the example above, this would be found by visiting This file > (Page) > Components > Button > Plan.
UPDATE: Previously, Related Components were identified based on the size of the selected Component or Instance. Now, Related Components will be determined by the Component's name. If all of our Buttons are named Button/Name, then any other objects included in that naming group will be displayed in the Related Components section.
Learn more about renaming layers in our Rename Layers in Bulk article.
4 | Override Components
When we change an Instance, it is called an Override. These are particularly useful when you want to create a variation on a component. For example: a "Sign Up" vs "Login" button.
You can change any of the following properties, to Override an Instance:
- Text: Font, Weight, Size, Line Height, Letter Spacing, Paragraph Spacing, Indentation.
- Color: Fill, Stroke, Background Color, Opacity.
- Effects: Drop Shadow, Inner Shadow, Blur.
It's not possible to override any properties that affect the layout of layers within a Component. This includes making changes to the Size, Position (including Point and Bezier positions) and Rotation, as well as the Layer Hierarchy and any Constraints applied.
Note: We recommend renaming the overridden Component to something different than the original component or instance name; this ensures the override remains in place, when switching between instances.
Reset an Instance
You can reset an overridden Instance to return it to the original style. This can be done in a couple of places:
- From the Options menu, select the Reset instance icon:
- From the Instance menu in the Properties Panel, select Reset Instance - this will allow you to reset specific properties individually:
Tip! If you need to undo any changes, immediately after they are applied, you can use the Keyboard Shortcut [⌘]+[Z] (Mac) or [Ctrl]+[Z] (Windows).
5 | Detach an Instance
It’s also possible to detach an Instance from its Master Component. Once detached, the objects will be nested within a regular Frame and will no longer be affected by any changes made to the Master Component.
There are a number of ways to detach an Instance from the Component. While the object is selected:
- From the Instance menu in the Properties panel, select Detach Instance:
- Right-click on the Instance, on the canvas or in the Layers Panel (Left), and select Detach instance from the options:
- Use the Keyboard shortcut: ⌥+⌘+ B (Mac) or [Ctrl] + B (Windows)
Tip! If you have accidentally created a Component and want to turn this back into an Instance, you can:
- Create an Instance of that Component.
- Detach the instance from the Component.
- Delete the Original Component.
This allows you to keep the object(s) you created, as an Instance, without having to keep the Component you accidentally created.
6 | Share Components
Updating a Component will only work within a single file, so if you want to use Components within multiple files - and have them update as changes are made to the master Component - then you will need to publish these to your Team Library.
When a change to a Component is published to the Team Library, there will be a prompt to update the Team Library in any files using Instances of the Component.
Publishing Components to a Team Library is only available on our paid Professional plan. Learn more about Figma's Professional plans on our pricing page: https://www.figma.com/pricing/
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.