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.
Tip! As you create components and build out your design system, you'll find the need for components that are similar to each other, with only slight differences.
Variants allow you to group and organize similar components into a single container. This simplifies your component library and makes it easier for everyone to find what they need.
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 right sidebar, add a Description and Documentation link for collaborators. Collaborators and developers can view this information in the Inspect panel.
Tip! Figma will create a custom button if you add a link from any of the following domains:
- Dropbox Paper
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.