figmaOct 20, 2025

Design Systems: From the Basics to Big Things Ahead | Figma Blog (opens in new tab)

Design systems create consistency at scale while connecting design work to production. The post argues that as AI accelerates product development, organizations need a well-documented, shared foundation more than ever. It offers a progression from design-system fundamentals to adoption and measurement, alongside examples and resources for teams at different maturity levels. ## Design Systems 101 - Design systems evolved from: - Graphic-design and print-era style guides - Typographic standards and brand guidelines - Digital systems created by companies such as IBM, Microsoft, Apple, and Google - These systems translated visual and interaction standards from paper into digital interfaces. - The National Park Service’s adaptation of Massimo Vignelli’s 1977 design system illustrates how established systems can be carried into modern digital products. - Figma’s design-system series is intended for both teams starting their first system and organizations scaling existing ones. ## Documentation Drives Adoption - Documentation turns abstract principles into practical guidance for designers and developers. - It provides a shared reference point and helps users understand how to work with system tools and components. - Alaska Airlines prioritized documentation for its Auro design system, including guidance for Figma features such as auto layout and branch merging. - Documentation must serve different roles: - Some users need detailed specifications. - Others benefit from high-level explanations or visual examples. - As more roles participate in product design, documentation needs to remain clear, accessible, and relevant. ## Measuring Design-System ROI - Organizations can evaluate business impact through: - Component usage - Adoption rates - Consistency scores - Metrics can reveal not only whether a system is being used, but also where it needs improvement. - At athenahealth, increased detachments from a container component prompted investigation. - Detaching may indicate: - A component bug - Missing functionality - Unexpected combinations of existing elements - These signals help design-system teams prioritize fixes and enhancements. The practical recommendation is to treat a design system as an evolving product: establish strong foundations, document them for varied audiences, and use adoption and usage data to continually improve the system.

component-libraryfigmaaidesign-systems+3

figmaApr 7, 2025

How to Streamline Your Design System Workflow in Figma | Figma Blog (opens in new tab)

Figma’s latest design-system updates reduce the repetitive work involved in organizing variables, styles, components, and documentation. The post combines nine quality-of-life improvements with a set of plugins covering the workflow from color and typography foundations through documentation, component specs, and code handoff. Together, these tools aim to make design systems faster to build, easier to maintain, and more useful to developers. ## Reordering Modes and Collections - Modes and variable collections can now be rearranged with drag and drop. - Existing modes and IDs remain intact, avoiding resets, broken dependencies, or out-of-sync designs. - Teams can: - Move frequently used collections to the top. - Group related modes. - Reorganize collections during rebrands or product-line updates. - The default mode can also be changed more easily. ## Nine Quality-of-Life Improvements Figma introduced several smaller improvements intended to remove workflow friction: - A shortcut for jumping directly to a component’s main source. - The ability to duplicate and copy styles. - Options to hide and reveal variable paints. - A clearer component-description interface. - A variable modal that can be dragged from anywhere in its header. - Automatic saving for variable changes. - Tooltips that provide context for component names. - Better alignment for the Edit button. - Improved text overflow handling for long style names. ## Building the Foundations The post recommends using community plugins to accelerate the foundational work of creating colors, typography, spacing, and other core design-system decisions. ### Creating Color Palettes The highlighted tools support different aspects of color-system creation: - **CSS color-mix()** helps create color palettes and gradients. - **Colorbox** generates complete color ramps. - **The Genome Color Tool** helps build color scales that meet WCAG accessibility requirements. ### Establishing Typography and Variables - **Peppercorn** assists with setting up an entire type system. - **Print Variables** creates sticker sheets for variable collections. - **Auto Documentation** generates visual documentation for variables. - **Variables and Styles List** presents variable sheets inside a Figma canvas widget. ## Documenting Components and Styles Documentation tools help teams make systems easier to understand and adopt: - **Propstar** maps component property and prop variations. - **Specs** generates component specifications. - **Similayer** filters for particular layers and properties. - **Style Finder** locates styles across pages. These tools can reduce the manual effort required to explain component behavior and find existing design decisions. ## Bridging Design and Development The recommended implementation tools connect Figma variables and styles with code: - **CTRL Var** supports variable renaming. - **Export Import Variables** moves variables into or out of Figma. - **Handoff** copies CSS variables quickly. - **Variables Converter** translates variables into code. - **Shaper** helps manage token architecture and generate CSS. ## Practical Recommendation Start with Figma’s built-in improvements for organizing collections, modes, styles, and variables, then add plugins selectively for color generation, documentation, component specification, and code handoff. The goal is not to use every tool, but to create a repeatable workflow that keeps design-system foundations consistent and makes implementation easier for developers.

