Design Tokens

38 posts

figmaSep 15, 20242 min readCurated summary

Figma on Figma: Our Latest Brand Refresh | Figma Blog

Figma refreshed its visual identity to reflect its evolution from a designer-focused tool into a collaborative platform for entire product teams. The new language moves beyond static cursors and heavy outlines, using flexible primitives, dynamic compositions, broader color, custom typography, and motion. Its central idea is to portray Figma as a shared space where people from different roles create together. ## Expanding Beyond a Designer-Centric Identity - Figma’s earlier branding was rooted in “vector vernacular,” including static cursors and bold black outlines. - As developers, product managers, and other contributors became part of the platform, the brand needed to represent more than traditional design work. - The refresh emphasizes the many people involved in turning ideas into finished products. ## Four Foundations of the New Visual Language - **Versatile primitives:** Visual building blocks represent the diverse individuals involved in co-creation. - **Dynamic compositions:** Layouts reflect different ways of making, experimenting, and building. - **Expanded color palette:** Color variables make the system easier to adapt across contexts. - **Integrated motion:** Animation expresses actions and flows within the creative process. ## Typography and Custom Fonts - Figma partnered with Grilli Type to create **Figma Sans**, described as an opinionated grotesque. - The broader type system includes: - Figma Sans - Figma Condensed - Figma Mono - Figma Hand, created with OH no Type - Together, the fonts support different modes of communication, from product design and engineering to brainstorming and collaboration. ## Starting in the Sandbox - Brand Studio began by studying how people use Figma across the entire process: - Brainstorming and ideation - Inspecting elements - Refining and polishing work - The team explored the idea of activities happening simultaneously in a shared environment, similar to “parallel play.” - Playgrounds designed by Isamu Noguchi and Mitsuru Senda inspired the concept of the Figma canvas as a place where people gather, experiment, and create. - Other references included carefully crafted tile work and infrastructure, suggesting a visual system that could combine playfulness with structure. Figma’s new identity is designed to make collaboration visible: a flexible, colorful, and animated system that reflects both the individuality of contributors and the shared space where product ideas take shape.

Design Tokens Figma Design Systems Typography+2

figmaAug 20, 20242 min readCurated summary

A Year With Dev Mode: 10 Lessons From An Engineering Manager | Figma Blog

After a year using Figma Dev Mode at Decathlon, Laurent Thiebault found it transformative for connecting design and development workflows. The biggest improvement came from Code Connect, which links Figma components to real implementation code and helps resolve mismatches in properties, naming, and states. His overall recommendation is to adopt Dev Mode incrementally, using design tokens, advanced inspection, and embedded documentation to build trust and alignment. ## Start Small, Think Big - Developers may resist adding another tool to established workflows, so the team began with small wins rather than a full process overhaul. - Figma variables helped the team improve design-token handoff. - Variable aliasing creates a clear token hierarchy and supports semantic theming. - Variable scoping prevents incorrect usage, such as applying background colors to text or spacing values to corner radii. - Customized code syntax allows token names to match developer conventions across platforms. - Token changes can expose the corresponding implementation changes directly to developers. ## Use Advanced Inspection Capabilities - Dev Mode handles complex layouts, including Flexbox, and generates implementation-ready code. - Teams can inspect CSS, SwiftUI, UIKit, Android XML, and Jetpack Compose properties. - These inspection tools help designers verify that components are implemented according to specifications. - The Figma VS Code extension adds autocompletion and makes it easier to navigate CSS, Compose, and SwiftUI implementations. ## Define What “Done” Means - Keeping design-system documentation current is difficult, and design intent can be lost during handoff. - Dev Mode documentation and annotations keep requirements closer to the designs themselves. - Designers can add free-text explanations, defined values, measurements, alignment details, and sizing guidance. - Developers can be linked directly to relevant annotations for additional context. - The team documents components with links to GitHub source code, README files, and related playgrounds. ## Code Connect as the Central Improvement - Code Connect connects Figma components directly to the components used in production code. - It helps reconcile differences between how components are structured in design files and how they are implemented in code. - The feature improves consistency around component properties, naming conventions, and state management. - Combined with design tokens and inspection tools, it makes Dev Mode a more reliable bridge between design systems and engineering. Teams adopting Dev Mode should start with focused improvements—especially token management and documentation—then expand toward deeper code integration with Code Connect.

