Course Content
UI/UX with Figma
UI/UX with Figma
Components
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.
1. What color represents master components in the Layers panel?
2. What is the purpose of overriding an instance?
Thanks for your feedback!