How to add a dark mode variant to your Figma component
How to add a simple variant to Figma.
Variants is one of the best features in Figma. If you prefer to use a component driven approach to your design projects, then you will like need to use variants and swap them across your design.
To illustrate this, I created a simple navigation component.
To add a variant to my component, Select it, then click on add a variant on the right bar of the screen.
This will generate a new variant of your main component. Now take your new variant and apply your design changes on it.
Figma organizes the components using properties and values. Each property can hold many values, hence many variants.
For our case, I only needed one property called Dark mode, So I renamed my property to dark mode.
Next step is to select each one of my variants and give it a proper value. Figma auto generate value names, but it is a good practice to give proper names to your components.
I gave my dark Navbar a value of "On", and my Dark variant a value of "Off"
Done, now copy your component, and you will be able to switch variants immediately as you work on your design.