Design Tokens Design Systems Swiftui Flexbox+4

figmaJul 29, 20242 min readCurated summary

HP Powers Up Design Handoff with Dev Mode | Figma Blog

HP built its Veneer design system to unify digital experiences across more than 100 product lines and many independent business units. By combining design language, reusable components, documentation, governance, and community feedback, HP reduced duplication and improved consistency. Figma’s Dev Mode further streamlined handoff, helping developers interpret designs faster and cutting development time by up to 50% on some projects. ## Building a multilayered design system - HP’s diverse products—including printers, laptops, and gaming systems—each have distinct brand and product requirements. - Teams previously worked in isolation, making it difficult to maintain a consistent digital experience. - Veneer evolved from a frontend component library into a broader system containing: - Design language and tokens - Shared components and patterns - Usage guidelines, code standards, and snippets - Governance and community collaboration - Its multilayered structure supports HP’s numerous sub-brands rather than forcing every product into one rigid system. ## Measuring adoption and impact - HP tracks both usage data and feedback from designers and developers. - Veneer’s iconography library includes 915 components used by 320 teams. - The library averages approximately 85,000 component inserts per week. - HP reported that Veneer saved projects 500% more time than the time invested in creating the system during 2023. - Some projects experienced a 50% reduction in development time. - Adoption remained challenging because designers were protective of their product-specific work and teams needed flexibility for different sub-brands. ## Dev Mode improves design handoff - Dev Mode gives developers direct access to design specifications in Figma, reducing meetings and repeated clarification between design and engineering. - **Compare changes** helps teams identify differences between design versions, especially when updating existing products. - **Ready for development** lets designers indicate which parts of a design are prepared for implementation, helping developers focus on the correct work. - **Variables** connect designs to primitive and semantic tokens, allowing HP’s system to scale across themes and modes. HP’s experience suggests that a successful enterprise design system must be flexible, measurable, and supported by strong collaboration. Pairing such a system with Dev Mode can make handoff clearer, reduce redundant work, and give both designers and developers more time to focus on higher-value work.

Design Tokens Figma Design Systems Dev Mode+2

figmaApr 17, 20242 min readCurated summary

The Long and Short of It: Issue no.4 | Figma Blog

Figma’s “Find your framework” newsletter highlights ideas and resources from its virtual Framework design systems event. It emphasizes that successful design systems require more than reusable components: teams must connect design to code, market the system internally, teach its fundamentals, and use it to support growth. The post points readers toward Framework announcements, expert discussions, and practical case studies. ## Framework Event Highlights - Framework brought together design systems practitioners and product builders to discuss current challenges and practices. - Figma announced: - **Code Connect**, which links design-system components in Figma to their code implementations. - **Typography and gradient variables** for more flexible, consistent design foundations. - **Library Analytics API** to help organizations measure and improve design-system adoption. - The event also included roundtables and expert Q&As. ## Treating a Design System Like a Product - Design systems become valuable only when teams actually use them. - Adoption requires product thinking, including: - Understanding internal users and their needs. - Communicating the system’s benefits clearly. - Building an internal marketing and adoption strategy. - The goal is to make the design system an indispensable part of the company’s toolkit, not merely a library maintained by a specialized team. ## Design Systems 101 - Figma’s introductory series is aimed at teams beginning their design-system journey. - The guides explain: - What a design system is. - How design systems work. - How they can change design workflows. - How to build one from the ground up. ## Using Design Systems to Fuel Growth - Carvana’s case study shows how a design system can support rapid business and product expansion. - The company used its design system and variables to: - Maintain consistency while responding to sharply increased customer demand. - Scale design across its e-commerce product. - Keep visual details synchronized throughout periods of change. Figma’s overall recommendation is to combine strong system foundations with adoption efforts, developer integration, education, and measurement so the design system can scale with the organization.

