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.
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
- Click on the Assets tab in the left sidebar, or use the keyboard shortcut:
- Mac: ⌥ Option - 2
- Windows: Alt + 2
Click on a Component and drag it into the canvas to create an Instance.
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