Before you start

Who can use this feature

Users on any plan

Users with Can edit access to a file can rename layers, including components

New to Components? Check out our Getting started with components and Getting started with team libraries articles.

We recommend defining and documenting a component structure within your team or company.

This will make it easier to find components in the Assets panel. As well as swapping related component instances.

There are many different ways to structure your components. We'll show you how we structure components for the Assets panel and related components.

Assets Panel

The fastest way to access components in a file is via the Assets panel.

To open the Assets panel:

• Click on the Assets tab in the left sidebar.
• Use the keyboard shortcuts:
  • Mac: ⌥ Option  2
  • Windows:: Alt  2

Structure

In the Assets panel, you will have access to the following components:

• Components created in the current file: Components you created in this file.
• Added libraries: Any libraries that are added, or enabled by default.

There will be a heading for each of these sections in the Assets panel. We will list all libraries added to the file, with their file name as the heading. You can collapse the headings to reduce the space they take up. Or expand them to explore the components within those files.

Explore library file

We display components in a path that mirrors the file's structure. The file path will follow this general structure: file > page > frame

Each step in the path will represent a heading in the Assets panel. You can use the arrows to expand the file path and explore the components within each frame.

We display pages in alphabetical order, not the order they are in the original file.

Related components

You can view the selected component in Instance section of the Design tab.

You can use this to switch between related components, without leaving the file.

We determine related components by:

• How you have named the component. For example, we will display UI/Button/Active, UI/Button/Hover and UI/Button/Inactive together.
• How you have arranged the component in the origin file. For example, we treat all components within the same frame as related components.

Examples

Name Components

If you want to add another layer of Organization, you can name your components in a particular way. We recommend you use the slash separated convention. For example, Component/State.

Let's say you have named the components in a frame like this:

• Login/Active
• Login/Hover
• Login/Inactive
• Create/Active
• Create/Hover
• Create/Inactive

Learn how to rename layers in bulk →

Organize components

In this example, we've structured our components based on their location. We've used pages and frames to organize our components into groups.

• In our Figma UI file, we have the components that make up the Figma UI.
• We have created a page for the Left Sidebar. The page will house all our components related to that sidebar.
• The left sidebar consists of two main panels: the Layers panel and the Assets panel. We've created a frame for each of these panels.
• We support two sizes for each icon: 16px and 32px. We add both sets of icons to each respective frame.
• To make it easier to differentiate between the icon sizes, we name the components. In the Layers panel we use the slash convention to name each Component For example, 16 / Team Library or 32 / Team Library.

We've created a dialog window - in another file - that needs a close icon. We've already created one of these for the Assets panel, so we can use that one again.

We need the 32px version of that component. To find it in the Assets Panel we go to: Figma UI / Left Sidebar / Assets Panel / 32

We can then drag that component from the Assets panel into the file.