Framework by Figma: Benefiting Design Systems Widely

Figma held a global design system event 'Framework by Figma'. Global online sessions introduced new features to strengthen your design system and shared insights and best practices from industry leaders.

Figma has had a huge impact on the evolution of design systems to date. We tried to reduce the gap between actual development results and design with features such as variable management, prototyping, and developer mode. In this announcement, we introduced features for single-screen development as well as features to help organizations adopt the design system across their entire organization.

The newly released ‘Code Connect’ and ‘Library Analytics API’ help you easily create and manage a design system.

cord connectis a feature that ultimately helps developers use the design system better. Code Connect allows you to easily copy the code for each component of your design system. Previously, it was possible to duplicate the appearance by creating CSS, but this time we provide code that can be used directly in actual code. For example, if you connect a button component with Variants applied, you can apply multiple variable names by changing them to classes. Supports React, iOS, and Storybook. Available in beta on Organization and Enterprise plans.

Typography and gradients as variables You can utilize it. The thickness or size of the font can be registered as a separate variable, and the gradient can also be registered as a variable. Several independent individual variables can be applied to suit the theme applied to the entire UI, such as light mode or dark mode. They announced that design work using variables will continue to evolve and the experience will be further refined.

Library Analytics APIis a service for corporate customers. Figma can store data in external libraries and analyze the data according to specific conditions. You can find out which teams are using the library and analyze the most used elements and variations.

More and Sources

• https://frameworkapac.splashthat.com/Shortcut
• https://www.figma.com/blog/what-we-launched-at-framework-2024/