How to create buttons using variables: part 1

How to create a Button Component using Variables in Figma? Part 1.

​

By using Variables we may decrease the number of components that we keep in Figma. They also create one source of truth [for both Designers and Devs].

​

Of course, in the documentation and for clarity, we can list and demonstrate all possible variations, sizes, states, and so on.

​

When working with Variables I create separate collections: Primitives, Semantic, or Component-specific. Also, I create separate collections for color and number tokens - as it simplifies the process of creating extra modes [Like Dark/Light, or Desktop/Mobile].