figmaMar 12, 2025

How eBay Built a Bridge Between Brand and Product with Figma | Figma Blog (opens in new tab)

eBay rebuilt its design-system documentation to unite brand, product, accessibility, and engineering guidance in one evolving experience. Its new Evo system is centered on the 300-plus-page Playbook, which replaces scattered, manually maintained files with a centralized source of truth. By making Figma the starting point for content and automating validation and publishing, eBay reduced documentation updates from days to minutes and encouraged teams to treat documentation as part of their normal workflow. ## Rebuilding from the Ground Up - Before Evo, documentation was spread across separate Figma files, developer resources, and accessibility guidelines. - Designers manually updated static files and submitted tickets for changes to be published. - eBay’s OneExperience team chose to rebuild the process internally rather than patch the old system or rely on an external agency. - The goal was a system integrated with everyday design and development work, rather than documentation maintained as a separate task. ## Bringing Brand and Product Together - The new Playbook combines brand guidance, design-system documentation, technology resources, and accessibility information in one destination. - It acts as a centralized source of truth for both internal teams and agency partners. - Component pages include design, development, and accessibility views. - Component availability and implementation status are updated from library metadata instead of manually maintained tables. ## Component Status Across Platforms - eBay created an internal Component Status API to track components across its libraries. - The API records component names, versions, availability, and implementation status across: - Published Figma libraries - Native platform libraries - Open-source web-component libraries - Figma components store relevant metadata in their descriptions. - Developers can verify whether a component exists in their framework, whether it matches the Figma version, and whether the Playbook documentation is current. ## Automating Documentation Updates - eBay built a custom Figma plugin and exporter that powers the documentation workflow. - Components, guidelines, and accessibility notes originate in Figma. - Updates are linted, validated, and published directly from Figma without manual CMS work. - Changes that previously took days can now appear on the Playbook site in under two minutes. - Faster publishing makes documentation easier to iterate on and helps teams view it as a living part of their workflow rather than an administrative burden.

component-librariesfigmadesign-systemsaccessibility+3

figmaAug 19, 2024

How Crunchyroll Clarified Confusing Workflows with Dev Mode | Figma Blog (opens in new tab)

Crunchyroll’s global scale—15 platforms, 12 languages, and many legacy workflows—makes consistent product design difficult. Its Universal Design System helps standardize experiences and improve delivery speed, but outdated processes and fragmented documentation created confusion. Moving handoff and implementation guidance into Dev Mode has made design-to-development collaboration faster, clearer, and easier to maintain. ## Crunchyroll’s Design Complexity - Crunchyroll serves around 15 million fans across: - Web and mobile applications - Smart TVs, game consoles, set-top boxes, and Roku - Nine living-room platforms - Supporting multiple languages and complex licensing requirements increases product complexity. - The company also extends beyond streaming through the Crunchyroll Store and Game Vault. - Its goal is to create a deeply relevant experience for anime fans rather than a generic service for everyone. ## Measuring Design Success - James Hsu defines successful design through two baseline criteria: - It looks good, using sound typography, grids, spacing, and visual hierarchy. - It works well, with clear content, thoughtful interactions, and no frustrating edge cases. - A design can be visually polished but still fail if users become trapped in confusing flows or loops. ## The Role of the Universal Design System - The design system promotes consistency across devices, reducing cognitive load caused by inconsistent fonts, grids, spacing, or responsive behavior. - Reusable components improve team efficiency, much like meal preparation: - Teams can build from existing solutions. - New components can be evaluated based on their cost and value. - Shared patterns speed up product delivery and help product teams validate ideas quickly. - Engineers also benefit from avoiding duplicated implementations, reflecting the “Don’t Repeat Yourself” principle. ## Adapting the Design System to Reality - Crunchyroll uses: - A foundational design layer - Separate component libraries for individual clients - The system still contains many one-off components, numerous variants, and an underdeveloped type system. - The team rejects treating the existing system as an unchangeable process. - The design system should serve current product needs, not constrain teams because of decisions made by previous teams. - Different designers are at different stages of understanding and adopting the system, making education and early investment important. ## Problems with the Previous Workflow - Design and code parity was managed through complicated Jira workflow triggers. - Component changes generated automated alerts, but time-zone dependencies and convoluted processes meant stakeholders often lacked the latest information. - Documentation was split across separate Zeplin projects for iOS, Android, tvOS, and Android TV. - Finding the right flow required invitations, navigating branches, and comparing against outdated designs. - Searching for a specific payment signup flow could take several minutes per artboard, making implementation research slow and frustrating. - Handoff statuses were ambiguous: - Designers submitted work for review. - Reviewers moved it back to “in progress.” - Exported designs were not necessarily final. - Engineers had to rely on labels such as “ready for development.” ## How Dev Mode Improved Handoff - Dev Mode gives engineers direct access to design values and helps them identify the correct component. - Designers now create a dedicated, organized page when work is ready for development. - The page is labeled “ready for development,” and engineers receive a link directly to it. - Engineers no longer need to sift through ideation or outdated explorations. - Faster loading and parsing removed a major pain point from the previous tool. - The team supported adoption through documentation and onboarding workshops for developers. - Crunchyroll is also interested in integrating Code Connect to make its existing design-system code more accessible. Crunchyroll’s experience suggests that a design system is most effective when paired with clear ownership, focused documentation, and a streamlined handoff process. Dev Mode helped replace fragmented legacy workflows with a faster path from approved design to implementation.

