Naming and Organizing Components

We recommend defining and documenting a Component structure within your Team or company. This makes it easier to:

  • Find Components in the Assets panel.
  • Swap between Related Components.
  • Increase adoption of your Team Library within your company.

In this article, we'll cover:

  1. Component Approaches
  2. Naming Components
  3. Organizing Components

Component Approaches

There are a two main ways to structure your Components in Figma:

  1. Naming Components You can use a naming convention to group your Components e.g. Button/Login/Active; Button-Signup-Hover or Button.Learn.Active
  2. Organizing Components in Frames You can establish a rigorous Component structure by organizing your Components into Files, Pages and Frames. This removes the reliance on accurate naming.

There are pros and cons to each approach:

  • The "/" naming structure allows you to easily switch between related Components. If you have a number of related Components, like an icon library, this can make swapping between Components trickier.
  • The Frame structure allows you to group Components into smaller collections. This makes navigating between Components in the Assets panel easier.

To create a truly flexible and robust Component structure, we recommend using a combination of both approaches:

Learn more about structuring Components in our guide: Best practices: components, styles, and shared libraries.

Naming Components

There are a few different naming conventions you can use:

  • Slash separated Convention: Category/Component/State (Recommended)
  • Dot separated Convention: Category.Component.State
  • Dash separated Convention: Category-Component-State

Note: When using the "/" naming convention, you will be able to swap between Related Components in the Instance menu.

Figma will also export Components to folders based on their "/" naming structure.

File Names:

  • Button/Login/Active
  • Button/Login/Hover
  • Button/Login/Inactive
  • Button/Create/Active
  • Button/Create/Hover
  • Button/Create/Inactive
Exported File Structure:
  • Button
    • Login
      • Active
      • Hover
      • Inactive
    • Create
      • Active
      • Hover
      • Inactive

Organizing Components

We will group Components in the Assets Panel, based on their File, Page and Frame structure.

The Assets Panel is the best way to view your Components in one place. You can drag Components from the Assets Panel, onto the canvas.

You can access the  Assets Panel from the Left Sidebar, or by using the Keyboard Shortcuts:

  • MacOS: [Option] + [2]
  • Windows: [Alt] + [2]

We display Components in the Assets Panel, in the following order:

  1. Components you create in the current File.
  2. Components that are Private to the File. This includes any Components in this File that aren't published to a Team Library.
  3. Components from other Files that you have used in the current File.
  4. Components from any enabled Team Libraries.

Components Created in the Current File

You can see any Components that you created in the current File, in this section.

  • We group Components by Page.
  • Pages will appear in the Assets Panel in same order as they do in the Page list.
  • Components within a Page are then grouped by Frame. You can click on the Frame's name to view the Components in that Frame:
  • Components that aren't contained within Frames are displayed under the Page name.

Components Used in this File

In this section you can see any Components that you  Used in this File. These are Components from:

  • Your Other Files.
  • Other Files you have access to.
  • Another Team Library.

Enabled Team Libraries

If you are part of a Professional Team, you will also be able to view Components from any Enabled Libraries.

This will include any personal or Team Libraries that you have enabled via the Library modal. You can enable Libraries for an entire Team, or on individual Files. Learn more about enable Team Libraries in our Using the Team Library article.

Tip! You can also use the Search field at the top of the Panel to find Components in this File, or in your Team Libraries. Results are currently limited to the top 8 matches: 

Warning: It's not current possible to copy and paste - or move - a Master Component to another file. Doing so will break the link between the Master Component and any Instances.

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