Our AI writing assistant, WriteUp, can assist you in easily writing any text. Click here to experience its capabilities.

How I Structured My Design System Using Figma’s New Variables

View Original View Raw

Summary

In this article, Melissa McArthur explains how she used Figma's new variables to create a comprehensive design system with the help of Design Tokens. She explains how to set up a Base Colors collection, a Color Tokens collection, and a Number Tokens collection, as well as how to use the variables for min and max column widths for different breakpoints. She also explains the importance of setting up Design Tokens to reduce design specifications in design handover and to quickly preview designs in different color modes. Finally, she gives credit to iOS developer David Jangdal for his help and insight.

Q&As

What are Figma's new features that helps to build and use design systems?
Figma's new features that helps to build and use design systems are Variables, Collections, and the ability to hide colors from publishing.

How are Design Tokens created in Figma?
Design Tokens are created in Figma by creating two collections: Base Colors (defining the Hexadecimal color value) and Color Tokens (defining the semantic colors/use cases).

What are the benefits of setting up a design system?
The benefits of setting up a design system are reducing the amount of design specifications needed in design handover, quickly previewing designs in different color modes/themes, and creating a link between the Color Token and the Base Color.

How can Base Colors and Color Tokens be used in the design system?
Base Colors are used within the Design System Figma File and should not be used to style components within the design system. Color Tokens are used to style components in the design system and used by the entire design team.

How can Variables be used to improve responsiveness of content?
Variables can be used to define rules for Spacing and Radius and to define Min and Max column widths for different breakpoints to improve the responsiveness of content.

AI Comments

👍 This article is a great resource for anyone looking to use Figma's new variables to create an efficient design system. The author provides a comprehensive explanation and detailed instructions for setting up and using the system.

👎 The article is too long and could have been more concise to make it easier to read and process the information.

AI Discussion

Me: It's about how to use Figma's new variables to create a design system. It explains how to create base colors, color tokens, number tokens, and devices, as well as how to use variables for min and max widths and text styles.

Friend: Wow, that sounds really useful! What kind of implications does this have for design systems?

Me: Well, it makes it easier to manage design systems and ensures that designs are consistent across different platforms. It also helps to reduce the amount of time needed to communicate between designers and developers. Plus, the use of variables for min and max widths and text styles can help when it comes to responsive design.

Action items

Create a Base Color collection in Figma to define the Hexadecimal color value (#123456) of all of the colors in your team’s color palette.
Create a Color Token collection in Figma to define the semantic colors / use cases that will be used to style objects and components.
Create a Number Token collection in Figma to define rules for Spacing and Radius for use throughout the design system.

Technical terms

Figma: A cloud-based design platform that allows teams to collaborate on design projects.
Variables: A feature in Figma that allows users to create collections of values that can be used to style components.
Design Tokens: A set of variables that define the colors, spacing, and other design elements used in a design system.
Base Colors: The Hexadecimal color values (#123456) of all of the colors in a team’s color palette.
Color Tokens: Variables used to define the semantic colors and use cases that will be used to style objects and components.
Mode: A theme, such as light or dark mode, used to style components.
Number Variables: Variables used to define rules for spacing and radius for use throughout a design system.
Device Variables: Variables used to define the width and height of different device types.
Text Styles: A feature in Figma that allows users to create collections of text values that can be used to style components.