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 the asset tab of the actions menu
• 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. Select a library with the component you'd like to use
3. Find the component you want to use
4. 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 from the actions menu

Insert instances of components from your keyboard using quick insert. Quick insert opens the Actions menu where you can find and view components from libraries that have been added to the file.

1. Use the shortcut Shift I to open quick insert.
2. Use the search bar to find a specific component.

Copy or duplicate an instance on the canvas

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