We recommend defining and documenting a component structure within your team or company.
Tip! Not sure where to start with building a Component Library? Our Best practices: components, styles, and shared libraries article has some great tips.
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
In the Assets panel, you will have access to the following components:
Local components: Components you created in this file.
- Private to this file: Components you created in this file, but didn't publish to the team library.
- 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 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.
Tip: If you use a slash-separated naming convention, we will group those components together in the Instance menu. For example,
file / page / frame /**name**/
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
- How you have arranged the component in the origin file. For example, we treat all components within the same frame as related 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:
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.
Note: For this approach, you will need to have the library enabled in the Assets panel. Learn more about enabling default libraries.