Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Components | Creating Visuals
UI/UX with Figma
course content

Course Content

UI/UX with Figma

UI/UX with Figma

1. Figma Basic Tools
2. Creating and Organizing Objects
3. Creating Visuals
4. Prototyping
5. Submitting Work

book
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?

What color represents master components in the Layers panel?

What color represents master components in the Layers panel?

Select the correct answer

What is the purpose of overriding an instance?

What is the purpose of overriding an instance?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 3. Chapter 6
We're sorry to hear that something went wrong. What happened?
some-alt