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 16^th. 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.

This plugin re-imagines local variables export, offering a beautifully formatted JSON output. Supports selecting a color format (hex, RGB, HSL, or CSS-friendly formats), including an alpha channel, flexible collection selection, intelligent grouping, customizable naming convention, and more. See a quick demo on Twitter.

The new video series from Luis Ouriach on variables. The first part introduces the basic concepts and terminology — variable types, collections, modes, and aliases. The second part is ​“The 3 levels of variable” where Luis explains the definitions of primitive, semantic, and component-level variables. The third part focuses on creating your first variables and using modes to manage theming and densities.

“Using variables in your Figma libraries? Learn how to set a default mode for a library that applies to all of your teams and files within a workspace.”

Molly suggests it’s time to support multiple icon sizes with number variables.

Chad shows how to use variables to change a variant on a component instance in your designs.

Cool prototyping technique built on variables.

A new plugin from Designer Advocate Hiroki Tani for generating color variables from the palette on canvas. It creates a collection from the section name, modes from nested frames, and variables from rectangles.

Chad shows how to use variables to change your variants on nested component instances when setting a mode.

Luis wonders whether variables scoping provides enough semantic modification to justify removing explicit ​“background”, ​“border”, and ​“text” color variables. ​“What’s stopping us from maintaining a single, primitive set of variables, named as such (e.g. red-300) to match your developer’s framework, relying on scoping alone to bridge this gap?” (See the discussion in this thread on X.)

I also like this take from Nate Baldwin — primitive color palettes are inherently semantic because every lightness stop is knowingly created to be used for specific use cases. He supports this idea with examples from his work on Adobe’s Spectrum color palette.