component-libraryfigmadesign-systemsdesign-tokens+4

figmaJan 22, 2025

Documentation That Drives Adoption | Design Systems 103 | Figma Blog (opens in new tab)

Clear documentation turns a design system from an abstract set of rules into a practical tool teams can use consistently. The article argues that effective documentation must explain both how to implement components and why design decisions were made. When treated as a living resource, it improves adoption, onboarding, cross-functional communication, and product consistency. ## Documentation Bridges Design and Development - Razorpay’s teams often missed details such as button states and text-field error behavior before adopting its Blade design system. - Custom, hard-coded implementations made it easy for teams to omit important states or interactions. - Designers and developers may use different terminology, leading to: - Inconsistent naming conventions - Misaligned component properties - Different expectations about product behavior and appearance - Documentation connects design intent with technical implementation. - It should capture the reasoning behind decisions, not merely catalog available components. ## Benefits of Effective Documentation - Helps teams understand design principles and implementation details. - Encourages consistent decisions across products and platforms. - Speeds up onboarding for new team members. - Creates a shared language between designers and developers. - Reduces the risk that a carefully built design system will go unused. ## Choosing a Source of Truth - The first documentation decision is determining where information should live, rather than deciding what to write first. - Maintaining consistency becomes more difficult as design systems and organizations grow. - Static PDFs stored in shared drives quickly become outdated and disconnected from daily workflows. - Modern teams can choose among dedicated documentation sites and collaborative workspaces. - The best source of truth should fit the organization’s tools, processes, and scale. ## Custom Documentation Sites - Custom sites are particularly useful for large organizations. - They can integrate deeply with existing design and development tools and organizational processes. - A dedicated site provides a centralized, discoverable location for design principles, components, usage guidance, and implementation details. Effective design-system documentation should be centralized, searchable, and continuously maintained so that it remains aligned with both the system and the teams using it.

component-libraryfigmadesign-systemsdesign-tokens+3

figmaNov 12, 2024

Updating Our Web System For A New Era | Figma Blog (opens in new tab)

Figma refreshed its web design system to support the company’s evolution from a single design tool into a broader platform for product teams. The previous system had accumulated overly similar components, inflexible colors, and typography that no longer suited its content. By auditing real-world usage and simplifying its component library, Figma created a more focused, flexible foundation aligned with its new brand. ## Why the Web System Needed to Change - Figma’s 2020 website was designed primarily to introduce a new design tool. - By 2024, Figma had expanded into a platform serving many kinds of product teams. - The existing system had begun to create friction: - Many components differed only slightly, making selection difficult. - The color system could not accommodate the evolving brand palette. - Typography was not flexible enough for the range of content Figma now produced. - The brand refresh—including Figma Sans, a new color palette, and a revised illustration style—created an opportunity to update the website system as well. ## Auditing and Simplifying Components - The Web Experience team created a script to measure: - Which components were being used - How frequently they appeared - Which pages used them - The audit exposed unnecessary complexity and opportunities to consolidate similar options. - The “Flex” component had grown to 48 variants over time. - After reviewing actual usage, Figma reduced it to 24 variants while preserving its essential functionality. - The team removed centered text as an option and established left alignment as the default across the web system. - The resulting property panel was more focused, easier to navigate, and better aligned with the refreshed visual language. ## Building a More Flexible System - Simplifying the library gave designers and content builders a smaller set of stronger, more purposeful choices. - Figma created templates for common page layouts. - New “building block” components can be combined in different ways to produce on-brand pages. - The system’s atomic elements include inputs, primitives, icons, and navigation components. Figma’s approach demonstrates the value of auditing how a design system is actually used before expanding it further. Removing redundant variants, establishing consistent defaults, and providing reusable templates can make a system easier to use while keeping it flexible enough for future growth.

component-libraryfigmadesign-systemstypography+1

figmaJul 29, 2024

