Framework 2024: Tools to Close the Design-to-Code Gap
Design systems promise consistency and efficiency, but their value is only realized when teams actually use them. As systems grow more powerful and complex, the hardest problem isn't building them—it's driving adoption across an organization. At Framework 2024, Figma announced a set of features aimed squarely at that challenge, plus new tooling for developers and expanded variable support.
The announcements included Code Connect for developers, typography and gradient variables, and a Library Analytics API for Enterprise customers. Together, they are designed to move design systems teams from creating assets to actively managing their reach and usage across both design and engineering.
Code Connect: Bringing Code to the Canvas
Gaining traction with developers has been a persistent barrier to design system adoption. Code Connect, now in beta for Organization and Enterprise plans, directly addresses this by bringing production-ready code snippets into Dev Mode. The tool attaches to components in a Figma file, so developers can copy and paste the correct, current snippet without digging through external documentation or relying on potentially outdated examples.
At launch, Code Connect supports React, iOS, and Storybook, with additional frameworks and platforms planned. For teams using these stacks, it offers a clear path to reducing friction between the design file and the implementation.
Typography and Gradient Variables Expand Token Support
Previously, variables were largely limited to color and spacing, leaving teams unable to fully tokenize their systems. The addition of typography variables allows teams to define font scales, weights, and other type properties once and apply them across an entire system. This support aims to simplify platform adjustments and help maintain accessible, WCAG-compliant type scales.
Alongside typography, gradient variables have been added to the mix. The gradients panel has been redesigned to allow binding color variables directly to individual stops. This change gives designers finer control over each point in a gradient while keeping those color choices tied to the same token infrastructure as the rest of the design.
With these two additions, variables move from beta to general availability, rounding out Figma's token offering for these use cases.
Library Analytics API: Understanding Adoption Externally
To support teams that need deeper insight into how their libraries are used, Figma introduced the beta Library Analytics API for Enterprise customers. The API allows design systems teams to export library data to their own analytics tools, enabling them to drill into usage patterns and measure adoption on their own terms.
This addresses the need to assess whether design system efforts are actually landing, not just whether the assets have been published. Teams can now store this data outside of Figma and analyze it according to their specific workflows and metrics.
Sessions from Framework 2024 will be available on-demand for those who missed the live event. The focus of this release cycle is clear: providing the plumbing to measure design system health and the tools to bridge the last-mile gap between design and code.
