Designer Advocate Ana Boyer with a reminder to plan your tokens and variables implementation before creating them in Figma. ​“In general, building then refactoring your variables is much more work than taking more time to plan before implementing. As they say: measure twice, cut once.” (That said, making refactoring easier in Figma won’t hurt.)

Typography variables can now be scoped to limit which properties they can be applied to. For example, if you scope a number variable to font size, you can only apply the variable to font size.

Also, copying and pasting an object bound to local variables will no longer populate a file with local variables unless you choose to in a tooltip.

“In this two part series, we’re using variables to build an advanced prototype of an interactive, configurable volume bar. Configurable prototypes are easily customized and adapted and allow us to edit and change interactions in less time. In this first video, we’re going to set up the foundation of our interaction.”

A new video in Luis Ouriach’s ​“My First Variable” series on the typography support within variables. He explains using string and number variables to set font weights, combining weights with styles such as italics, grouping text variables, aliasing font families, naming conventions, and more.

Use the new ​“Set variable mode” prototype action to change the variable mode of the current page. See the new section in the help article or try it out in an updated Advanced prototyping playground file.

Gerard walks us through the Variables API, showing how it can keep values in sync with your code base and how applications such as StyleDictionary can transform them into usable code for multiple platforms. See the repository with GitHub Actions workflow examples.

Scan local text styles, convert their properties into typographic variables, and bind them back to the text styles. Christine Vallaure recommends this plugin in her recent video and shows how to use it.

Luis built a starter kit for system font stacks with 123 variables, including numbers and strings for font weights in CSS, SF Pro, Segoe UI, and Roboto fonts.

Christine Vallaure shows how to use typography variables and modes to create responsive typography across different screen sizes. The video also covers applying multiple modes at once and automated typeface changes, such as for iOS and Android setups.

Chad with a timely reminder that the variables icon appears only if there are variables with the right type in your file.

Designer Advocate Hugo Raymond shows all the places where you can bind variables inside the Figma UI, including the newly released typographic variables and gradient stops.

“Did you know that ¹⁄₄ of mobile users tweak text sizes on their phones?” I didn’t know that! In this thread, Branimir shows how to set up accessible interface scaling with the latest typography variables.

Joey Banks recaps the Framework announcements. On choosing between styles and variables: ​“Wait, but styles don’t allow for modes, right? Wouldn’t the use of styles prevent us from switching themes or brands? Actually, this is what I’m most excited about with this update, and it’s the further positioning of how styles can be useful in combination with variables. Because all styles (yes, typography now, too!) can use variables, adjusting one variable mode within a style will adjust all variables to reflect that new mode change.”

In this session, Verizon Design Systems Leads Talia Fisher and Kshitij Tambe explain how their team implemented variables and how it’s helping them take their design system to the next level.

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.

Color variables can now be bound to gradient stops and saved as a style.

A starter kit from Luis Ouriach shows how to set things up with typographic variables.

The String and Number type variables can now be bound to typography fields and saved as a style. Included fields are font family, font weight (numeric or named alias) and style, font size, line height (no percentages support yet), letter spacing, paragraph spacing and indent. Use Modes to create responsive typography scales for different screen sizes.

Sam shares math equations she used in Token Studio to build all sorts of dimension tokens and even a proportional scale that snaps to a 4 or 8 pixel grid. This guide uses typography as an example, but the same ideas apply to sizing and spacing. There is even a free playground in the Community.

A reminder that Framework is happening on Tuesday, April 16th. Figma published the schedule for this 3‑hour-long event, which will be a great fit for anyone interested in variables, design systems, and design-to-code handoff.