What are Variants?

What are Variants?

Variants in Figma are components with similar properties and are grouped together according to their similarities in features & characteristics. Variants are simple reusable components that help save time and efficiency and remove the trouble of creating an element over and over again. In this article, we will learn what variants are in Figma and how can we set them up and use them in our design....

Setting up Variants (Steps)

1. Learning how to create variants...

Properties

Variants are reusable components and they are grouped on the basis of their similar properties. Variants and their attributes can be defined by simply specifying the name of the frame, or component in the following Syntax:...

Importance of Variants

Variants are easy to maintain and allow reusability of elements. This in turn saves time, efforts & improves efficiency. Grouping of components based on similar properties is only called creating variants and that helps in an effective use of elements. For eg. A button in both light and dark mode can be separated in terms of properties of variants. By creating variants, individual access and amendments become easy and each element can be accessed to be changed accordingly. For eg. If a variant is created of several lists of navigation bar, both in row and columns, then each column’s variants can be individually changed....

Limitations of Variants

Variants in Figma have a limitation in case of design systems that are huge. When the designing project is huge and we are suppose creating buttons and their variants, it becomes very difficult to toggle for every button to change their icon or set their property such that their icons can be changed. In that case we would prefer to use component properties....

Conclusion

Variants help in reducing the efforts & dependency on creating an element over and over again alongwith adding new prototypes every time after UI creation. Variants in Figma help mitigate this issue and creating variants of every reusable element help preserve the user experience features and different functionalities added to the component. Covering the steps and screenshots above, one can easily set up variants in Figma and take use of their advantages....