Design Tokens Figma Design Systems API+2

figmaApr 15, 20242 min readCurated summary

What We Launched at Framework 2024 | Figma Blog

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.

Design Tokens Figma Design Systems React+3

figmaApr 15, 20242 min readCurated summary

Alaska Airlines Reaches Cruising Speed With the Help of Variables | Figma Blog

Alaska Airlines uses Figma and its Auro design system to create consistent experiences across websites, mobile apps, kiosks, and digital signage. Moving away from Sketch and InVision resolved fragmented workflows, improved collaboration with engineers, and accelerated product development. Figma variables further help the 45-person design team adapt designs across screen sizes, themes, and the needs of more than 23,000 employees. ## Building a Reliable Design System - Alaska’s previous Sketch and InVision workflow lacked: - A single source of truth - Intuitive prototyping and collaboration tools - Consistent reusable components - Easy synchronization between design and engineering - Designers frequently made small but important inconsistencies in colors, buttons, checkboxes, modals, and date pickers. - Manual copying between platforms created version-control problems and contributed to accessibility issues. - Figma enabled Alaska to document Auro clearly for both designers and engineers, creating a more consistent digital ecosystem. ## Redesigning the Flight Status Experience - Severe storms exposed weaknesses in Alaska’s underused flight status page, which lacked information such as flight tracking and aircraft details. - A cross-functional “tiger team” rebuilt the page using approximately 90% Auro components. - The team completed the work in one sprint instead of the estimated four or five sprints without Figma. - Afterward, average time spent on the page increased from 36 seconds to 5 minutes and 10 seconds—a 761% increase. ## Connecting Design and Engineering - Figma components mirror the web components used by engineers, making designs easier to implement accurately. - This alignment improved product consistency and increased trust between design and engineering teams. - Alaska also documented Figma practices such as auto layout, merging, and branching to encourage adoption. - Designer education reduced conflicts and helped teams make better use of Figma’s capabilities. ## Using Variables at Scale - Figma variables allow Alaska to adapt designs for: - Different screen sizes - Light and dark modes - Themes for internal teams and external partners - The approach saves designers an average of 11 hours per week. - Variables help the team support the needs of more than 23,000 employees while maintaining a coherent design system. Alaska’s experience suggests that a well-documented design system, shared tooling, and variables can significantly reduce repetitive work while improving consistency, accessibility, and collaboration across an organization.

Design Tokens Figma Design Systems User Experience+4

figmaApr 15, 20242 min readCurated summary

How Carvana Fuels Consistency and Scale | Figma Blog

