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.

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.

Niki Tonsky claims that ​“we, as a civilization, forgot how to center things.” As always, his essay gets into nitty-gritty design details in the most hilarious way. He explains how CSS, font metrics, and icons get in the way of centering things and what designers and developers can do about them.

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.

New plugin from Meng To: ​“AI Text Generator is a super handy Figma plug-in made for designers who want to rewrite their text in a couple of clicks. It uses OpenAI GPT‑4 to give you smart, creative text suggestions—think names, titles, or even Lorem Ipsum dummy text—right where you need them. It automatically detects the selected text’s length and generates the perfect amount of words for your alternatives. You can also add custom prompts, which is useful for more control, generate any type of text, in different languages and amount of words.”

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.

“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.”

Designer Advocate Ana Boyer takes us on a deep dive into typography and gradient variables, sharing best practices for leveraging these new features in your design system.

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.

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.

Figma is bringing together the design systems community on April 16 to share new features, best practices, and a peek into what’s coming next in the half-day event. ​“We’ll share more about new capabilities to make design systems more powerful and easier to adopt, as well as features to connect your system closer to code. Our product sessions will dive deep into strategies for structuring and maintaining your system.”

Considering it’s only a couple of months until Config 2024, it’s pretty clear they will put a bow on some of the features announced last year. Typographic variables, anyone?

An important update to the plugin I featured just a couple of weeks ago — now you can curve your text along any path you draw!

A new plugin by Lichin Lin to bend your text into a circle, square, or even arch shape.

Tom Biskup shares practical tips on improving typography in your project — learning from others with a Chrome plugin, setting your type in Figma, keeping it simple by limiting choices, thinking in systems and setting a type scale, using ChatGPT for filler copy instead of ​“lorem ipsum”, and picking fonts from great foundries.

A comprehensive font management plugin with previews, controls for variable fonts, recommended pairings, filtering by style, collections, and more. Very well done.

Baseline grids are hard to implement and their value is debatable, but I still irrationally love them. This article outlines a smart approach to using Figma’s vertical trim and Auto Layout to create reusable blocks for a baseline grid.

Vercel developed a new typeface specifically designed for developers and designers. ​“We began by creating a monospace version that prioritized readability and seamlessly integrated into coding environments. After perfecting the monospace variant, we expanded Geist into a Sans version, adding versatility to its capabilities.” Heavily inspired by Inter, it looks great and definitely going to be very popular!