Kado: Figma Variables

Creating designs for Dark&Light mode has never been so easy 🌓

See how we created a variable system for Kado that sped up work on new features, cleaned up Figma files and streamlined work between developers.

Figma Variables

Variables in the Figma designs store reusable values that can be applied to multiple properties, based on our case - color system. The structure of the variables is almost identical to the actual code, which gives a sense of design in line with the implemented version.

Usage

Faster implementation is the main advantage of variables, where the table of values and their semantic names is an oracle for developers, who can use the designed structure or develop a complex system together with the designer.

For designers, this is a big plus in terms of designing new functionality, because with one click, the designer can switch the view to another mode, checking how the view will look in the other version. This saves time, space and brings more clarity to the design.

Final result

✅ Faster designing new features

✅ Better communication with developers

✅ Saving time and space in files

Stay with us: Instagram・Facebook・Twitter・Behance

Let’s create something together hello@properly.studio