HP Powers Up Design Handoff with Dev Mode | Figma Blog (opens in new tab)

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.

component-libraryfigmadesign-systemsdesign-tokens+2

figmaJul 10, 2024

Crafting the Visual Identity for Config 2024 | Figma Blog (opens in new tab)

Figma’s Brand Studio created Config 2024’s visual identity as an immersive extension of the Figma brand. Inspired by the redesigned Figma canvas and Figma Slides, the team developed a flexible, shape-based system that could work across a massive physical and digital conference experience. The result balanced visual variety with practical UX needs for more than 10,000 in-person attendees and a larger virtual audience. ## Balancing Form and Function - The team drew inspiration from switching between different modes of making, such as creating, sharing, and presenting work. - They developed a visual language centered on shapes that could: - Shift and transform - Amplify creative ideas - Reveal unexpected perspectives - Represent collaboration and multiple modes of creation - Three large physical supergraphics formed the conference’s central installations. - Attendees used them as seating, photo backdrops, and meeting points. - The identity was designed not only for visual impact but also for usability. - It supported complex experiences such as registration and navigating popular talks. - The system helped guide attendees through the event while maintaining a cohesive look. - Simple primitive shapes served as the foundation for more complex graphic structures. ## Designing at Scale - Config required a large volume of assets across physical spaces, digital surfaces, signage, merchandise, and other touchpoints. - The team created a modular system that could remain consistent without becoming repetitive. - Its core shapes came directly from the Figma toolbar: - Rectangle - Circle - Polygon - These basic forms reflected the starting point of the design process in Figma and became components of larger supergraphics. - The team built a reusable component library in Figma to generate variations efficiently. - Each supergraphic included three variants, allowing shapes to be presented from different angles and creating visual variety across the conference. Figma’s approach demonstrates how a strong event identity can combine expressive branding with a practical, reusable design system. By treating simple interface primitives as flexible building blocks, the team created a conference experience that could scale across environments while remaining recognizably Figma.

component-libraryfigmadesign-systemsux-design+1

figmaApr 15, 2024

How Carvana Fuels Consistency and Scale | Figma Blog (opens in new tab)

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.

component-libraryfigmadesign-systemsdesign-tokens+4

figmaApr 9, 2024

The Anatomy of a Component Sprint | Figma Blog (opens in new tab)

The Washington Post’s design system team developed a roughly 10-day “component sprint” to replace siloed, linear workflows with continuous designer–developer collaboration. Each component is jointly planned, designed, implemented, refined, and documented, with input from the wider team throughout. The process aims to reduce miscommunication, uncover technical constraints early, and create components that serve real product needs. ## Why the Component Sprint Was Needed - The Washington Post launched its design system in 2019 to help teams deliver news experiences quickly and consistently. - Earlier components followed either: - A design-led process for inputs such as selects, radios, and checkboxes. - A developer-led process for technically complex components such as carousels and search inputs. - Both approaches caused delays, unexpected compromises, and gaps in communication. - Designers sometimes overlooked existing components or pursued custom solutions, creating overrides and last-minute requests for new variants. - Developers could be forced to focus on visual details instead of solving technical and product problems. - The new process brings the relevant people together early and gives designers and developers shared ownership. ## Sprint Structure and Shared Ownership - A designer and developer from the core design system team lead each component from beginning to end. - Every planned component receives its own sprint, although the timeline can vary. - The approximately 10-day process is intentionally open and inclusive rather than closed and sequential. - The wider team contributes feedback and expertise at multiple stages. ## Kickoff: Balancing Impact and Effort - The team holds a weekly 30-minute meeting to evaluate candidate component tickets in Jira. - Ideas are prioritized according to potential impact and required effort. - Jira tickets serve as shared, evolving spaces where stakeholders can: - Leave feedback asynchronously. - Record insights from Slack discussions. - Group related ideas. - Connect proposals to business goals. - An impact-versus-effort matrix visualizes priorities: - Larger circles represent ideas with more votes. - Numbers identify clusters of related ideas. - Colors indicate associated business goals. - Once a ticket is prioritized, a designer and developer are assigned to lead delivery. ## Concept: Defining Scope and Goals - The sprint begins with a two-hour meeting involving the wider team. - In a FigJam file, participants: - Define the component’s goals. - Agree on requirements. - Assess the scope of work. - Clarify assumptions and technical needs. - The meeting reserves the final 15 minutes for review. - Using FigJam enables both technical and non-technical contributors to participate. - The team focuses first on shared expectations and requirements, avoiding premature debate over detailed visual design. The component sprint provides a practical framework for building design-system components collaboratively: prioritize openly, pair design and development from the start, and establish scope with broad input before implementation begins.

