How to Create a Component in Figma

If ⌥⌘K does nothing, check that you have edit access and that your keyboard layout matches the one set in Figma. Default shortcuts assume US QWERTY. More on that in Figma shortcuts not working.

Select several layers, open the menu next to the selection name at the top of the right sidebar, and choose Create multiple components. Figma makes one component per frame, group, boolean or path in the selection. Use it when you have a sheet of icons: one action turns 40 icons into 40 components. It works on any plan. Rename the layers before you run it, so the components are easy to find in Assets later.

Figma's help center says you can identify components in the Layers panel by the purple Component icon. Instances are marked in the same colour in current versions of Figma, so a purple layer is almost always a component or an instance of one. If a layer turned purple right after you pressed a shortcut, you probably created a component by accident. Undo right away, or see how to detach an instance for the longer workaround.

• Assets panel: press ⌥2 / Alt+2, find the component and drag it onto the canvas.
• Quick insert: press ⇧I / Shift+I, search by name and place it.

Components from another file show up in Assets only after that file is published as a library and added to your file. If they don't appear, work through Figma library not showing.

In the current UI, the Create component button sits in the right sidebar next to the selection name, and Create multiple components lives in the menu beside it. The ⌥⌘K / Ctrl+Alt+K shortcut still works. Component properties now include five types: Boolean, Text, Instance swap, Variant (component sets only) and Slot, which rolled out from March 2026 (open beta). See Figma slots for the newest one.

Edit the main component and every instance updates. Edit an instance and you create an override that only affects that copy. Some overrides aren't possible on an instance at all: layer order, position, constraints and text layer bounds. Those have to change on the main. To undo your own overrides on an instance, open More actions next to the component name in the right sidebar and choose Reset, then reset one property or all changes.

If you delete a main component, its instances stay. Select one of them and click Restore component in the right sidebar to bring the main back.

States of the same thing, like a button's Default, Hover and Disabled looks, belong together as variants in one component set. Once the set exists, select a variant and press ⌘D / Ctrl+D to add another, then change its property values, such as State=Hover, and edit what differs. The variants guide covers the rest.

If you edited an instance and want the main to match, select the instance and use Push changes to main component. It only works when the main is in the same file, not for library or nested components.

A component nobody can read gets detached. Once it has properties, a spec sheet next to it helps the next designer and the developer: anatomy, spacing and a table of each property with its values. Autospec, our plugin (free to start), generates that frame from the selected component. The full approach is in how to make Figma design specs.

Next steps: add component properties so instances stay flexible, then publish a library to share the component across files.