How to Use Figma Variables for Light & Dark Modes

Figma's new variable feature allows you to store reusable values that can be applied to all kinds of design properties and prototyping actions. They help save time and effort when building designs, managing design systems, and creating complex prototyping flows. In this video, we'll use variables to explore how we can create light and dark themes for our designs.

This allows us to only create 1 set of designs and use different mode variables to change the colour scheme.

Resource used in this design: https://www.figma.com/community/file/1245385141730558466

Intro: (0:00)
Where to Find Variables: (0:50)
Downloading a Project: (1:50)
Create Color Variables: (2:30)
Create Modes: (4:18)
Changing Frame Variable Modes: (6:20)

Sign up for Figma today:
https://psxid.figma.com/ms4a65xe1io3

Wanna learn how to design complete Mobile & Web UI/UX with Figma? Check out my complete 6-hour Figma Course:
https://bit.ly/LearnFigma

Видео How to Use Figma Variables for Light & Dark Modes канала Clevr Studio