component-libraryfigmadesign-systemsfigjam+3

figmaApr 7, 2024

How to Build a Design System | Design Systems 102 | Figma Blog (opens in new tab)

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.

component-libraryfigmadesign-systemsui-design+3

figmaJan 25, 2024

Six Myths Holding You Back from Embracing Design Systems | Figma Blog (opens in new tab)

Design systems are not reserved for large companies or teams with advanced design practices. Figma argues that the best system is practical, goal-oriented, and tailored to an organization’s brand, users, and needs—not copied from industry trends or famous examples. By challenging common assumptions, teams can adopt design systems more confidently and incrementally. ## Design Systems Benefit Teams of All Sizes - Small organizations can use design systems to improve efficiency, consistency, and collaboration. - The system’s scale and appearance may vary, but its core purpose remains the same. - Mixpanel’s redesign is cited as an example of using a design system to reduce costs, improve consistency, and make analytics more accessible. ## A Design System Does Not Need Every New Technique - Design trends change constantly, and no single approach is universally correct. - Teams should learn from industry practices without becoming distracted by building a “perfect” or fashionable system. - A useful design system should serve clear organizational goals rather than imitate the latest trends. ## Material Design Is Not a Universal Solution - Google’s Material Design is influential, but it is not automatically suitable for every organization. - Design systems should reflect a company’s brand identity, user needs, and business objectives. - Teams should balance established standards with solutions appropriate to their current context. - Examples such as Uber Base, Spotify Backstage, Pipedrive, Microsoft Teams, and Salesforce Lightning demonstrate that successful systems can differ significantly. ## You Do Not Have to Build Everything From Scratch - The article begins addressing the misconception that every design system must be created internally from the ground up. - Open-source design-system resources and existing UI kits can provide a starting point. - Reusing proven foundations can help teams move faster while adapting components to their own requirements. The practical recommendation is to start with the problems your team needs to solve, then adopt or create only the structure necessary to address them.

component-librarydesign-systemsopen-sourcedesign-thinking+3

figmaSep 21, 2023

What Codegen Is (Actually) Good For | Figma | Figma Blog (opens in new tab)

Code generation is most useful as an augmentation to the design-to-development process, not as a replacement for developers. Figma found that fully automated design-to-code output often fails because teams use different frameworks, codebases, and patterns. Instead, codegen works best when it provides context, suggestions, and a useful starting point that developers can refine themselves. ## Codegen’s Broad Ecosystem - Codegen automatically produces code from rules or specifications. - It ranges from: - IDE completion tools such as Microsoft IntelliSense - Reusable templates and snippets - Visual programming and no-code platforms such as Bubble - AI assistants such as GitHub Copilot and Replit Ghostwriter - AI codegen adoption is high: 82% of developers surveyed by Stack Overflow in 2023 said they already write code with AI tools. - Trust remains low, however; fewer than 3% reported highly trusting the accuracy of these tools. ## Why Fully Automated Design-to-Code Falls Short - Figma initially envisioned Dev Mode as a way to automate design-to-code conversion. - Early results were promising, but developers often found the generated code impractical or not useful. - Producing code that fits a wide range of frameworks, architectures, and team conventions is difficult. - The better goal is “intelligence amplification”: technology should extend a developer’s capabilities while keeping the developer in control. ## From 0 to 0.5 - Codegen is particularly effective at helping developers move from a blank screen to a partial implementation. - In products with established design systems and component libraries, it can: - Suggest the appropriate component - Surface component names and property values - Reduce guesswork during design handoff - Rather than generating a complete solution, codegen helps developers reach a useful starting point faster. ## Applying Codegen to Existing Design Systems - Codegen delivers the most value when customized for a specific team, company, and workflow. - If a design system and component library already exist in Figma, teams may not need a separate automated design-to-code application. - More useful alternatives include: - Referencing design tokens and variables - Viewing component documentation - Building a Figma codegen plugin - Generating custom code snippets - These tools help developers understand a design quickly while allowing them to write code that matches their own codebase. The practical recommendation is to use codegen as a guided assistant: provide suggestions, reusable patterns, and context, but leave architectural decisions and final implementation to developers.

