What we launched at Framework

Design systems are core to Figma. Over the past few years, we’ve watched this community grow and the design systems they create become more powerful, flexible, and sophisticated. But with power and sophistication comes complexity, and we’ve found that one of the biggest challenges facing design systems managers today is gaining organizational adoption.

Solving the problem of design system adoption

has been a key focus for us, and we’ve gained valuable insight from the community on what they need to take their design systems to the next level. Your input has driven numerous updates and improvements

Config 2023: Reimagining where teams design and build together

We’re launching Dev Mode, variables, advanced prototyping, and a series of quality of life updates to help you go from design to build.

, from variables, to new ways to bind and leverage them for theming and state management, to advanced prototyping and alignment with code. But we also know that building a design system is only half the battle—the real challenge is getting it adopted by both designers and developers. That’s why we’re so excited about today’s launches, which are designed to drive design system adoption across your entire team. Code Connect for developers, typography and gradient variables, and our Design System Analytics API are new features to help you create, maintain, and adopt design systems with ease.

Bridging the gap between design and code with Code Connect

One of the biggest challenges facing design systems is driving adoption among developers. That’s why we're so excited to introduce Code Connect, a new tool in Dev Mode that brings production-ready code snippets right into Figma. With Code Connect, developers can easily access the code they need for each component in your design system. No more hunting through documentation or risking inconsistencies—just copy and paste the code snippet and you’re ready to go. Code Connect is now available in beta for Organization and Enterprise plans and supports React, iOS, and Storybook, with more frameworks and platforms to come.

Fully align variables to tokens with typography and gradients

Of course, completeness is also a major things for teams. As we’ve heard, variables have been a huge unlock—but many teams haven’t been able to realize their full system without typography variables. Typography is a major part of any design system and, with typographic variables, you’ll have unprecedented control and flexibility over your type. Define your font scales once and apply them consistently across your entire system. Easily adjust for different platforms and ensure accessibility with WCAG-compliant scales. Typography variables open up a world of possibilities for creating rich, expressive, and consistent type.

We’re also introducing gradient variables, allowing you to bind color variables directly to each stop in a gradient. The redesigned gradients panel provides more control over individual gradient stops, making it easier than ever to create and manage beautiful, flexible gradients.

The addition of these two new areas to bind variables rounds out our token offering and marks their transition from beta to general availability. But don’t think this means that we’re done—this is just our first version, and we’ll be continuing to work hard on polishing this experience.

Measure adoption with the Library Analytics API

For Enterprise customers, we announced the beta of their Library Analytics API. This powerful feature allows design systems teams to store and analyze their library data outside of Figma in their tool of choice, supporting the ability to drill into the data based on their particular needs.

Get started with library analytics and explore our documentation.

The future of design systems

We’d like to extend our heartfelt thanks to everyone who made Framework 2024 such a success. Your passion, insights, and dedication to building better together continue to inspire us. If you missed the live event, don’t worry—all the sessions will be available on-demand soon. Stay tuned for more details!

At Figma, we’re committed to empowering teams to build better together. With the launches announced at Framework 2024, we’re making it easier than ever to create, maintain, and adopt design systems that drive consistency and collaboration across organizations. We can’t wait to see how you leverage these new tools and features to take your design systems to the next level.

Looking for personalized advice? Get in touch with our Sales team for tailored guidance on how to leverage our latest features for your design system.