Components, and Tokens, and Libraries oh my!

How often do you copy and paste the same groups and frames when designing? What do you do when you need to update a color that you use a lot?

The answers to these questions can be very time consuming. This article is meant to be a very quick overview of ways to help make your designing more efficient and help you to focus on the parts that actually matter: the designs.

Components

In Figma, a component is kind of like a stencil that updates everything that you traced using it whenever you update the stencil itself. Using components helps you to edit your design item (profile card, text field, popups) once and everywhere else in your designs is updated immediately.

You will see two different icons when working with components: The master component (stencil) icon, and an instance icon.

The “master component” icon, what I refer to as the stencil

The instance icon

The master component is the stencil that all of the instances tie back to. When you update the master, the instances immediately are updated!

When I drag the plus to a new location, the instance is updated at the same moment (Left: Master Component, Right: Instance)

Creating a Component

When you want to create a reusable bit of design, all you need to do is right click a frame and click “Create Component”, or use the shortcut CMD+Opt+K

Right click menu in Figma with creating a component highlighted

Using Components

Using a component is as simple as opening the assets sidebar or using the keyboard shortcut Shift+I.

Sidebar

In the left column, there are two tabs at the top: Layers and Assets.

Assets is the important part here: It shows all of the components within your current file (or library, but we’ll get to that in a later article).

The assets tab of the left sidebar

To use a component: Simply drag it from the sidebar into your main work area and voila!

Tokens

In Figma, a token is like a component, but for things other than frames. Tokens in Figma can be colors, text styles, and effects.

Colors

By standardizing your colors in Figma, you can grab a named color from the assets panel that is updated across your project whenever its changed. This is super helpful when you’ve realized that your green success color is not accessible and needs to be made darker (yes, it has happened to me and its a pain)

Creating a color token

Start by clicking the four dots in the fill section. Stroke also works, but we’ll focus on fills for this tutorial. Once that menu is open, click the plus in the top right of the popup to make a new style.

The color that we are turning into a token

The color styles popup may be empty when you first open it. Click the plus in the top right to make a new style

Name your style, I chose Purple since its a demo

Now that the style is created, we can see the named token and the other options are removed in the color panel

Using a color token

Using a created token is as easy as One-Two (no three!)

Click the four dot menu, then click the style that you want to use

Tap the token that you want to use and voila! You’re now using your linked color

Text Styles & Effects

Stay tuned for a followup article with details on text styles and effect styles. They’re very similar to colors, so you may even be able to figure them out yourselves!