Carvana scaled its design operations by moving from scattered tools to Figma as a centralized source of truth. Its design systems team uses Figma variables to enforce consistency, support rapid rebranding, and reduce design-development friction. The approach helped Carvana adapt quickly during rapid growth and integrate acquired businesses such as ADESA. ## Creating a Single Source of Truth - By 2019, Carvana’s design system was fragmented across a PDF UI kit, Principle, and Sketch. - Designers relied heavily on copying and pasting, causing small changes to diverge across repeated components. - Moving the system to Figma centralized libraries and connected design and engineering workflows. - The transition became especially valuable during the pandemic, when car sales surged and Carvana needed to scale quickly without adding process friction. ## Using Variables to Improve Consistency - Rapid growth introduced inconsistencies in: - Colors - Spacing - Typography - Corner radii - Figma variables let Carvana define reusable values for design properties. - Number variables standardized spacing and corner radii, while color variables helped maintain brand accuracy. - Although setting up variables required an initial learning period, the team achieved more polished designs and fewer revision cycles. ## Supporting New Brands and Business Lines - Variables allowed Carvana to create new themes without rebuilding its component library. - After acquiring ADESA, Carvana added an ADESA theme and applied the new branding to existing designs quickly. - The redesign took less than a week instead of the estimated month required to restyle the component library manually. - Themed components also enabled the team to create ADESA design comprehensives three times faster than usual. ## Connecting Design and Development - Figma’s shared libraries and variable-based system help designers and developers work from the same standards. - Centralized component structure and functionality make handoffs clearer and reduce inconsistencies between design files and implementation. - Carvana’s 40-person design systems team uses these practices to support consistency across a 10,000-person organization. Carvana’s experience suggests that a centralized design system, combined with reusable variables and themes, can make rapid growth more manageable. Investing in the system early reduces rework while making future products, brands, and acquisitions faster to integrate.

Design Tokens Figma Design Systems User Experience+4

figmaApr 7, 20242 min readCurated summary

How to Build a Design System | Design Systems 102 | Figma Blog

A design system creates a shared language and reusable components that improve product consistency, team efficiency, and collaboration. Figma recommends building one around the organization’s specific goals and challenges rather than following a universal formula. The process begins with understanding the problem, auditing existing work, involving cross-functional partners, and choosing an approach that can evolve over time. ## Lay the Groundwork - Define why the design system is needed: - What problems should it solve? - What goals should it support? - How will success be measured? - Recognize that systems vary in scope: - Small teams may need a simple component library. - Enterprise organizations may require a comprehensive system. - Design the system to grow as product and team needs change. ## Take Stock of Existing Design and Code - Collect screenshots and examples of the product across: - Platforms and devices - Interactive states - Alternate versions - Look for recurring patterns and consistent UI elements that can become system foundations. - Audit the codebase for existing reusable components, shared CSS variables, and repeated UI patterns. - Build on existing engineering work instead of creating disconnected design and development systems. ## Organize and Evaluate the Product Landscape - Categorize the collected examples to understand the current design language. - Identify: - Inconsistencies across products or platforms - Redundant solutions - Disconnected user experiences - Problems being solved differently by designers and developers - Use these findings to prioritize where a unified system can provide the greatest value. ## Find Cross-Functional Champions - Involve designers, developers, product managers, and other stakeholders. - Seek people who care about consistency and can advocate for the system internally. - Include developers early because they can assess: - Technical feasibility - Implementation requirements - Long-term maintenance - A design system can begin with a single dedicated contributor, but broader collaboration helps it serve the whole product team. ## Choose an Approach - Decide whether to: - Build a custom system from scratch - Adopt an existing framework and adapt it to the organization’s needs - The best choice depends on the team’s goals, existing assets, technical context, and available resources. A practical starting point is to define measurable goals, audit both design files and production code, and form a cross-functional group before creating components. This ensures the design system addresses real product problems and remains useful as the organization evolves.

Design Tokens Figma Design Systems User Experience+3

figmaFeb 13, 20242 min readCurated summary

5 Things Designers Need to Know for a Smooth Handoff | Figma Blog

