Variants are the latest feature released by Figma. It's the evolution of components to include different states.

Let's take an example here. When creating a button components we will need to define all its states (hover, focus, disabled).

Without variant this would be designed with one components for each states.

Using variants, you're able to link them together and toggle between them easily.


Now that you know how cool it is, the best advise I can give you is to take the next 30 minutes to play with the Figma's official playground file.

Next up

Prototyping in Figma