component-librariesfigmadesign-systemsdesign-to-code+4

figmaMay 21, 2024

Unlocking the Power of Code Connect | Figma Blog (opens in new tab)

Code Connect helps design systems bridge the gap between design and engineering by making implementation guidance and production code available directly in Figma’s Dev Mode. Leaders from Bumble, GitHub, and HP argue that successful adoption depends on creating shared terminology, meeting developers in their existing workflows, and introducing the tool incrementally. The broader conclusion is that Code Connect is a practical first step toward tighter, more consistent design-to-code collaboration. ## Establish a shared language - Designers and developers often use different naming conventions, component properties, and expectations. - Design systems can serve as a “third language” by defining shared terms, patterns, and components. - Documentation and design decisions must be easy to discover and implement, not merely documented somewhere. ## Bring design guidance into developer workflows - Teams often struggle to identify a single source of truth, leading to inconsistent implementations and duplicated code. - Designers may rely on design documentation while engineers consult separate technical sources. - Code Connect surfaces design-system documentation and implementation details directly in Dev Mode, reducing the need for developers to switch to external websites or tools. - This helps teams reuse established patterns instead of repeatedly creating custom solutions. ## Start small to encourage adoption - Design systems cannot assume that people will adopt them simply because they exist; reducing friction is essential. - Code Connect lets developers inspect how a design has been implemented without leaving their existing workflow. - Teams should begin with small, high-impact components such as toggles. - Mapping a few components first makes it easier to learn the process, demonstrate value, and expand gradually. - HP’s Gilson Hoffmeister describes Code Connect as a first step toward broader design-system improvements. ## Value both disciplines’ expertise - Effective design-to-code collaboration requires recognizing that designers and developers contribute different forms of expertise. - Code Connect is intended to connect those perspectives by delivering design-system code into Dev Mode. - Better alignment can improve consistency, speed, and the quality of handoff without requiring either discipline to abandon its established practices. Teams should begin with a small set of frequently used components, establish shared terminology and ownership, and use Code Connect to make authoritative implementation guidance available where developers already work.

component-librariesfigmadesign-systemsdesign-to-code+2

figmaFeb 11, 2024

What Is a Design System | Design Systems 101 | Figma Blog (opens in new tab)

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.

component-librariesdesign-systemsux-designaccessibility+2

figmaSep 14, 2021

How Elsewhen builds digital products for their clients | Figma Blog (opens in new tab)

