Create and insert component instances
Written by Figma Man
Updated at June 19th, 2025
- Administration – Figma Learn
- Figma Design – Figma Learn
- Get started – Figma Learn
- FigJam – Figma Learn
- Community – Figma Learn
- Help – Figma Learn
- Work across Figma – Figma Learn
- Courses, tutorials, projects – Figma Learn
- Figma Slides – Figma Learn
- Figma Buzz – Figma Learn
- Figma Make – Figma Learn
- Figma Sites – Figma Learn
Table of Contents
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
Tip: You can handoff component instances for development without reorganizing your file by marking instances as ready for dev in Dev Mode →
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:
- Select the Assets tab in the left sidebar, or use the shortcut:
- Mac: ⌥ Option 2
- Windows: Alt 2
- Select a library with the component you'd like to use
- Find the component you want to use
- Click and drag the component onto the canvas to create an instance of that component.
Tip: You can customize the appearance of the Assets tab to match your preferences. Click to switch between a grid or list view, and show or hide sub-folders.
Note: Is the library you need missing from the Assets panel? Click to browse available libraries in your team or organization and add them to your file.
- 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
- Select the Assets tab in the left sidebar, or use the shortcut:
- Mac: ⌥ Option2
- Windows: Alt2
- Find the component and select it to open the component details modal.
- Use the controls to configure your component.
- 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.
- Use the shortcut Shift I to open quick insert.
- Use the search bar to find a specific component.
Tip: Need to locate a main component from one of its instances? Right-click any instance and select Go to main component or use the keyboard shortcut:
- Mac: ^ Control⌥ Option⌘ Commandk
- Windows: ControlAltShiftk
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:
- Hold down ⌥ Option for Mac or Alt for 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
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