Components

Jul 21 2021- POSTED BY projecth 0 Comment

Naming

Be intentional and consistent when naming components. Use names that match the terms used in your design system, terminology that is used through the product you work on, or the actual element names found in code or external systems like Google’s Material Design or Apple’s Human Interface Guidelines. For components that will not be exported, I like to use title case and spaces. This is a stylistic preference. For exportable assets, I use a dashes between words to prep their file names (more on naming conventions for images later).

Note: A limitation of variants is you cannot rename their layers because their state is derived from the layer name. So, you can’t set up “image-arrow-left-hover”; that has to be named when exporting.

Nesting

Whenever possible, show relationships between components using nesting. Use slashes in component names to group related components together in the Assets panel (and whenever you swap components). For example, the image states are grouped together because they have “Image/” in their name.

Grouping

Another way to group components is by putting them in the same frame. Here you can see how card image states are grouped together on a “Card image” frame, and card text states are together on a “Card text” frame. This groups them in the Asset view accordingly. To further document them, you can add a text label above each one.

Component sets & variants

Variants is a new way of simplifying component variations in Figma. Variants live in Component Sets, which are identified by a dotted purple box. Be sure to label each one to describe its function. Documenting variants on the Master Components page is especially important because only the default state of a Component Set is shown in the Asset view. While this keeps the file tidy, it risks hiding all the variations from developers.

✨ Project Check-in:

In the project file, organize components by giving them intentional names, groups, and descriptions.

With a Master Component selected, look to the right sidebar to find fields for a Description and Documentation link. Add description for the component, and link to any relevant external documentation. Developers will be able to view this information in the Inspect panel.

✨ Project Check-in:

In the project file, add a description for every master component.

Design Systems

Note that with a Figma Team Library, you can set global reusable components and styles for use across Figma files in your Team’s account. This is perfect for design systems. Adobe XD has similar functionality: Creative Cloud Libraries.

✨ Exercise: Components

Task summary:
  • Organize components by giving them intentional names, groups, and descriptions.
  • Add a description for every master component.