Elsewhen, a UK-based digital product consultancy, uses Figma as a collaborative workspace throughout the product-development process—not just for final designs. Its partnerships with Spotify and Inmarsat show how shared tools, reusable assets, and structured collaboration can reduce operational friction while supporting creativity and faster delivery. ## Improving Design Productivity at Spotify - Spotify wanted to measure and improve designer productivity without reducing creative quality. - Rather than counting screens, components, or hours spent, Spotify and Elsewhen focused on identifying workflow obstacles and opportunities for improvement. - They created the **Design Productivity Blueprint**, an open-source Figma file containing: - Workshops - Interview templates - Frameworks for analyzing design-team workflows - The goal is to help designers spend less time on routine work and more time exploring and solving problems creatively. ## Creating a Design System for Inmarsat - Inmarsat’s distributed workforce and reliance on external design agencies made collaboration difficult. - Designers and developers lacked a shared source of truth for components, files, and assets. - Designers frequently rebuilt common components from scratch, slowing product development and making onboarding harder. - Elsewhen created Inmarsat’s first Figma-based design system using an existing self-service portal project as its foundation. - The system established reusable standards for: - Typography - Buttons - Icons - Grids - Other common interface components - Centralizing these assets allowed internal teams, developers, and partner agencies to access the same resources and build products more quickly. ## Figma as a Collaborative Home Base - Elsewhen uses Figma across exploration, workshops, prototyping, and client collaboration. - Real-time access removes routine steps such as exporting, uploading, and distributing design assets. - Shared files and component libraries improve communication between consultants, clients, designers, and developers. - The broader lesson is that better collaboration systems can improve both productivity and the quality of creative work. Elsewhen’s work suggests that organizations should treat design tools as shared operational infrastructure. Establishing common workflows, reusable components, and accessible sources of truth can help teams reduce duplication, onboard faster, and deliver stronger products.

component-librariesfigmadesign-systemsprototyping+2

figmaNov 19, 2019

Opening up the data behind your design systems | Figma Blog (opens in new tab)

Figma introduced Design System Analytics to help organizations understand how their libraries and components are used across teams. The feature provides usage trends, library comparisons, and component-level data so design system teams can improve what they maintain, guide migrations, and measure adoption without monitoring individual designers. Customer examples show analytics turning usage data into practical design system decisions. ## Improving Components Through Usage Data - Teams can identify components that are widely used, rarely used, or frequently detached. - Microsoft uses this information to determine which Fluent components need maintenance or may no longer be important. - Google found that its button component was detached more than any other component, revealing that the master component was too complex. - The Material Design team responded by creating a simpler button option while preserving flexibility for designers. ## Tracking Library Adoption and Migration - Design System Analytics compares usage trends between libraries over time. - Squarespace planned to replace an older shared library with a new version using Auto Layout. - Analytics helps the team: - Monitor adoption of the new library across teams - Identify which teams are using it - Ensure the old library is gradually deprecated - Reports include component insertions, active teams, total instances, and detachments. ## Understanding Component Usage Across Teams - Analytics allows teams to examine how individual shared components are being used. - Pluralsight planned to use the reports to understand how designers work with components from its design system. - Because reports are available to anyone within an organization, designers and managers can independently investigate usage patterns and learn from other teams’ examples. ## Measuring Design System Impact Earlier - Figma positions analytics as a way to measure design system adoption earlier in the product development process, rather than waiting until implementation. - The article introduces Bukalapak as an example of a company that had previously measured adoption during development, though the provided text ends before describing the full outcome. ## Expanded Capabilities - The original 2019 feature focused primarily on components and library usage. - As of February 2025, Figma Library Analytics also includes styles and variables for Organization and Enterprise customers. - Enterprise customers can access expanded functionality through the Library Analytics API. Design System Analytics is intended to provide feedback for improving and evolving design systems, not to police individual designers. Teams can use the data to prioritize maintenance, simplify components, track migrations, and make adoption measurable.

component-librariesfigmadesign-systemsauto-layout+1

figmaApr 2, 2019

#FigmaTip Roundup: Spring cleaning edition | Figma Blog (opens in new tab)