component-libraryfigmadesign-systemsdesign-to-code+4

figmaJul 18, 2023

The Shared Language of Props | Figma | Figma Blog (opens in new tab)

Design and engineering use the same component vocabulary, but often attach different meanings to terms such as “property,” “variant,” and “button.” Figma properties primarily describe visual variations, while code props may also control behavior, events, data, and rendering. Effective collaboration therefore requires translating concepts across environments rather than assuming identical names imply identical implementations. ## Components and Properties as Shared Concepts - Components are reusable elements governed by rules describing how they can look and behave. - Properties, or “props,” define the possible expressions of a component, including: - Variants - Boolean values - Instance swaps - Text values - In Figma, properties are used mainly to represent visual differences. - In code, props can also represent non-visual concerns such as event handlers and data. - A shared term can conceal different assumptions when designers and developers work in different tools and contexts. ## A Button Is Not the Same Everywhere - Designers and developers both work with buttons, but prioritize different concerns: - Designers focus on visual consistency and maintainability across design files. - Developers focus on interactivity, rendering, accessibility, and implementation. - A Figma button and a code-based button may share a name without sharing the same API or purpose. - Migrating a React and TypeScript application to a design-system-based frontend exposed conflicts between Material UI conventions and the organization’s custom design system. - The component library aimed to be intuitive and lightweight for full-stack engineers who primarily connected frontend and backend systems. ## Divergent Component Models - The design system contained two Figma components: - `Button` - `IconButton` - The codebase contained five button components. - Figma’s `Button` and `IconButton` did not use the same inheritance or primitive-component structure as the codebase. - Some properties, such as size and color variants, were duplicated in Figma because that structure better represented the design model. - Although the components shared names and broad concepts, they did not share the same purpose or complete set of properties. Teams should treat design and code components as related models rather than identical ones. Clear translation of property names, meanings, and responsibilities can preserve each environment’s strengths while reducing misunderstandings during implementation.

component-libraryfigmadesign-systemsreact+3

figmaSep 2, 2020

Making Design Within Reach for online shoppers | Figma Blog (opens in new tab)

Design Within Reach (DWR) redesigned its e-commerce site to recreate the personalized showroom experience online, responding to changing consumer expectations and increased online shopping during COVID-19. In partnership with BASIC®, DWR adopted a transparent, collaborative workflow using Figma, conducted extensive customer research, and launched a responsive site with live sales support. The redesign increased sales and established a scalable design system for Herman Miller’s broader family of brands. ## A Transparent Agency Partnership - DWR partnered with BASIC® to combine the agency’s e-commerce expertise with DWR’s internal brand and product knowledge. - Both organizations worked as one co-creative team rather than in separate workstreams. - Shared Figma files allowed designers in different companies and time zones to collaborate in real time. - Continuous access to the latest files eliminated version-control issues and effectively created 14-hour workdays across teams. - Figma prototypes also made it easy for executives and other stakeholders to review progress through shareable links. ## Bringing the Showroom Experience Online - The redesign was informed by 110 hours of customer research and testing with more than 200 participants. - Interactive Figma prototypes enabled rapid usability testing and iteration. - The site launched in July 2020 with responsive layouts and video chat connecting shoppers with sales associates. - Customers using the new live chat features were nine times more likely to complete an online purchase. - DWR saw an immediate increase in purchases after launch instead of the typical temporary decline following a major website release. ## A Scalable Design System - The redesign became the foundation for Herman Miller’s first design system spanning multiple brands. - DWR and BASIC® created a shared set of reusable components and a consistent visual language. - Developers can implement standardized components more quickly. - Content authors can assemble pages by dragging in prebuilt components, updating images, and editing text. - Cloud-based Figma libraries make it easier to share assets and scale the system across internal teams and external partners. DWR’s experience suggests that combining close agency collaboration, user-centered research, real-time design tools, and reusable components can make complex showroom-style retail experiences effective online while preparing a brand for future growth.

component-libraryfigmadesign-systemsux-design+3

