figmaDec 5, 2023

Building a Design System That Breathes with Headspace | Figma Blog (opens in new tab)

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.

themingfigmadesign-systemsdesign-tokens+2

figmaNov 9, 2022

Taking cues from code | Figma Blog (opens in new tab)

Design systems are becoming more complex as teams collaborate across interconnected products, and Figma argues that design can learn from software engineering. The goal is to introduce structure without eliminating creative flexibility. The article highlights component composition and decoupling structure from presentation as ways to make systems more adaptable and scalable. ## Design Borrowing from Code - Design was once largely local and isolated, with files stored on individual machines. - Modern design involves larger teams, shared ecosystems, and dependencies across products and files. - Design systems help maintain consistency and quality at scale, but excessive structure can restrict exploration. - Figma sees software engineering patterns as useful models for handling this complexity. ## Nesting Components for Flexible Layouts - Simple systems can represent variations through component variants. - As the number of layouts grows, maintaining every variation separately becomes difficult. - Component properties can support limited optionality, such as cards with or without images or pull quotes. - Properties are insufficient when components differ substantially in orientation and structure. - Composition offers a more flexible approach: - Designers create small, reusable sub-components. - These sub-components are nested inside larger, layout-specific components. - The same building blocks can be recombined into many arrangements. - This reduces the need to anticipate every possible layout when designing the system. ## Decoupling Structure from Presentation - Basic design systems often hard-code a single visual theme into each component. - Teams may later add light and dark modes, followed by themes for different products, brands, or sub-brands. - As the number of themes increases, maintaining colors and styles becomes increasingly burdensome. - The article introduces headless design systems as an architectural response to complex theming requirements, separating a component’s underlying structure from its visual presentation. A scalable design system should favor composable building blocks and flexible theming rather than attempting to encode every possible layout and brand variation directly into monolithic components.

themingdesign-systemsdesign-tokenscomponent-architecture+2