The post presents a set of Figma organization tips framed as “spring cleaning” for design files and systems. It focuses on reducing clutter, improving file discoverability, and making shared libraries easier for teams to navigate. The central recommendation is to use Figma’s built-in naming, sorting, thumbnail, and organizational features regularly. ## Batch Rename Layers - Select multiple layers, right-click, and choose **Rename**, or use `Command + R`. - Rename layers uniformly, add numerical suffixes or prefixes, or replace parts of existing names. - Regular expressions provide more advanced naming control. - This is especially useful for cleaning up large projects with duplicated or inconsistently named layers. ## Create Custom File Thumbnails - Add a new page at the top of the page list and create a single **640×320** frame. - Use the frame to display a title, description, images, project status, or version information. - Match the frame and canvas background colors for a clean thumbnail. - Custom thumbnails make files easier to scan and identify in the file browser. ## Sort and Review Files - Use the file browser’s sorting options to find clutter. - Sort by **File Name** to locate unnecessary files, including those still named “Untitled.” - Sort by **Date Created** or **Last Modified** to identify outdated or inactive work. ## Clean Up Team Libraries - Review components for redundancy, outdated elements, or items that no longer serve the team. - Remove components by opening the Components tab, right-clicking an item, and selecting **Remove from Library**. - Components can also be hidden from the library by adding a period (`.`) or underscore (`_`) to the beginning of their names. ## Organize Components with Frames and Pages - Use frames and pages to group components and design-system elements into meaningful collections. - This reduces reliance on long names separated by forward slashes. - A clearer structure makes shared libraries easier for teammates to browse and maintain. Regularly applying these techniques can keep Figma files, layers, and libraries manageable as projects grow, improving both individual workflows and team collaboration.

component-librariesfigmadesign-systemsregular-expressions+1

figmaDec 18, 2018

State of Design Systems 2018 | Figma Blog (opens in new tab)

Figma’s 2018 survey of 499 practitioners shows that design systems were still developing, but were becoming a lasting part of digital product work. Most organizations lacked mature systems or dedicated teams, yet practitioners strongly aspired to more formal, public, and continuously maintained systems. The report also argues that design systems are processes and principles—not merely collections of reusable components. ## Design Systems Were Still in Their Infancy - Two-thirds of respondents described their systems as stage 1 or 2: - Undocumented - Lacking a dedicated maintenance team - 86% wanted to reach stages 3 or 4, involving full-time staff and publicly available systems such as Shopify Polaris. - Speakers at Clarity suggested that design systems would become standard practice, much like responsive design. ## A Dedicated Team Is Not Required - About half of respondents worked at companies with design-system teams, mostly organizations with more than 1,000 employees. - Only one-third believed a dedicated team was necessary. - Smaller teams and individuals can begin incrementally by solving one focused problem, such as establishing consistent line-height rules. - The recommendation was to start small and ship improvements rather than wait for a complete system. ## Systems Usually Follow Existing Products - Only 41% of respondents built a design system alongside a new product. - 52% created one from an existing product, while 7% had experience with both approaches. - Building from a real product can be advantageous because the system addresses actual use cases instead of creating isolated, hypothetical components. - Legacy design can therefore provide a practical foundation for system development. ## Common Design-System Artifacts - Component libraries appeared in 90% of respondents’ systems. - Style guides were included by 83%. - Other commonly mentioned elements included: - Design principles: 57% - Content guidelines: 47% - Code-related resources such as React components, mixin libraries, and design tokens - Only two respondents mentioned linters, highlighting the wide variation in what organizations consider part of a design system. ## A Design System Is More Than Its Artifacts - The most common misconception was treating a design system as a static collection of pattern libraries. - A complete system also includes: - Processes - Guidelines - Principles - Design philosophies - Documentation - Component libraries are outputs of the system, not the system itself. - Without documentation explaining the reasoning behind components and how to use them, even a technically strong system can fail. A practical approach is to begin with a small, real product problem, document the principles behind the solution, and grow the system iteratively rather than waiting for a dedicated team or a fully formed library.

component-librariesdesign-systemsatomic-designmaterial-design+2