Design handoff should be treated as an ongoing process of communication and collaboration, not a single event at the end of design. The article argues that clear annotations, shared terminology, and organized files help ensure that “Ready for dev” genuinely means developers have the context they need. These practices reduce ambiguity while preserving conversations between designers and developers. ## Streamline and Clarify Callouts - Use annotations to explain design intent and highlight details that might otherwise be missed. - Focus callouts on information developers actually need, such as: - New components - Specific interactions not obvious from a prototype - Platform-specific differences - Specs, measurements, and behavior - Avoid duplicating information already captured through variables or styles. - Figma’s annotations in Dev Mode can pin measurements, properties, and notes directly to designs. - Annotations are intended to improve—not replace—designer-developer discussions. ## Adopt a Shared Language - Design and development may use different terms for similar concepts, so teams should align on naming early. - Clarify terms such as “toggle” or “switch” to avoid misunderstandings. - Coordinate variable, style, and component names with conventions already used in code. - Use variables and styles for foundational properties such as: - Fonts - Colors - Spacing - Shared names like `bg-primary-active` are more reliable than manually communicating hex codes or font specifications. - A color wheel within the design system can help teams consistently reference shades and tints. ## Organize Files with Labels - Infinite canvases can become difficult for developers to navigate, especially when they contain unfinished explorations. - Clean up and structure files before inviting developers to build. - Use sections to group related designs and reduce navigation overhead. - Mark completed sections or frames with a “Ready for dev” status so developers know where to focus. - Standardized team templates can reduce context switching and create a more predictable handoff process. A smooth handoff depends on shared context, precise communication, and intentional file organization. Designers should tailor annotations and terminology to their development partners, then clearly separate exploratory work from implementation-ready designs.

Design Tokens Figma Design Systems Dev Mode+3

figmaFeb 11, 20243 min readCurated summary

What Is a Design System | Design Systems 101 | Figma Blog

Design systems provide a shared foundation for designing and building consistent digital products. They combine principles, visual standards, reusable components, documentation, and development guidance to reduce duplication and prevent confusing or fragmented user experiences. Rather than limiting creativity, a well-designed system gives teams a common language and lets them focus on solving higher-level product problems. ## What a Design System Is - A design system is a collection of building blocks, standards, resources, and processes that guide product design and development. - It acts as a blueprint for an organization’s product ecosystem, covering: - Design tokens and technical specifications - Documentation and best practices - UX principles and decision-making processes - Brand, accessibility, and usability guidance - Its goal is to make products more consistent while reducing the time spent recreating common elements and patterns. ## The Three-Level Structure ### 1. The Design System - The highest-level container includes the organization’s overall guidance and evolving processes. - It may include design principles, documentation, technical specifications, tokens, and product-development standards. ### 2. Component and Pattern Libraries - Component libraries contain reusable interface elements such as buttons, input fields, and other UI controls. - Pattern libraries describe broader solutions, such as navigation flows, layouts, and data-display approaches. - These libraries can include: - Templates and layouts - Interaction patterns - Design components - Code snippets - Technical specifications - Usage documentation - They connect design and development by translating design intent into implementable code and shared practices. ### 3. Foundational Elements - Foundational elements establish the product’s visual language and voice. - Common examples include: - Color - Typography - Icons and logos - Illustrations - Voice and tone - Brand guidelines - Accessibility standards ## Design Systems Versus Related Resources - A component library focuses on individual UI elements, while a pattern library addresses complete interface solutions or user flows. - A design system is broader than a style guide: - Style guides mainly document visual elements such as colors, typography, and imagery. - Design systems also include components, coding standards, usability guidance, processes, and documentation. ## More Than Visual Consistency - Design systems influence the full user experience, not just appearance. - Consistent colors, icons, button behavior, language, and layouts help users understand and navigate products more easily. - The article challenges the idea that design systems eliminate creativity or force every design to look identical. - Instead, they handle repeated design and implementation decisions so designers can spend more time addressing unique product and user needs. A practical design system should be treated as an evolving shared foundation rather than a static style guide. Combining reusable components with clear standards, documentation, accessibility guidance, and development support helps teams scale product work without sacrificing consistency or usability.

Design Tokens Design Systems User Experience Accessibility+2

figmaJan 8, 20244 min readCurated summary

How Razorpay Sharpened Developer Workflows | Figma Blog

