Jacob Miller shares two variables tips to avoid the most common problems: 1) ​“Never create a mode that shouldn’t be set at the page level” (read more about inheriting a context), and 2) ​“Never publish a variable that users shouldn’t consume” (see why component-scoped variables can 10x the number of variables you ship). Don’t miss discussions in replies. 

Jacob Miller, a Product Manager for Design Systems at Figma, gives an overview of everything launched at Framework — Code Connect for developers, typography and gradient variables, and the new Library Analytics API. All of the above is designed to drive design system adoption across the teams because ​“building a design system is only half the battle — the real challenge is getting it adopted by both designers and developers.” If you missed the event, that’s one summary you need.

Jacob Miller, a Product Manager on the Design Systems team, unpacks the new features and answers questions about variables: ​“Our latest updates to variables in Figma allow for even more flexibility with updates to stroke weight, effects, layout grid, and layer opacity, along with nested instance variant binding. These upgrades not only boost design customization, they help align design and code like never before. Here, we share an overview of what we’re shipping with variables, how to use them in your current workflow, and where we’re going next with typography.”

Not mentioned in the article, but my favorite update is that now the variables authoring window can be resized! See also this thread by Luis, and Hugo’s accurate summary of the community’s reaction.

Confused by how variables are different from styles? Design Systems Product Manager Jacob Miller explains: ​“Styles can contain multiple fills as well as blend modes, and that restricts their use case for design-code alignment and where we can apply them. […] Variables are a single value. They’re more atomic. This means we will be able to use color variables anywhere you see a hex code.” This is my favorite way to think about it: ​“One way to think of it is a style is a CSS class (a group of values), whereas a variable is like a CSS variable.” 

An in-depth session by Designer Advocate Luis Ouriach and Design Systems PM Jacob Miller on how you can level up your design system in Figma for better scalability, theming, and more using variables.