It’s wild how long it takes to build some of these larger features. Jacob Miller, a Product Manager for the Design Systems and AI team at Figma, shares an early exploration for slots from 3 years ago! I’ve been begging Jacob for slots at this year’s Config and got a feeling that they’re already working on it, but still it will be launched only next year.

If you wonder why it’s taking so long, Jacob wrote an insightful reply on how his team approaches these changes: ​“With design systems features, we have to plan them years in advance. Things like components, variables, and styles are used on the order of billions — one wrong move will result in breaking files and ruining critical design work. We have to be methodical. […] With DS features, I’m usually planning them around 3 years in advance.”

If you’re curious how slots and other new features will work, check out Jacob’s AMA.

Jacob Miller from Figma ran a poll and discovered that ¹⁄₃ of designers misunderstand DPI. In this post, he explains the relationship between pixel count, DPI, and physical size.

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.