figmaApr 15, 2024

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

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.

library-analytics-apifigmadesign-systemsreact+3

figmaApr 9, 2024

The Future of Design Systems is Marketing | Figma Blog (opens in new tab)

Design systems succeed only when people actively use them, so building a high-quality toolkit is not enough. The post argues that design systems teams should treat their systems like products, using marketing practices—audience research, tailored messaging, advocacy, and impact measurement—to drive adoption. This approach can turn a “nice-to-have” resource into an essential part of how an organization designs and builds products. ## Understand the Audience - Find product-market fit by learning how designers, developers, and leaders work, what frustrates them, and what they value. - Interview people across the Product Design and Engineering organization, from individual contributors to executives. - Begin with their existing processes, bottlenecks, and goals rather than immediately pitching the design system. - Use this research to shape the system’s positioning and continuously refine it. ## Tailor the Message to Each Group - Different audiences need different versions of the design system’s value proposition: - **Designers:** Emphasize creative enablement and brand consistency. - **Developers:** Focus on reusability, standardization, efficiency, and smoother design-to-code workflows. - **Decision-makers:** Demonstrate return on investment through faster delivery and reduced technical debt. - Address objections directly, including concerns about flexibility, technical constraints, and the effort required to implement the system. - A carefully adapted pitch can turn skepticism into support. ## Treat Adoption Like a Campaign - Replace one-off Slack announcements, presentations, and poorly attended training sessions with a deliberate go-to-market strategy. - Build compelling narratives around why the system matters to the organization. - Identify internal champions who can promote adoption within their teams. - Use supporting capabilities such as Code Connect, typography and gradient variables, and library analytics to make adoption easier to encourage and measure. The practical recommendation is to market a design system as actively as it is built: understand its users, communicate benefits in their language, recruit advocates, and measure whether it is delivering organizational value.

library-analytics-apifigmadesign-systemsproduct-design+3

figmaApr 2, 2024

Join Us for Framework by Figma: Our Global Design Systems Event | Figma Blog (opens in new tab)

Figma announced Framework, a global design systems event focused on new tools, best practices, and the future of design systems. The event aims to help teams manage increasingly complex systems while improving collaboration between designers and engineers. It also highlights Figma’s broader effort to connect design systems more closely with code and organizational adoption. ## Event Focus and Agenda - Framework was scheduled as a half-day virtual event on April 16, 2024. - The program included: - Deep dives into new design system features - Best practices from companies such as Verizon - Product sessions about Figma’s future direction - A design-to-code roundtable with Bumble, GitHub, and Hewlett Packard - Expert Q&A sessions - The article also references features announced at Framework, including Code Connect, typography and gradient variables, and the Library Analytics API. ## Building More Adaptable Design Systems - Design systems have evolved from basic style guides into foundations for product design and development. - Figma acknowledges that implementing and maintaining them can be complex. - Its approach aims to support both structured workflows and more flexible, freeform design. - Product sessions were intended to cover how teams can structure, maintain, and increase adoption of their systems. ## Connecting Designers and Engineers - A central goal was to bring design systems practitioners from design and engineering together. - Sessions addressed both design principles and technical implementation. - Figma previewed capabilities intended to reduce the gap between design and development. - The event emphasized cross-functional collaboration as essential to successful design systems. ## Global Design Systems Community - Framework was presented as a global community event, with virtual programming for broad access. - Additional events were planned for Asia on April 18 and Tokyo on April 23, alongside future meetups in London and other cities. - Participants could attend the main-stage announcements and sessions online regardless of location. Figma positioned Framework as both a showcase of new capabilities and an opportunity to learn from the teams shaping modern design systems. Its practical recommendation was to participate in the event, explore the new design-to-code and analytics tools, and apply the shared practices to improve system adoption and collaboration.

library-analytics-apifigmadesign-systemsaccessibility+3