Components

Components are reusable UI elements that ensure consistency and allow quick updates across design projects. They 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:

• Shown in purple in the Layers panel.
• Identified by a quadruple diamond icon in the Layers panel.

Instances:

• 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 are changes made to an instance (e.g., color or text) that do not affect the master component.
• To reset overrides: Right-click an instance → Reset all changes.
• To apply an instance's changes to the master: Use the Push changes to main component option 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.
• 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 usually saved locally by default.

• To share them: Right-click on a master component → Publish selected components.
• Move the component to a team project to give access to others.