Docs from Figma: Guide to variables in Figma

In this year’s Config, Figma has introduced a range of exciting features, but Variables stands out above the rest. This powerful feature revolutionizes the way designers manage their designs, offering a systematic approach to design system scalability. Let’s take a look at this feature.

Create Collections

Collections serve as containers for variables.

Define Categories within Collections

Within each collection, users can further categorize variables according to their specific needs. This hierarchical structure enhances organization and makes it easier to locate and utilize variables effectively.

Create Variables

Color, Number, String, Boolean

Color: ideal for color settings, allowing for easy management and consistency across designs.

Number: good for managing space settings such as padding, margins, and corner radius.

String: enables the reuse of frequently used text strings like titles, ensuring consistency and efficiency.

Boolean: offers a binary state (True or False) for elements, particularly valuable for responsive design implementations.

Note: It’s worth mentioning that the Boolean feature is currently in beta and may have some issues. Following the instructions in the “Deep Dive Training: unlock design system scalability with variables” Config day 2 video might not yield the expected results. However, by simply selecting a frame in a main component and clicking the icon located to the right of “Layer” in the right panel of Figma, it is possible still not to successfully add it to local variables. (This note writes on 23 June 2023)

Conclusion

Figma variables feature makes a significant milestone in design system management, offering designers a comprehensive toolset for streamlining workflows. While the beta version of Variables may have room for improvement, its immense potential for revolutionizing design systems and advancing prototyping capabilities cannot be overlooked.