Overview
Variants have many benefits from alignment with development through to reducing the number of components required in the asset panel. For more information on variants, see the Figma Playground file or the links at the bottom of this document.
“Variants introduce a new way to group and organise variants of the same component. This makes components easier to maintain and more intuitive to use.” ~ Figma
Breaking out components
Figma variants do not have the same amount of logic as the final built components. Therefore, in some instances it may make more sense to break a single component info a number of separate components.
Property Naming Conventions
The following naming conventions should be followed as a hierarchy of property. Component properties will vary so apply the following accordingly.
In general names should:
- Use capital letters at the start of each word i.e. "Show Icon".
- Be as descriptive but concise as possible.
- When using the boolean component property to handle the display of a layer then use the prefix of "Show" i.e. "Show Button Group".
Component Hierarchy
Components have multiple property types that perform specific actions. This documentation aims to outline a consistent hierarchy and naming convention will bring familiarity to the library.
Key Points
- If the component inverts set the boolean switch as the first property
- Follow the hierarchy of the component top to bottom
- Group relevant properties together, these can be mixed types
- Follow the naming conventions for icons
- Expose default nested instances or preferred values where relevant
- Add notes into the component docs if it assist the user
Hierarchy
- Invert (Boolean False as default)
- Variant
- Size
- Orientation
- State (If Required)
- Other Properties (If Required)
- Boolean Value(s) (If Required)
Component Properties
- Boolean Properties.
- Instance Properties
- Text Properties
Component Properties Explained
Figma allows components to have as many properties as you require. For maximum usability these properties should be clearly and consistently named in the following hierarchy.
Invert
- False (Default)
- True
Invert refers to the contrasting coloured areas used to highlight key areas.
Size
- Small
- Medium
- Large
- Extra Large
Variant
Clearly highlighting the different style of the main component. If there are multiple styles this may be a good indicatory to break a component into smaller parts, see breaking out components.
Examples:
- Primary, Secondary, Accent
- List, List + Icon, List + Tag
Orientation
These indicate if a components layout can manually be changed ie. Horizontal, Vertical.
Selected
If you require a selected state, use a boolean property as explained below.
Components that have a selected state should always use a boolean property and appear above the state properties.
State
Our current naming convention can be applied to display state. You can use:
- Default.
- Hover.
- Focus.
- Active.
Icon Naming
When naming icons in your components that appear in multiple positions they should be named as if read from left to right and use the prefix/suffix.
For example
- First icon or icon on the left - Icon Prefix
- Last icon or icon in the right - Icon Suffix
Boolean Properties
There may be more than one of these properties on a component. Figma offers the option to toggle options with a simple switch.
Boolean Properties should always be named as follows:
- True.
- False.
Component Properties Explained
Component properties were recently introduced to simplify the creation and use of variants. This feature isn’t a new way of doing things or changing the current variant approach. It simplifies a few key areas:
Boolean
This property controls the visibility of a layer. It is important to note that if you need more granular control over a component when a layer is hidden, you are better creating a new variant.
Instance
Simplifies the process of changing a variant such as an icon, pictogram or more complex components such as button groups.
Always expose instances that a user is likely to need to change frequently.
Instances properties may not be initially visible if there layer is hidden by a boolean property.
Text
Provides a text field in the variant panel to change text. It is recommended to keep text component properties last and follow the order of the component. By being the last variant they are always situated in the same position.
Known Limitations
- It should be noted if your spacing values differ when a layer is hidden by a boolean property you will need to create a separate variant instance to display the padding you want.
- You cannot reorder component properties into any position. They can only be reordered in their component groups.
- When using the instance component property the settings of that instance are applied globally. In other words you cannot change the instance variants for each component you nest it in.