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

This article from Melissa McArthur outlines an effective approach for structuring a design system using Figma’s new variables feature. McArthur walks through how she created logical collections for different variable types such as colors, spacing, and devices. She emphasizes the value of separating base colors from semantic color tokens to maintain flexibility.

McArthur also demonstrates how variables can be used to define styles for light and dark modes, enabling designers to quickly preview designs across themes. Device variables are highlighted as a clever way to prototype responsiveness.

Overall, this is a practical guide from an experienced design leader on maximizing Figma’s variables to build a living, collaborative design system. McArthur’s best practices provide a solid framework for any team looking to establish a well-organized system.