Learn Figma's dark mode variables in seconds
We will start with a light mode design and create a dark mode version from it.
This initial setup is a one-time effort.
Once your variables are in place, any additions or changes in light mode will automatically reflect in dark mode.
The next step is to create the variables.
Use the light mode as a reference and add a variable for each element.
We can now add the dark mode and rename it accordingly.
Rename the existing mode to "Light" to reflect the design settings we've applied so far.
Now, apply the appropriate colors for the dark mode version to the variables created.
The next step is to replace the color selections with our variable names.
Click on the four dots icon and assign each component its respective variable that we've created.
You can see that now we can drag it in and out of the frame, and it will automatically switch between the two modes, showcasing the versatility of our design in different conditions.
#figmatutorial #figmatips #uidesign