Figma: Components

Table of Contents

1. Why use components?
2. Creating Components in Figma
3. Nested Components
4. Tips on Using Components
5. 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?

1. Using components will save a lot of time during your design process
2. 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

• How to create an Auto-Layout powered Component in Figma
• An Introduction to Figma Interactive Components
• Guide to Figma Components

Happy coding!