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

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.

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

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

“Create a FigJam board during or outside of a Google Meet call to jam remotely or in person.”

Wouldn’t it be slick if you could connect your design system components to code so they’re accessible during handoff? Zeplin’s Storybook integration gives you the power to do just that — no coding needed!

Just paste your Storybook URL into Zeplin and start linking. View component code from Storybook in Zeplin and run side-by-side comparisons with the addon to ensure perfect alignment between design and live code.

Available on Zeplin’s Free Plan, and supports all 15 frameworks from Storybook including React, Vue, and Angular.

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.

The Figma team kicks off the Framework event with a rundown of everything they’re launching and what’s to come.

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.

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.

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

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.

The Figma team answers FAQs on design systems and everything launched at Framework, ranging from introductory questions to more complex ones.

A new episode of Lenny’s Podcast with Mihika Kapoor, a design-engineer-PM hybrid at Figma, where she was an early PM on FigJam and is now spearheading development on a new product at the company that’s coming out this June (!!!) ​“She’s known as the go-to person at Figma for leading new 0‑to‑1 products, and, as you’ll hear in our conversation, beloved by everyone she works with. Her background includes founding Design Nation, a national nonprofit focused on democratizing design education for undergraduates; spearheading product launches at Meta; and community building within the NYC AI startup scene.” See also a few key takeaways from this conversation on Twitter.

Chad Bergman continues the series on getting started with design systems with a walkthrough of the basics of creating a system tailored to your unique goals and challenges, whether building from scratch or starting with existing pieces.

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

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

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.

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

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.

I shared this design system back in October of last year, but it just shipped a new version and won #1 Product of the Day at Product Hunt. ​“Included in this package are more than 200 styles (Typography, Effects, and Color), over 200 variables (Surface, Text, Outlines, and Radius), and 700+ components (Buttons, Form Elements, Navigation, Web3, and more). It also offers pre-made layout samples, a one-click dark mode option, and a fully tokenized design using Figma variables.”

“The latest version of the Chrome browser frame mockup offers a sleek and modern design, complete with customizable features such as tabs, address bar, and navigation buttons.”

A new plugin by Vijay Verma for generating pleasant color palettes and gradients in one click.

“The first visual tracking documentation tool that enables everyone in your team to create, access and understand analytics events in seconds. No technical skills or endless spreadsheets required.” See the demo video.

Cool little app for generating a consistent color palette from Lightness, Chroma, and a given number of Hue steps using OKLCH.