figmaSep 1, 2020

Creating multi-brand design systems | Figma Blog (opens in new tab)

Design systems should provide consistency and speed without becoming rigid constraints. Shopify, Condé Nast, and Harry’s emphasize flexible architectures, brand-specific tokens, continuous iteration, and strong connections between design and code. The most effective system is one that adapts to changing needs while remaining simple enough for teams to use. ## Flexibility Over Rigidity - Overly prescriptive rules can limit creativity and push designers outside the system. - Harry’s uses layered architecture: - Base components offer simple, low-complexity solutions. - More advanced layers, such as starter kits, support custom work. - This approach makes the standard path efficient while preserving room for exploration. - Condé Nast uses modular components and design tokens to support brands such as *Vogue*, *The New Yorker*, and *Bon Appétit*. - A token can represent the same purpose while holding different values—for example, “prominent text” can map to a different font for each brand. ## Design Systems Must Evolve - Building a system is only the beginning; teams must observe how it performs in real use. - Analytics and usage data help identify which libraries and components are being used and where changes are needed. - Shopify aims to create systems that “bend but not break,” rather than polished artifacts that teams are afraid to modify. - Teams should watch how the system fails—including how it affects end users—in order to improve and reinvent it. ## Connecting Design to Code - Translating design components into code improves efficiency and reduces friction between designers and engineers. - Condé Nast stores its token system in JSON and uses a custom plugin to import and export token changes. - This setup helps the company launch new markets quickly while maintaining a smooth design-to-development handoff. - Even teams without multiple brands can start by associating a purpose with each value, such as naming a color or typography style by its intended use. - Purpose-based naming exposes unnecessary complexity and makes systems easier to evaluate. ## A System Designed for the Team - There is no universal design-system model. - The right structure depends on a team’s size, organization, technical environment, and priorities. - Systems should establish useful foundations while leaving enough flexibility for different products, brands, and future requirements. Teams should begin with simple, reusable foundations, connect design decisions to code where practical, and continually revise the system based on actual usage rather than treating it as a finished artifact.

component-librarydesign-systemsjavascriptdesign-tokens+2

figmaJan 27, 2020

Figma on Figma: How we built our website design system | Figma Blog (opens in new tab)

Figma built its website design system to address inconsistent pages, duplicated solutions, and a difficult maintenance process. By auditing existing patterns, consolidating visual styles, and creating reusable components in Figma and Contentful, the marketing team established a flexible system that supports consistency without limiting creativity. The result is faster production: teams can move from concept to a live page in as little as one day, often without writing new code. ## Taking Inventory - The team cataloged existing fonts, sizes, colors, layouts, column widths, and other visual patterns in a shared Figma file. - This revealed: - Repeated patterns that could be unified - One-off components that did not belong in the style guide - Large page elements that could be broken into smaller reusable parts - The team applied an atomic approach, combining small “atoms” and “molecules” into flexible page “organisms.” - Similar but inconsistent elements were standardized: - Twelve heading sizes became H1–H3 styles - Body and technical text received defined styles - Long-form content gained pull-quote and block-quote styles - The refined components were organized into a shared library so even people unfamiliar with Figma’s brand could create cohesive pages. ## A Simplified, Flexible Design System - In about a month, the team created a robust style guide and component library integrated with Contentful. - The system standardized: - Typography - Spacing and padding - Line heights - Colors - Grid behavior - Designers could assemble pages from ready-made building blocks rather than recreating common elements. - Frequently paired elements and complete sections were turned into larger reusable components called “FLEGOs,” combining Figma and LEGO. - These components were designed to work together in many combinations, supporting different content and page layouts. ## Faster Marketing Production - Most of Figma’s core marketing site now uses the design-system framework. - Contentful allows the team to build and publish pages without requiring new code for each page. - A product marketer and web producer created the “What’s New” page by: - Wireframing with FLEGOs - Collaborating on copy in Figma - Building the final page from CMS components - The page went from idea to launch in under 48 hours, demonstrating how reusable components accelerated the process. Figma’s experience shows that a website design system should be both standardized and flexible. Auditing existing work, consolidating repeated patterns, and making components accessible through design and content tools can improve consistency while significantly reducing production time.

component-libraryfigmadesign-systemsatomic-design+2