Sign up
Sign up

Library organization

Figma offers several approaches for organizing components in the assets panel through naming conventions of layers, frames, and pages. As discussed in the Prepare for Variants guide, streamlining your design system with variants can simplify some of these conventions and might make others redundant.

Layers - When combining variants, any forward-slash / groups in layer names will be converted into values for variant properties. You can still add additional forward-slash groups after-the-fact if you want to add or restore other levels of hierarchy.

Frames - Frames can be used to group related components. When combining variants, the frame may become redundant so you can either remove it or use it as a larger grouping if you have multiple component sets on the page.

Pages - If you have main components on multiple pages, the page name will also appear in the assets panel. It's possible that all of your components on a page will combine into a single component set (Buttons/Button). While this might feel repetitive, keeping the "Buttons" page will allow for additional button components in the future that may not be part of the Button component set.

Alternatively, there might be opportunities to combine pages into more logical groupings of component sets. If you end up with a page with a single Input component set and another with a single Dropdown, you might consider combining these on to a "Forms" page.

Adding variant descriptions

Each variant component can have its own description, along with a description for the whole component set. The descriptions for both the component set and the specific variation will appear in the inspect panel.

Existing component descriptions will become variant descriptions when combined so you won’t lose anything you’ve already added.