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.
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
#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
This table outlines variant property names that you should use when crafting components. In addition to the property names, defined below is the
#Standardized variant properties
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.
Stateshould always be the first 3 options, with
Sizealways 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|
Order within option list. New variants should be ordered with similar logic, with the most impactful property first and the least impactful properties last.
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.
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
Framewithin your Figma component page called
Atomsand place your atomic components there. By doing it this way, designers can type
Atomsinto the assets search to find all atomic components. This saves a lot of time in the prototyping phase.
As Figma components are added to the design library, designers should step through this checklist to ensure that the components meet our criteria.
#Component quality checklist
- 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