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.

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.

“Code Connect is a tool for design systems and engineering teams to bring component code into Dev Mode. When inspecting a component with connected code snippets, developers will see design system code from their libraries instead of auto-generated code.” Currently in beta. Available on Enterprise or Organization plans only.

Tokenbase is a free tool for creating, managing, and distributing design tokens. Easily create your design systems and export tokens to code in a few clicks. It’s currently in beta, and I wonder if importing from Figma is on the roadmap?

Jason Lengstorf from Learn with Jason talks to Figma Developer Advocate Jake Albaugh about how Dev Mode improves the design handoff and how the Figma plugins API enables more powerful customization.

Ridd published a crash course on advanced Figma prototyping with variables. He explains when to use variables instead of variants and shows how to streamline the prototyping process by using variables to update UI elements without requiring multiple frames. Additionally, he prepared a community resource with slides and examples.

“The Washington Post’s inclusive process for creating new design system components bridges the gap between design and development to make features that help navigate the news online.”

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.

“Managing your team’s community resources just got simpler. Now you can save, approve, and manage resources for your entire organization without switching profiles or ​‘browsing as admin.’”

Tom Lowry walks through recent updates to branches — the default zoom level of previews is increased to 150%, the full branch name is now visible on hover, better text legibility, transparent backgrounds for effects, a few changes to improve review of variables, and bug fixes.

Easily generate a frame with progressive blur, controllable by a set of parameters.

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?