Creating Components

You can create a Component out of any collection of objects or layers. This could be something as simple as a button or a field, or a more complex design like a menu.

In this article, we'll cover:

  1. Creating a Single Component
  2. Creating Components in Bulk

Creating a Single Component

You can create a single Component out of selection of layers.

  1. Select the layers you’d like to be included in the Master Component:

  2. There are then a couple of different ways you can create a Component:
    1. In the Options menu, click the Create Component button:

    2. Right-click on the selected layers - in the canvas or in the Layers Panel - and choose Create Component from the options:

    3. Use the Keyboard shortcuts:
      1. Mac: Option
      2. Windows: CtrlK

  3. The selected layers will then be nested within a new Component layer, which will show up as purple in the layers panel:

  4. Now that the Component has been created, you can add a Description in the Instance section of the Properties Panel. 
  5. The Description will be displayed when you hover over the Component in the Assets Tab, as well as in the Code Panel: 

Tip! You will still be able to edit the individual layers and objects within a Master Component.

Creating Components in Bulk

By default, when you create a Component, Figma will create a single Component from the selected layers.

You can now also create Components in bulk. This allows you to select multiple Groups or Frames and create Components out of them.

You can create multiple Components out of:

  • Objects and Layers contained within Frames
  • Objects and Layers contained within Groups
  • Single Layers, like a path or Vector Network
  • Layers within a Boolean Operation

Note: If you select multiple layers that aren't within the above configurations, Figma will create a Component of each individual layer.

  1. Select the layers you want to create Components out of. Remember, these can be layers within Frames, Groups, Boolean operations or single vector paths.
  2. Click the arrow next to the Create Component icon in the Menu bar.
  3. Select Create Multiple Components from the options:
  4. Figma will create a Component out of each Frame, Group, Boolean operation or Path you selected.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.