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.

Variant Properties

Figma allows variants to have as many properties as you require. For maximum usability these properties should be clearly and consistently named in the following hierarchy.

Component Properties

Component properties were recently introduce to simplify the creation and use of variants. This feature isn’t a new way of doing things or change the current variant approach. It simplifies a few key areas:

• Text - Provides a text field in the variant panel to change text.
• Instance - Simplifies the process of changing a variant such as an icon or pictogram.
• Boolean - Will show and hide the layer it is assigned to.

It should be noted if your spacing values differ when a layer is hidden by a boolean property you will need create a separate variant instance to display the padding you want.

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.
• Be as descriptive but concise as possible.
• Native components should follow the naming convention of the web components as closely as possible.

Web Component Hierarchy