Why use components?
Creating Components in Figma
Nested Components
Tips on Using Components
Helpful Links

Why Use Components?

First, what are components?

Components are UI elements that can be reused. Think of them like templates. A component can be a button, an icon, a data table, etc. Whenever you change the main component, all the other components created from it will automatically update. This will speed up all your design work, make your design system more consistent, and make it much easier to maintain.

Why use components?

Using components will save a lot of time during your design process
Components will keep your design consistent and clean

When designing Components, our goal was to make them:

easy to learn for anyone to get started

powerful enough for advanced users

flexible enough to work throughout the design process

Figma

You're also able to import components into Figma. You'd do this by opening the page, selecting the specific files, and simply drag and drop into your Figma page. Super easy!

Creating Components

To create a component, you can right-click on the element and click on Create component to create the master component. Alternatively, you can hit Ctrl+Alt+K (for Linux). At this point you will see the master component symbol (shown in the image below) on the respective element.

From here, when you create a copy of the master component, you will be creating what are called instances of the master component. When you do this you will see an instance symbol (shown in the image below) on those elements.

There will come to a point when you've created multiple instances and need to find your master component again. You can quickly do this by right-clicking any of your instance components, and click on Go to main component. The master component will appear in the sidebar on the left-hand side.

If you accidentally delete your master component, don't worry! You can restore it from any of your instances from the right-hand panel. There is a Restore Master Component option that will make your master component appear immediately.

Nested Components

A component can exist inside another component, or nested inside another component. In order to do that, you are able to put an instance of a component into another master component. See the below image for reference.

Tips on Using Components

Use clear naming conventions
- Forward slash naming
Use frame containers
Use multiple libraries
Use component shortcuts and swap components
Set up constraints and layout grids for predictable behaviors
Use clip content to reduce repetitive instances
Use the quick insert menu
Add component documentation
Use slot components
Detach an instance to remove relationship from master components

Helpful Links

Happy coding!

Figma: Components

Table of Contents