Figma component design

The product design team at Arc XP use Figma to power our desings. This guide walks through how we keep our Figma component library manageable.

Figma components are visual representation of our React components. When building React components for the Arc Design System, great thought goes into how variants are named. We want to provide our engineers with an easy-to-use system, and part of that is building a naming system of variants that is easy to understand and recall. The design team has a similar approach to the Arc Design System’s Figma components. This guide details how each design component within Figma should have its variant properties arranged. By following this guide, designers can enjoy a robust and consistent set of Figma components.

#Guidelines Figma components should follow

Use Auto Layout where applicable, with all layout constraints and resizing options configured.
Use the appropriate tokens from the design system.
If a component has two or more states, use Variants.
Have a standardized set of variant properties across components

#Standardized variant properties

The highlighted area is a Figma component’s variants. By ordering these consistently, designers know exactly where to go in the component to adjust key options.

This table outlines variant property names that you should use when crafting components. In addition to the property names, defined below is the Order within option list. This details the sequential order these properties should exist in. This is done so as the designer moves from component-to-component, these options are bundled in a consistent order. The logic behind this list is to move from the most impactful property, to the least impactful. Mode, Type, and State should always be the first 3 options, with Size always being the last option. Any properties you need to make for components should exist between the third and last items.

Property name	Order within option list	Values	Notes
Mode	First	Light, Dark	The modes Arc Design System supports
Type	Second	Icon on left, Icon on right, Both icons	Major configuration of a component
State	Third	Empty, Selected, Focus	Minor configuration of a component
		Any additional properties needed gets added between these two groups
Size	Last	Large, Small	Supported sizes

Adding new variant properties Designers are free to add any property to a component that makes it more useful. When adding new variants, ensure that they follow the Order within option list. New variants should be ordered with similar logic, with the most impactful property first and the least impactful properties last.

#Naming components

To mirror React component naming conventions, our Figma components are also named using camel case. Instead of naming your component Text Field, it should be TextField, as that is the React tag used to call the component. This is also a shorthand, allowing designers and engineers to quickly know which components/patterns are part of the Arc Design System.

#Atomic components

Some components need additional components to work. If your component has a unique atomic component, for example a pop-out menu, then you should create a new Frame within your Figma component page called Atoms and place your atomic components there. By doing it this way, designers can type Atoms into the assets search to find all atomic components. This saves a lot of time in the prototyping phase.

#Component quality checklist

As Figma components are added to the design library, designers should step through this checklist to ensure that the components meet our criteria.

The component is named in camel case
All variant properties are named correctly, and ordered according to Order within option list
All of the component’s colors are mapped to the appropriate token. Example: text should never be a gray value, it should always map to Tokens > Light Mode > Text Color > Default
The component has been resized to ensure all Auto Layout, layout constraints, and resizing options are configured correctly