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.

Developer Advocate Jake explains some of the reasons why product experience can be misaligned between design and development. He points out that the source of truth can vary depending on the scenario, from the design system to the code in production to the design files. To find the truth, we have to ask a few questions: ​“What do we want?”, ​“What do we have?” and ​“What is the difference?”

Split tabs are now available in the desktop app! Miggi shows how to get the most out of them. Keeping split tabs with raw materials in FigJam while designing in Figma is surprisingly convenient and something I’ve been doing a lot this week.

That’s a pretty cool demo of how powerful the Generator plugin is. Impressive!

A short explainer on bringing SVGs from Figma to Rive, where you can build functional graphics with rich interactivity and animation.

“After finalizing and polishing their work in Figma, designers often expect developers to magically make sense of it. However, as that’s not usually the case, things can end up looking pretty grim. What’s going wrong?” The authors blame the outdated handoff mindset and suggest the four steps that can turn the handoff process from a potential headache into a smooth collaboration.

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.

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

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

Bumble, GitHub, and HP discuss the challenges their design systems teams face in connecting design to code and share first impressions of Code Connect.

Code Connect delivers code from your design system to Dev Mode, helping developers build with consistency and speed. In this session, Jake Albaugh, Figma Developer Advocate, shares an overview of Code Connect and some tips on how to get started.

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.

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

“Now, your team can access Figma library data outside of the app, so you can organize the data based on your organization’s needs. This will include component insertion, detachment, and instance data, as well as team and file-level breakdowns. Enterprise plans only.”

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

Developer Advocate Jake shows Jason Lengstorf how to bring your code into Figma with Code Connect.