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.
There are a few ways to create instances. Which method you can use depends on whether the components are published or local to the file.
The Assets panel in the left sidebar allows you to search for components to add to your file. You can choose which libraries are available in the Assets panel.
- Manage libraries for your drafts
- Manage libraries in design files
- Manage libraries in teams
- Manage default organization libraries
To open the Assets panel:
- Select the Assets tab in the left sidebar, or use the shortcut:
- Mac: ⌥ Option 2
- Windows: Alt + 2
- Find the component you want to use:
- View Local components created in the current file.
- Explore components from enabled libraries. Open the Library modal to manage available libraries.
- View private local components and any components Used in the file.
- Use the and to switch between grid and list view.
- Use the search field to find components from any library you have access to. This includes team or organization libraries and files you have at least can view access to
- Click and drag the component into the canvas to create an instance of that component.
Insert instances of components from your keyboard using quick insert. Quick insert opens a Components modal where you can find and view components from enabled libraries.
The Components modal mirrors what you'd see in the Assets panel. Explore components from libraries you have access to:
- Recently used components across all your files
- Local components in the current file, organized by page
- Select an enabled library to search components in that library
You can keep the modal open while you interact with layers in the canvas or explore layers in the Layers panel.
- Use the keyboard shortcut Shift I to open quick insert. This mirrors what you'd see in the Assets panel.
- Use the search field to find a specific component. Use your mouse or arrow keys to navigate to the relevant component.
- Use the and icons to switch between grid and list view.
- Select from Recent components used across your files, or select from an enabled library. If a library isn't showing up here, you'll need to enable the library first. Manage libraries in design files →
- To swap: Select or hover over the instance, then hold down ⌥ Option (Mac) or Ctrl (Windows). Swap components and instances →
- Press Enter to insert or replace the component.
- Click or press Shift I to close quick insert menu.
Tip! You can keep the quick insert modal open and move it around within the file, allowing you to quickly assess components when editing files. It's not possible to minimize the modal.
Copy or duplicate
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 using the keyboard shortcut
- Mac: ⌘ Command D
- Windows: Ctrl + D
Drag to copy
Hold down ⌥ Option (Mac) or Alt (Windows) 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.
Copy and paste
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