Razorpay built Blade, a cross-platform design system, to create consistent, accessible experiences across its many products while accelerating collaboration between designers and developers. Its success depends not only on reusable components, but also on adoption metrics, advocacy, developer tooling, and tight integration between design and code. Tools such as Blade Coverage, RazorSharp, Dev Mode, Storybook links, and Figma variables have significantly reduced handoff friction and improved productivity. ## Blade’s Cross-Platform Structure - Razorpay has around 70 designers and 100 front-end developers. - Three designers and five engineers work full-time on Blade. - Blade supports desktop web, mobile web, iOS, and Android through a shared API and common properties. - This allows developers to transfer knowledge between platforms without rebuilding the system for each one. ## Problems Blade Solved - Before Blade, teams frequently hard-coded custom components and missed details such as: - Button states - Text-field error handling - Accessibility requirements - Repetitive, ad hoc development led to inconsistent user experiences across Razorpay’s products and domains. - Blade provides: - A shared design and development language - More consistent experiences across products - Built-in accessibility - Faster collaboration and shorter time to market - Designers and developers are treated as Blade’s customers, while end users benefit from the resulting consistency and reliability. ## Driving Design System Adoption - Razorpay uses several strategies to reduce adoption friction: - Securing leadership support for funding and organizational adoption - Tracking metrics such as onboarded projects and the percentage of apps using Blade components - Holding office hours and maintaining a support Slack channel - Creating an advocacy group of designers from consumer teams - Announcing new components through demo videos and status-page updates - These practices make Blade visible, supported, and easier for individual teams to adopt. ## Measuring Impact and Coverage - Blade’s north star is enabling teams to ship polished interfaces while the system handles common design and implementation work. - Its adoption targets are: - 70% Blade usage for new features - 50% usage for existing product surfaces - Razorpay discovered that adoption begins during design, not just development. - The Blade Coverage plugin shows designers where their designs diverge from Blade components, helping them: - Identify issues earlier - Predict launch timelines more accurately - Reduce handoff friction - Quantitative metrics are supplemented with surveys and focus groups measuring speed, documentation, training, collaboration, and user experience. - These findings contribute to an annual Net Promoter Score for the design system. ## RazorSharp and Improved Developer Handoffs - Before Dev Mode, developers had to inspect designs manually, identify components and properties, and reproduce them in code. - A developer created RazorSharp as a private plugin that automatically generated equivalent code for designs. - Initially, Figma required edit access to run plugins, forcing developers to clone shared files before using RazorSharp. - When Figma introduced Dev Mode, Razorpay adapted RazorSharp to work there in just two days. - Developers can now inspect designs and generate implementation code without editing or duplicating files. - Dev Mode also includes links to Storybook, allowing developers to move directly from a design component to its code playground. ## Variables and Design Tokens - Razorpay is transitioning its design tokens to Figma variables. - This makes token copying more seamless and supports developer-friendly naming such as `surface.text.subtle`. - Spacing tokens are now mapped to variables, addressing a frequent request from consuming teams. - Variables make light and dark modes easier to implement without duplicating entire designs. - Previously, multiple themes and modes caused Blade files to consume large amounts of memory and slowed designers down. - Consolidating Blade into a single theme with variables has substantially improved design performance. Razorpay’s approach shows that a design system is most effective when it is treated as an internal product: it needs leadership support, measurable adoption goals, user support, and tooling that connects design directly to implementation. Teams building similar systems should invest in both component quality and the workflows that make those components easy to discover and use.

Design Tokens Figma Design Systems Web Development+3

figmaDec 5, 20232 min readCurated summary

Building a Design System That Breathes with Headspace | Figma Blog

