Figma Components: Building Reusable Design Systems Efficiently

Reusable UI elements that ensure consistency and allow quick updates across design projects. Components can be created from layers, groups, or frames.

To create a component

Select a frame or element, right-click, and choose Create Component or use the shortcut Ctrl + Alt + K (Windows) or Cmd + Option + K (Mac).

Master components

Master components are shown in purple in the Layers panel and identified by a quadruple diamond icon.

Instances

Instances are duplicates of the master component, identified by a single diamond icon. To create an instance, drag from the Assets panel, duplicate the master (Ctrl/Cmd + D), or copy and paste it.

Changes and overrides

Changes to the master component automatically update all its instances. Overrides, such as changes to color or text, only affect the instance. To reset overrides, right-click an instance and select Reset all changes. To apply an instance's changes to the master, use Push changes to main component in the Design panel.

Detach an instance

To detach an instance from its master and make it standalone, right-click and select Detach instance, go to the Design panel and select Detach instance, or use the shortcut Ctrl + Alt + B (Windows) or Cmd + Option + B (Mac).

Restore a deleted master component

Select an instance, go to the Design panel, and click Restore component.

Sharing components

Components are saved locally by default. To share them, right-click on a master component and select Publish selected components, or move the component to a team project for others to access.