Name and Organize Components

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 swap between Related Components.

There are many different ways to structure your Components. To help you find the best solution, we'll show you the way we structure Components for:

Not sure where to start with building a Component Library? Our Best practices: components, styles, and shared libraries article has some great tips.


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 heading in the Layers Panel.
  • Or, use the Keyboard Shortcuts:
    • macOS: Option-2
    • Windows: [Alt] + [2]

Structure

In the Assets Panel, you will have access to the following Components:

  • Local Components:Components that you created in this File.
    • Private to this File: Components that you created in this File, but didn't publish to the Team Library.
  • Used in this File: Components from other Libraries that you have already used in this File.
  • Enabled Libraries: Any default Libraries that anyone has enabled in a Team or Organization.

There will be a heading for each of these sections in the Assets Panel. We will list all enabled Libraries, 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 Files

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. 

Tip! If you use a slash-separated naming convention, we will group those Components together.

e.g. File / Page / Frame /**Name**/

Related Components

You can view the selected Component in Instance section in the Properties Panel.

You can use this to switch between related Components, without leaving the File.

We determine Related Components by:

  • How you have named the Component. e.g. We will display UI/Button/Active, UI/Button/Hover and UI/Button/Inactive together*.*
  • How you have arranged the Component in the origin File. e.g. 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 e.g. 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

Need to update your Component names in bulk? Check out our Rename Layers in Bulk article.

Organize our 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.
  • In the Editor, the Figma is made up of the Toolbar, the Left Sidebar and the Right Sidebar.
  • We have created a Page for the Left Sidebar. The 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 e.g. 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.

Note: For this approach, you will need to have the Library enabled in the Assets Panel. Learn more about enabling default libraries in our Enable and Disable Libraries article.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.