Create components to reuse in designs

You can create a component out of any collection of objects or layers. Components can be as simple as shapes, buttons or fields, or more complex design like cards and menus.

Create a component

You can create a single component out of selection of layers. Or, create individual components in bulk from a selection of objects.

Create a single component

There are a few ways to create a component. First, you'll need to select the layers you'd like to include in the component. 

1. Select the layers you’d like to be included in the component.
2. You then have a few different methods for create a component:
   
   • Click the next to the selection's name in the properties panel > Create component.
   • Right-click on your selection and choose Create component.
   • Use the keyboard shortcuts:
     • Mac: ⌥ Option - ⌘ Command - K
     • Windows: Ctrl + Alt + K
3. Figma will nest the layers within a special component frame. Identify components in the Layers panel using the purple icon.
4. In the right sidebar, click Component configuration next to the component name to add a Description and Documentation link for collaborators. Collaborators and developers can view descriptions and documentation in various places.

Create components in bulk

By default, the Create component action will create a single component from your selection.

You can also create components in bulk. This allows you to select multiple groups or frames and create components out of them. Create multiple components from:

• Objects and layers in frames
• Objects and layers in groups
• Single layers, like a path or vector network
• Layers in a boolean operation

1. Select the layers you want to create components from,
2. Click next to the selection's name in the properties panel.
3. Select Create Multiple components from the options.
4. Figma will create a component for each frame, group, boolean operation, or path.

Delete a component

You can delete a component at any time.

Deleting a main component does not remove instances of that component from your files.

1. Select the component you want to delete.
2. Press delete.

Restore a component

If you have an existing instance of a deleted component, you can use that instance to restore the component.

Learn more about instances →

There are a few ways to restore a component from an instance:

From the right sidebar

1. Select an existing instance of the deleted component.
2. Do one of the following to restore the component:
   • If you are in the library file that contained the main component, click the Restore Component button from the properties panel in the right sidebar.
   • If you are in a file that did not contain the main component, click the Go to main component in library icon. Then click the Restore button in the dialog window.

From the right-click menu

1. Right-click on the instance in the canvas.
2. Do one of the following to restore the component:
   • If you are in the library file that contained the main component, hover over the Main component option and click Restore main component.
   • If you are in a file that did not contain the main component, click Go to main component. Then click the Restore button in the dialog window.