Create and insert component instances

Who can use this feature

Available on all plans

Anyone with can edit access to a file in a paid team has access to the component playground

Anyone with can view access to the file can use components from that library

New to components? Guide to style and component libraries →

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 and insert component instances into your designs:

• From the assets panel in the left sidebar
• From the component details modal, accessible from the assets panel
• Using quick insert
• By copying or duplicating an instance

Assets panel

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.

To open the Assets panel:

1. Select the Assets tab in the left sidebar, or use the shortcut:
   • Mac: ⌥ Option 2
   • Windows: Alt 2
2. Find the component you want to use:
   • View Local components created in the current file
   • Explore components from enabled libraries and open the Library modal to manage available libraries
   • Use the and to switch between grid and list view
   • Use the search field to find components from any library you have access to, including team or organization libraries and files you have at least can view access to
   • Hover over a component to view the number of variants available, if any
   • Click a component to open the component’s details modal
3. Click and drag the component onto the canvas to create an instance of that component.

• Manage libraries for your drafts
• Manage libraries in design files
• Manage libraries in teams
• Manage default organization libraries

Component details modal

The component details modal shows you:

• The component’s documentation
• The library it lives in
• A preview of the component’s default state

If you have can edit access to a library in a paid team, you’ll have additional access to a component playground. 

From the component playground, you can:

• Preview the component’s variants
• View and set component properties
• View and set nested component properties, if nested instances are exposed
• View and change variable modes for any variables applied to the component
• Insert the component onto the canvas

1. Select the Assets tab in the left sidebar, or use the shortcut:
   • Mac: ⌥ Option2
   • Windows: Alt2
2. Find the component and select it to open the component details modal.
3. Use the controls to configure your component.
4. To insert the instance, click Insert instance or drag the preview onto the canvas.

Quick insert

Insert instances of components from your keyboard using quick insert. Quick insert opens the Resources modal where you can find and view components from enabled libraries.

The components found in the Resources modal mirror what you see in the Assets panel. 

1. Use the shortcut Shift I to open quick insert.
2. To locate a component, do one of the following: 
   • Use the search bar to find a specific component or use the 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 is not displaying, you may need to enable the library first. Manage libraries in design files →
3. To swap: Select or hover over the instance, then hold down ⌥ Option for Mac or Ctrl for Windows. Swap components and instances →

Copy or duplicate

Duplicate using the keyboard shortcut

If you're working in the same file, you can duplicate a component to create an instance. Duplicate using the keyboard shortcut:

• Mac: ⌘ Command D
• Windows: Ctrl D

Drag to copy

You can also drag to copy a component within the same file:

1. Hold down ⌥ Option for Mac or Alt for Windows and drag to create an instance.
2. Release the click before you release the modifier key. Otherwise, Figma will move the original component instead of duplicate it.

Copy and paste

You can copy and paste any component within the same file to create an instance.

Component instances and published main components can be copied and pasted across files.

• Mac: ⌘ CommandC and ⌘ CommandV
• Windows: CtrlC and CtrlV