Headspace rebuilt its design system to support rapid growth, multiple brands, and products spanning apps, wearables, and VR. Its previous system relied on hard-coded colors, manual processes, and plugins, making updates slow and creating inconsistencies. By adopting design tokens and Figma variables, Headspace created a scalable source of truth for designers and engineers that could evolve with the business. ## Challenges of the Previous System - Headspace served more than 100 million members across numerous products and partnerships. - The existing design system was manual and heavily dependent on plugins. - Hard-coded color values produced multiple hex-code variations and inconsistent experiences. - Even small palette changes could take the design systems team hours or days. - Plugins often required specialized knowledge, frequent resets, and workflows that were not intuitive for occasional users. - The system was designed for a single brand, creating problems when Headspace merged with Ginger, later rebranded as Headspace Care. ## Preparing for Multiple Brands and Future Growth - Senior product designer Steven Sczepanik audited the existing system after the merger announcement. - He rebuilt components and patterns so they were easier for designers and engineers to find and use. - The redesign established Headspace’s first formal token system. - Tokens created a shared language for foundational properties such as colors and typography. - The system was designed to support Headspace Care and future partnerships without requiring separate, disconnected systems. ## Replacing Plugins with Figma Variables - Headspace converted its color tokens and typography into Figma variables. - Variables replaced many plugin-based workflows with a native Figma solution. - Steven implemented the initial color and typography variables in about a day, compared with two years spent developing the broader previous system. - The new approach made theme changes and system-wide updates faster and more reliable. - Designers and engineers gained a more dependable source of truth for shared design decisions. ## A Design System That Can Evolve - Headspace’s design system now supports a growing ecosystem of brands, platforms, and experiences. - Centralized tokens reduce duplication and improve consistency across products. - Native variables make the system easier to maintain as the visual identity changes. - The work demonstrates that scalable design systems must accommodate organizational change, not just reuse components. Headspace’s experience suggests that teams preparing for growth should replace hard-coded values and fragile plugin workflows with structured tokens and native variables. This creates a more flexible foundation for consistent design across brands, products, and future expansion.

Design Tokens Figma Design Systems Design Variables+2

figmaDec 5, 20232 min readCurated summary

All Your Questions About Variables Answered (and a Few You Didn’t Even Know You Had) | Figma Blog

Figma’s latest variable updates expand design customization while bringing design systems closer to code. Variables can now control more visual properties and respond to different modes, making responsive, platform-specific designs easier to manage. The post presents variables as more flexible than traditional tokens and highlights their potential for both practical systems work and highly creative prototypes. ## Variables Enable Broader Customization - Designers are using variables for applications ranging from production design systems to interactive, game-like creations. - Unlike regular tokens, variables are open-ended and support more flexible customization. - Figma points to Headspace as an example of using variables to improve design-system efficiency and collaboration with developers. - Beginners can start with Figma’s dedicated variables guide and community file. ## New Properties That Support Responsive Design - **Reactive effects:** Variables can control blur sizes, drop-shadow colors, and offset distances, allowing effects to change by mode. - **Dynamic stroke weights:** Designs can use different stroke weights for platforms such as desktop and mobile. - **Layer opacity:** Opacity fields can be bound to variables for more nuanced visual control. - **Adaptable layout grids:** Grid settings can switch between modes, supporting pixel-perfect desktop and mobile layouts. - **Individual corner radii:** Each corner radius can be controlled independently through variables. - **Nested instance variant binding:** Variables can be applied to component instances nested within other components, enabling more complex component structures. ## Connecting Design and Code - The updates are intended to align design variables more closely with how values are managed in code. - Mode-based values make it easier to represent platform, theme, or responsive differences within a single design system. - Figma indicates that typography is an area planned for further variable support. Overall, the post recommends adopting variables as a flexible foundation for scalable design systems, responsive interfaces, and richer prototypes—especially when designers and developers need a shared source of truth.

Design Tokens Figma Design Systems Responsive Design+2

figmaAug 30, 20233 min readCurated summary

How Spotify’s Design System Goes Beyond Platforms | Figma Blog

