Typography Variables

16 Apr 2024

Tada!🎉 Figma just announced the release of Typography Variables at their Framework event.

Design systems (DS) specialists have been waiting for this ever since they announced variables as their exciting new token feature at last year’s Config conference. Sitting in that massive audience at Moscone Center, I knew variables would be a huge deal for DS teams like mine, but it was missing a key piece of the puzzle without support for type. We heard it was coming and our patience has finally paid off. Learn more about the new features: 

• Read Figma’s article,
• Play with their updated Variables Playground
• Joey Banks dives into the new variables
• Luis Ouriach’s Starter Kit is a great resource

DS teams have been busy using variables for design tokens since their initial release last year. I helped our team integrate them into our Figma libraries for colors, spacing/grid, sizing, stroke, corner radius, and more. This support in Figma has made our library management much easier than in the past when we were limited to styles or manually assigning values. Now our tokens framework connects directly in the design library bringing it closer to our DS code.

If you are new to Design Tokens and Figma Variables it’s easy to learn from the experts. You can start small and scale your approach as your system grows.

• Figma’s Guide to Variables
• Figma’s Intro to Design Systems with videos
• Nathan Curtis on Tokens
• Token Studio, the best plugin for connecting tokens from design to code
• Nice tokens structure lesson from Melissa McArthur