Before you start
Who can use this feature
Users on any plan can create Components. Users on a Starter team can't publish Components to a Library.
Users with can edit access to a file can create and edit components.
Users with can view access to a file can use components from a library, if they have access to it.
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.
- Select the layers you’d like to be included in the component.
- You then have a few different methods for create a component:
- Click Create component in the toolbar.
- Right-click on your selection and choose Create component.
- Use the keyboard shortcuts:
- Mac: ⌥ Option - ⌘ Command - K
- Windows: Ctrl + Alt + K
- Figma will nest the layers within a special component frame. Identify components in the Layers panel using the purple icon.
- In the Instance section of the right sidebar, add a Description.
- Figma displays the Description when you hover over the component in the Assets and Inspect panels.
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
Note: If you select more than one layer that isn't on one of the above configurations, Figma will create a component for each individual layer.
- Select the layers you want to create components from,
- Click the next to Create component in the toolbar.
- Select Create Multiple components from the options.
- Figma will create a component for each frame, group, boolean operation, or path.