Spotify’s expansion to 45 platforms and more than 2,000 device types exposed inconsistencies between its product experiences. The company evolved Encore from separate mobile and web systems into a cross-platform design system focused on shared foundations and reusable components. Its goal is to make Spotify feel coherent everywhere without erasing the distinctive strengths of each platform. ## The Challenge of Consistency at Scale - Spotify’s 2019 ubiquity strategy aimed to make audio available across TVs, cars, computers, phones, and many other devices. - The design team needed more than broad platform coverage: users should recognize the experience as distinctly Spotify wherever they use it. - Components became central to achieving this consistency, from defining their scope to implementing them across products. ## The Birth and Evolution of Encore - When introduced in 2019, Encore had two main subsystems: - **Encore Consumer Mobile**, a flexible catalog of mobile-focused UI components. - **Encore Web**, supporting a wider range of web products. - Both systems used shared design tokens for foundational decisions such as colors and typography. - Over time, differences in component sizing, typography, and state treatments revealed that the subsystems needed greater commonality. - By 2022, flexibility had created too much divergence, prompting Spotify to rebalance the system toward reusable, consistent components. ## A Shared Layer Between Foundation and Products - Spotify created a specialized team focused on reusable components for Encore Mobile. - This new layer sits between the foundational system and Encore Consumer Mobile. - It acts as a “first line of defense,” reducing the need for product-specific teams to build every component themselves. - Developed in collaboration with Encore Web, the layer establishes platform parity from the beginning rather than retrofitting consistency later. ## Designing Components Across Platforms - The overall workflow remained familiar: research, design, and development. - The major change was coordinating design work across iOS, Android, and Web instead of designing for one platform in isolation. - Components are intended to share a coherent visual and behavioral language while still adapting to platform-specific requirements. - This requires collaboration among specialists, since web and mobile designers bring different domain expertise. - Spotify begins by bringing platform teams together and researching each platform’s unique characteristics before creating the shared component. Spotify’s approach treats a design system as more than a collection of platform-specific libraries. By establishing shared components early and combining them with platform-aware design, teams can create experiences that feel unified without sacrificing the qualities that make each device and interface effective.

Design Tokens Design Systems Android iOS+3

figmaJul 26, 20232 min readCurated summary

The Future of Design Systems is Semantic | Figma Blog

Design systems are moving from static component libraries toward semantic, reusable values that connect design and code. Figma argues that variables extend design tokens by supporting theming, dynamic prototypes, and platform-agnostic reuse. This shift can make large-scale systems more consistent and easier to maintain. ## Variables as the Next Step for Design Systems - Figma variables store reusable values for design properties and prototyping actions. - They reduce repetitive work and help teams manage complex design systems. - Unlike static tokens, variables can change based on context, enabling: - Design theming - Dynamic prototyping logic - Closer alignment between design and code - Figma introduced variables alongside Dev Mode and other features intended to connect designing and building. ## The Design Token Foundation - Design tokens represent repeatable decisions such as: - Colors - Typography - Sizing - Border radii - Numbers and strings - Tokens separate design properties from specific components or implementation details. - A single token can be updated centrally and propagated throughout one or multiple products. - This platform-agnostic structure reduces redundancy and helps maintain consistency. - Salesforce is often credited as an early design-token pioneer, using tokens to apply shared principles across platforms. ## Google Maps and Palette Governance - Google Maps discovered its product used more than 700 colors. - The team reduced the palette to 25 hues by removing subtle tones and transparency effects. - Tokens helped document and distribute the smaller palette. - Centralized values make it easier to prevent a carefully designed system from gradually expanding back into uncontrolled variation. ## From Tokens to Semantic Systems - Tokens codify design decisions, but variables add behavior and flexibility. - Their reusable, changeable values support broader system-level use cases than fixed tokens alone. - Figma presents this evolution as part of a larger industry shift toward design systems that express meaning and relationships rather than merely storing visual values. Teams should treat tokens and variables as shared semantic infrastructure: define reusable values centrally, connect them to implementation, and use contextual variation deliberately for themes and interactive experiences.

Design Tokens Figma Design Systems Prototyping+2