techlist.io
KREN
figma

What We Launched at Framework 2024 | Figma Blog (opens in new tab)

figmadesign-systemsreactdesign-tokenscode-connectstorybooklibrary-analytics-api

Figma’s Framework 2024 launches focus on increasing design-system adoption across organizations. The central argument is that creating a system is only half the challenge; teams must also make it useful and accessible to developers and other stakeholders. Code Connect, typography and gradient variables, and the Design System Analytics API are presented as tools for bridging design and code, improving consistency, and measuring adoption.

Design System Adoption as the Central Challenge

  • Design systems have become more powerful and sophisticated, but that complexity can make organizational adoption harder.
  • Figma emphasizes that successful systems require more than components and documentation—they need an adoption strategy.
  • The new releases build on earlier updates such as variables, theming, state management, advanced prototyping, and Dev Mode.
  • Figma frames design-system advocacy partly as a marketing problem: teams must persuade designers and developers to use the system consistently.

Code Connect Bridges Design and Code

  • Code Connect brings production-ready code snippets directly into Figma’s Dev Mode.
  • Developers can find the implementation for a design-system component without searching through separate documentation.
  • Copying the relevant snippet is intended to reduce inconsistencies and make the design-to-code process faster.
  • The beta supports React, iOS, and Storybook, with additional frameworks and platforms planned.
  • Bumble, GitHub, and HP shared their design-system challenges and early experiences with Code Connect.

Typography and Gradient Variables Expand Token Coverage

  • Figma describes typography as an essential part of a complete design system that was previously difficult to represent with variables.
  • Typography variables allow teams to define font scales once and apply them consistently throughout a product.
  • They can support platform-specific adjustments and accessibility goals, including WCAG-compliant type scales.
  • Gradient variables, introduced alongside typography variables, further align Figma variables with the range of design tokens teams need.

Analytics for Measuring Adoption

  • Figma also announced the Design System Analytics API, referred to in the introduction as the Library Analytics API.
  • The API is intended to help design-system teams understand usage across an organization.
  • By measuring adoption, teams can identify where systems are being used effectively and where additional education, improvements, or outreach may be needed.

Figma’s overall recommendation is to treat a design system as an organizational product: provide developers with usable code, cover essential tokens such as typography and gradients, and use analytics to guide adoption efforts.