figmaJul 16, 2026

Workflow Lab: Deploying Designs Directly with Figma Make | Figma Blog (opens in new tab)

Figma’s workflow connects design, production code, and team review so designers can handle small, high-impact improvements without waiting for engineering backlog prioritization. Using Figma Make with a real codebase, a designer can identify accessibility issues, implement craft-level fixes, and move the work toward a merged pull request. The approach keeps engineers focused on larger architectural work while preserving design nuance and collaboration. ## The Problem with Backlog-Driven Fixes - Minor accessibility and usability improvements often enter a backlog where they compete with larger engineering priorities. - Small changes may be too granular to prioritize but too valuable to ignore. - Written handoffs can lose important nuance, creating clarification cycles between designers and engineers. - The example organization, the fictional Museum of Speculative Futures, is simultaneously improving accessibility and rewriting its website architecture. ## A Shared Ownership Model - The product manager proposes that engineers continue handling the major rewrite. - The designer takes end-to-end ownership of lower-risk, craft-level changes. - Figma Make with production code enables the designer to work directly against the real website implementation. - The workflow is intended to take changes from the Figma canvas through team review and into a pull request without filing a ticket. ## Testing the Existing Experience - Before making changes, the designer uses the Figma agent to generate synthetic personas, including: - A first-time visitor planning a trip - A returning member - Someone navigating with a screen reader - These personas explore the site and surface obvious friction early. - The audit identifies several issues: - A confusing exhibition or visit-page label - A call-to-action that is easy to miss - A date picker that is difficult to understand - A blank state when search returns no results - The article emphasizes that synthetic personas do not replace real user research, but they can identify issues before in-person sessions. ## Reviewing Design Improvements - The designer addresses the findings directly on the canvas. - The designer, engineer, and product manager review the proposed changes together. - They agree on improvements such as: - Clearer navigation language - A more prominent call-to-action - A more usable date picker - The changes support the shared goal of making the site easier to navigate for people with different ways of experiencing the web. The recommended workflow is to reserve engineers’ time for substantial technical work while enabling designers to directly resolve small, accessibility-focused issues in production code. Figma Make, the Figma agent, GitHub integration, and canvas-based review create a path from design insight to implementation without losing context or waiting indefinitely in the backlog.

accessibilityfigmaaigithub+2

figmaJul 1, 2026

Building Accessibility Into a Canvas-Based Product | Figma Blog (opens in new tab)

Figma’s canvas-based rendering enables performance features such as infinite zoom and real-time collaboration, but it removes the browser’s built-in accessibility support. To restore that support, Figma built a synchronized “Mirror DOM” that represents the canvas in ordinary DOM elements for screen readers and keyboard users. The system combines an internal accessibility tree, React-rendered mirror elements, bidirectional selection syncing, and announcements for non-navigational changes. ## Why Canvas Requires a Different Accessibility Strategy - Figma renders designs on a canvas rather than with traditional HTML and DOM. - This improves performance but leaves the browser’s accessibility tree nearly empty. - Unlike a conventional web app with semantic elements such as `<button>`, `<p>`, and `<img>`, Figma’s canvas effectively has only one focus-holding `<input>`. - Without additional work, screen readers cannot navigate or meaningfully interpret the layers in a Figma file. ## Synthesizing an Accessibility Tree - Browsers normally derive an accessibility tree from the DOM, semantic HTML, ARIA attributes, and computed state. - Figma created its own internal accessibility tree to provide equivalent non-visual information for each design layer. - Each layer receives an accessible summary describing the role and content a screen reader should announce. - Summaries vary according to context: - In prototypes, editing-related layers can be omitted, while text and interactive roles are preserved for viewers. - In editing mode, structures such as autolayout frames need to remain available. - The tree is flattened by removing omitted nodes and connecting their relevant descendants. - Figma builds the tree initially, then applies surgical updates as documents change instead of rebuilding everything. ## Rendering the Mirror DOM - A recursive React component converts the internal accessibility tree into DOM elements. - Each component subscribes to accessibility data for one design layer and renders its role, label, and children. - React’s incremental updates help keep DOM changes minimal as the design changes. - The resulting elements are invisible to sighted users but available to assistive technologies. ## Synchronizing Canvas and Screen Reader Interaction - Figma maintains bidirectional synchronization between the visual canvas and the Mirror DOM. - Selecting a layer on the canvas moves focus to the corresponding DOM element. - When a screen reader user navigates the Mirror DOM, Figma updates the canvas selection accordingly. - This connects non-visual navigation with the editor’s visual state. ## Announcing Changes - A separate announcement system communicates changes that are not primarily navigational. - It reports actions such as nudging objects, switching tools, and other updates that would normally be apparent visually. - Together with the Mirror DOM, these announcements help screen reader users understand both the document structure and ongoing editor activity. Figma’s approach shows that accessibility can be rebuilt for canvas applications by maintaining a semantic representation alongside the rendering layer. Applications that prioritize canvas performance should provide a synchronized accessibility model rather than relying on the canvas itself to expose meaning to assistive technologies.

accessibilityreactscreen-readersdom+3

figmaJul 1, 2026

Got Skills? Make the Figma Agent a Better Collaborator | Figma Blog (opens in new tab)

Figma’s custom skills turn team knowledge and workflows into reusable instructions for the Figma agent. They complement design systems by adding guidance such as brand voice, critique methods, writing standards, and review processes. Figma’s experience suggests that any repeated task or team-specific judgment can become a shared skill that improves consistency and collaboration. ## Custom Skills Capture Team Expertise - A skill is a reusable set of plain-English instructions for the Figma agent. - Skills can be triggered in chat with a forward slash (`/`). - Teams and organizations can publish skills so members do not have to recreate prompts or explain workflows repeatedly. - They are particularly useful for practices that are easy to use but difficult to document and often exist only in someone’s head. ## A Second Opinion on Demand Skills can provide focused critique and help teams apply shared standards. - **Simulate stakeholder feedback:** Figma created a skill based on CEO Dylan’s comments, allowing designers to pressure-test work before a review. - **Apply UX writing standards:** A skill based on Figma’s style guide checks capitalization, punctuation, and other consistency issues. - **Review work as a new user:** The agent can assess an experience from a first-time user’s perspective, exposing friction and missing context that experts may overlook. - Design systems supply components, patterns, and UI elements; skills add broader team expertise such as compliance rules, product principles, and critique frameworks. ## Build Once, Use Everywhere Repeated team rituals are strong candidates for automation through skills. - **Catch-me-up:** Summarizes recent file or project activity so returning teammates can quickly understand what happened without searching comment threads. - **Crit preparation:** Interviews the designer about the project, persona, scope, and audience, then creates a critique page with guided discussion prompts. - Figma’s crit-prep skill draws on Nielsen Norman Group best practices to encourage more effective research questions. - **Crit recap:** Organizes feedback into themes, decisions, action items, and deferred items. - Recaps can be placed on the canvas or copied into Slack, helping preserve decisions and keep follow-up work visible. ## Connecting Existing Tools The article begins describing how skills become more powerful when they can draw on the tools a team already uses, suggesting that skills can connect workflows and information across the organization. The provided excerpt ends before giving the specific examples or implementation details. Teams should start by identifying repeated tasks, recurring meetings, or expert review processes and turn those into shared slash-command skills.

accessibilityfigmadesign-systemsai-agent+2

figmaDec 10, 2025

Figma Make Is Now Available in Figma for Government | Figma Blog (opens in new tab)

Figma Make is now available in Figma for Government, giving federal agencies a secure way to create and test interactive prototypes. Figma argues that faster, collaborative design can help modernize public services, improve accessibility, and build public trust. The feature is available within Figma’s FedRAMP Moderate–authorized environment, although some cloud infrastructure will not reach full compliance until 2026. ## Modernizing Public Services - Government teams are improving services such as public portals, operational systems, benefits platforms, and research tools. - The online passport renewal system demonstrates the potential impact: by 2025, more than two million people had renewed passports online, with 97% reporting a positive experience. - Public-sector projects are difficult because policymakers, technologists, and operational leaders must coordinate under changing requirements and limited resources. - A 2025 executive order highlighted usability, accessibility, and design consistency as essential to citizen-facing services. ## Faster Prototyping and Collaboration - Figma Make enables teams to turn ideas into interactive prototypes in hours rather than weeks. - Designers, policy leaders, researchers, engineers, and IT staff can collaborate in a shared workspace. - Teams can test workflows and validate assumptions with citizens before development begins. - Shared libraries, integrations, accessibility standards, and design patterns help agencies maintain consistency. - Prototyping supports a wide range of initiatives, including federal benefits, financial communications, education platforms, space systems, and internal agency tools. ## Security and Compliance - Figma Make is included in Figma for Government and operates within its authorized environment. - Figma for Government is FedRAMP Moderate authorized, providing agencies with a compliant foundation for design and prototyping. - Figma notes that part of its cloud infrastructure is expected to achieve full FedRAMP Moderate compliance in 2026, while Make is usable today within the authorized environment. ## Broader Government Design Efforts - Federal agencies are already using Figma to modernize complex public services. - Shared design systems can improve accessibility and consistency across agencies and products. - Examples such as the National Park Service’s digital app illustrate how small teams can transform large, paper-based systems into accessible digital experiences. Figma positions Make as a practical tool for helping agencies adopt faster, citizen-first design processes. Government teams can use it to explore ideas early, collaborate across disciplines, and test accessible services before committing development resources.

accessibilityfigmadesign-systemsprototyping+3

figmaOct 13, 2025

15+ Ways We're Improving Accessibility in Figma | Figma Blog (opens in new tab)

Figma is rolling out more than 15 accessibility improvements to make its products easier to use with keyboards, screen readers, and enhanced contrast settings. The updates expand keyboard control across Figma Design, FigJam, Slides, Buzz, commenting, and Dev Mode, while improving screen-reader navigation and object descriptions. Together, they aim to make collaboration, canvas editing, and handoff more reliable for people with different access needs. ## Expanded Keyboard Controls - Users can navigate and manipulate more canvas objects without a mouse. - **Figma Design:** Add and edit lines, adjust ruler guides, and create or edit arcs from ellipses. - **FigJam:** Manage table rows and columns, adjust stamps, votes, washi tape, marker lines, and highlighter strokes, and navigate embedded content and other canvas objects. - **Figma Slides:** Resize presenter notes and adjust writing tone with AI. - **Across products:** Open and move between links in edit or view-only mode. ## Keyboard Support for Comments and Collaboration - Add, move, and navigate comments across Figma products. - Navigate and manage Dev Mode annotations with shortcuts. - Move between discussions without losing keyboard focus. - New personalization toggles let users disable Figma-exclusive shortcuts while typing and choose whether Spotlight automatically follows other users. ## Improved Screen Reader Support - Tab navigation through buttons, menus, panels, and other actions now follows a more logical order. - Users can jump directly to specific actions, such as opening menus or activating toolbar controls. - Object announcements include details such as type, name, and state. - More consistent announcements help users detect new comments and file updates. - Screen readers preserve rich-text meaning, including bold, italics, lists, and links. - Canvas objects in Buzz and Slides can now be recognized and announced. ## Enhanced Color Contrast - A new setting increases contrast between text, interface elements, and backgrounds in both light and dark modes. - The option can be enabled through Accessibility settings, the Actions menu, or General settings. - Stronger contrast improves text and icon legibility, clarifies interface structure, and makes buttons and outlines easier to identify. - It can also improve visibility in glare, sunlight, and prolonged or multitasked screen use. Figma’s updates make accessibility a broader part of everyday editing and collaboration rather than a separate workflow. Users who rely on keyboards or screen readers should explore the new controls, while all users may benefit from enabling enhanced contrast when working in difficult lighting or for extended periods.

accessibilityfigmafigjamdev-mode+4

figmaApr 1, 2025

Why Design is for Everyone | Figma Blog (opens in new tab)

Design is presented not as a discipline owned by professional designers, but as a shared way of solving problems and communicating ideas. As technology evolved from physical products like Sony’s Walkman to software and digital interfaces, design became increasingly central to usability, accessibility, and product success. The author argues that organizations achieve better products and systems when design knowledge is shared across teams rather than confined to a single department. ## Design as a shared practice - Design is described as: - A tool for solving problems - A mindset for approaching challenges - A framework for communicating and developing ideas - Professional designers may identify strongly with the discipline, but design should remain accessible to everyone. - Observing hundreds of teams and thousands of individuals led the author to conclude that individual expertise has limits. - Teams equipped with shared design knowledge can create: - Better user experiences - More effective processes - Stronger organizational systems - The future of design is therefore organization-wide, built through a design-driven culture rather than isolated design departments. ## Design through technological change - Design evolves alongside technology, helping transform technical possibilities into products people can understand and use. - Its role extends beyond appearance: design bridges the gap between prototypes and market-ready experiences. ## The Walkman: engineering combined with user-centered design - Sony’s 1979 portable stereo began with engineering advances from the Pressman tape recorder. - Engineers made the device smaller and lighter, removed recording functionality, and improved sound quality. - Design was essential to the Walkman’s widespread adoption: - User testing shaped its intuitive interface. - Field research identified ways to improve portability and usability. - Dual headphone jacks supported shared listening. - The “hotline” button allowed users to talk while listening. - Its distinctive blue-and-silver body and orange button differentiated it from conventional black, gray, and white electronics. - The Walkman illustrates how engineering, interface design, accessibility, user research, and design thinking can combine to create a cultural icon. ## The rise of interface design - By the mid-2000s, industry attention shifted from hardware toward the software that powered devices. - Apple’s products demonstrated that hardware alone was insufficient; interfaces, touch interactions, haptics, and software usability were equally important. - The App Store created a new mobile-software economy and intensified competition around digital experiences. - Web 2.0 and mobile apps accelerated investment in software and helped establish new technology companies. - Software expanded interface design beyond the constraints of physical controls, enabling more powerful and flexible interaction models. ## Digital-native interfaces - Early digital products often used skeuomorphism, imitating familiar physical objects such as buttons, sliders, and scroll wheels. - These visual metaphors helped users understand unfamiliar digital interfaces by connecting them to established physical experiences. Design works best when it is treated as a shared organizational capability. Giving non-designers a seat at the table allows teams to apply user-centered thinking to products, processes, and systems at scale.

accessibilityuxdesign-thinkingsoftware-design+3

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.

accessibilityfigmadesign-systemsapi+3

figmaNov 20, 2024

The Making of the Figma Pattern Library | Figma Blog (opens in new tab)

Figma rebuilt its internal design system during the UI3 redesign after years of growth had produced inconsistent components, detached instances, and a fragmented workflow. The resulting Figma Pattern Library (FPL) was created through close designer-engineer collaboration and uses variables, APIs, and shared standards to keep design intent aligned with shipped code. Its goal is to provide both a reliable source of truth and a flexible foundation for building consistent, accessible products across Figma’s product suite. ## Why Figma rebuilt its design system - Figma’s internal system had become increasingly fragmented as the company and product portfolio expanded. - Components that were intended to be identical had accumulated subtle but important differences. - Detached component instances made consistency difficult to maintain. - The upcoming UI3 rollout made these problems impossible to ignore. - The team needed a foundation that could support consistent, efficient development across all Figma products. ## A paired design-and-engineering approach - A five-person team of designers and engineers led the rebuild. - The team modeled its workflow on pair programming: - One discipline would actively build. - The other would review and provide immediate feedback. - This collaboration helped bridge the gap between design intent and technical implementation. - The system was designed to be both: - A source of truth for shared UI decisions. - A springboard for future product development. - The effort resulted in the new Figma Pattern Library, or FPL. ## Using variables as a shared language - The previous system relied on Figma styles for designers and a separate Google Sheet for engineers’ color tokens. - Because the spreadsheet often lagged behind product changes, designs and production code diverged. - FPL replaced this disconnected process with Figma variables and the Figma REST API. - Typography variables were introduced and aliased through existing typography styles. - Color styles were migrated to color variables as a centralized source of truth. - CSS definitions were added to color variables so Dev Mode could display the correct variable names during inspection. ## Primitive and semantic color systems - FPL organized colors into two main variable collections: - **Primitive variables:** Color ramps organized by hue and numbered from 100 to 1000. - **Semantic variables:** Contextual names based on Figma’s dark-mode schema. - Semantic variables support multiple themes and products, including: - Light and dark modes. - Figma Design. - FigJam. - Slides. - Dev Mode. - Semantic variables alias primitive variables, allowing colors to be changed across themes and products without manually updating every component. - This structure enables shared components to adapt to different contexts while preserving visual consistency. The practical lesson is that a scalable design system requires more than a component library: it needs shared ownership, synchronized design and engineering tokens, and variable-based foundations that can support multiple products and themes.

accessibilityfigmadesign-systemsdesign-tokens+4

figmaOct 20, 2024

Made in Figma: The National Park Service Goes From Paper to Pixels | Figma Blog (opens in new tab)

The National Park Service turned decades of printed visitor guides into a unified digital app serving 431 parks and monuments. GuideOne and Twohy Design Works drew on Massimo Vignelli’s 1977 Unigrid system to create a flexible interface that could accommodate diverse park data, long-term government use, and varied accessibility needs. Figma helped the NPS, designers, and developers collaborate on a practical design system that works for both visitors and park staff. ## A Digital System for 431 Parks - The NPS manages an unusually diverse collection of sites, ranging from major national parks to small historic memorials. - Each park controls much of its own data and writes its own content, making consolidation difficult. - The app needed to bring inconsistent information into one reliable system. - It includes: - Interactive maps - Self-guided tours - Essential visitor information - Content useful to both the public and NPS employees - The app launched in 2021 after the NPS moved from separate apps for individual parks to a single consolidated experience. ## Designing for Durability and Accessibility - Government software must remain useful for many years rather than follow short-lived product trends. - The app serves people with widely different accessibility requirements. - Designers had to balance a consistent national system with the individual character and needs of each park. - Collaboration between the NPS, GuideOne’s developers, and designers helped ensure concepts were feasible with the available data and engineering resources. ## Adapting the Unigrid - Before 1977, NPS brochures varied widely in format and visual style. - Massimo Vignelli’s Unigrid standardized: - Graphic components - Layout structures - Typography and visual hierarchy - Print-production methods - The system gave the NPS a recognizable identity while allowing individual parks to present their own stories. - GuideOne and Twohy Design Works treated Unigrid as a foundation for the app rather than copying the brochures directly. - The challenge was translating a print-based grid and editorial system into interactive screens, maps, and digital navigation. ## Figma as a Collaboration Tool - Figma made it easy to circulate designs among the NPS, designers, and engineering teams. - Shared prototypes exposed practical constraints around park data and implementation. - The workflow supported ongoing feedback instead of separating design from development. - This helped turn a historical visual system into a robust digital product. The project demonstrates how a well-established design system can be modernized without losing its identity. For complex public platforms, combining strong historical principles with collaborative prototyping, flexible data structures, and accessibility-focused design can produce a product that remains useful across many users and locations.

accessibilityfigmadesign-systemsui-ux+2

figmaApr 2, 2024

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

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

accessibilityfigmadesign-systemsdesign-to-code+3

figmaMar 18, 2024

23 Prototyping Resources to Bookmark Right Now | Figma Blog (opens in new tab)

Prototyping is valuable throughout product development—not just at the end—as a way to align teams, gather feedback, conduct research, and improve products through iteration. Figma’s curated collection of 23 resources supports different learning styles, from introductory videos and community files to presentation techniques and advanced prototyping features. ## Cover the Basics - An eight-minute video introduces interactive prototypes, animation, and incorporating tester feedback. - A 50-minute playlist covers: - Easing curves and transitions - Smart Animate - Scrolling - Device frames - A 63-minute “Prototyping 101” video explains basic frame-to-frame navigation and advanced features such as interactive components. - A two-part series for product professionals demonstrates how non-designers can create lightweight prototypes. - Part one covers basic prototype creation. - Part two explores transitions, Smart Animate, scrolling, and other motion techniques. - The “Accessible prototypes in Figma” community file demonstrates prototype accessibility features, including compatibility with screen readers such as VoiceOver on Mac and JAWS on Windows. ## Level Up Presentations - Prototyping can make presentations more dynamic and engaging, whether for boardrooms, classrooms, or other audiences. - A 70-minute video explains how to build interactive slide presentations in Figma. - A short tutorial shows how to embed interactive elements, such as scrollable mobile screens, inside presentation slides. - Another video demonstrates using the Figma mobile app to click through presentation slides. ## A Broader Prototyping Practice - Figma positions prototyping as a tool for: - Building shared team understanding - Testing ideas with users - Facilitating stakeholder feedback - Iterating before development - The resource list follows recent Figma prototyping enhancements, including updates that help bring designs to life across mobile, tablet, and smartwatch interfaces. - The article is organized as a learning path, with additional sections intended to cover video, motion and flow, variables, and recorded office hours. Use the resources progressively: begin with the introductory tutorials, then explore accessibility, presentation workflows, motion, variables, and community examples as your prototyping needs become more advanced.

accessibilityfigmaprototypinguser-research+3

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.

accessibilitydesign-systemsux-designdesign-tokens+2

figmaJan 30, 2024

The Art and Science of Annotations in Dev Mode | Figma Blog (opens in new tab)

Figma’s Dev Mode annotations aim to make designer–developer collaboration clearer and less manual. The feature centralizes design context, keeps specifications synchronized with changing designs, and avoids cluttering the design canvas. Its core conclusion is that annotations should be dynamic, connected to design properties, and presented in a developer-focused workspace. ## Solving Designer and Developer Needs - Designers need to document information that visuals cannot fully express, including: - Accessibility requirements - Interaction behavior - Rationale behind design decisions - Developers need more than access to an entire design file; they need a curated engineering specification that identifies the relevant work. - Figma placed annotation workflows in Dev Mode so designers can: - Annotate from the same perspective developers use - Create a focused specification - Share a direct Dev Mode link with developers - Dev Mode is intended to involve the broader product team rather than isolate developers after design work is complete. ## Dynamic Annotations That Stay Current - Traditional annotations are manually created and quickly become outdated as designs evolve. - Figma explored connecting annotations directly to design properties so they update automatically when the underlying design changes. - Measurement indicators can also respond dynamically to layout or dimension changes. - Referencing actual variables and components from a design system reduces ambiguity and helps keep specifications aligned with implementation. - This approach supports the constantly changing nature of product development, where developers need visibility into ongoing design updates. ## Positioning Annotations Without Canvas Clutter - Manual annotations often force designers to move frames and rearrange the canvas to make room for notes and pointers. - Figma wanted annotations to remain visible to developers without consuming space in the design itself. - The proposed solution was to position and display annotations automatically. - This required handling complex interactions such as: - Zooming and panning - Scaling - Selecting and hovering - Minimizing annotations - Engineering worked through numerous prototypes and tuned the display logic to make automatically positioned annotations usable in practice. Figma’s approach treats annotations as a living, developer-oriented specification rather than static notes on a canvas. Connecting them to design properties and displaying them dynamically can reduce maintenance for designers while giving developers clearer, more reliable implementation context.

accessibilityfigmadesign-systemsdev-mode+2

figmaJul 12, 2023

How Thumbtack structures their design system | Figma Blog (opens in new tab)

Thumbtack structures its Thumbprint design system as three layers: design tokens, atomic CSS, and reusable UI components. Each layer trades some flexibility for greater productivity, consistency, accessibility, and quality. The approach lets developers choose the highest-level solution that fits their needs while retaining lower-level escape hatches for custom or native experiences. ## Three-Layer Architecture - **Thumbprint Tokens** - The foundation shared by web and native clients. - Defines granular properties such as colors, typography, spacing, sizing, radii, and shadows. - Offers the greatest flexibility but the least built-in structure. - **Thumbprint Atomic** - An atomic CSS library built on the tokens. - Enables developers to build interfaces without writing custom CSS. - Includes utilities such as aspect-ratio classes for maintaining proportions in responsive or embedded media. - **Thumbprint Components** - Provides accessible, prebuilt implementations of common patterns, including alerts, buttons, date pickers, and star ratings. - Improves development speed, consistency, and accessibility. - Developers can fall back to Atomic or Tokens when no suitable component exists. ## Layered Components and Tokens - Individual layers can contain their own sub-layers for added flexibility. - Thumbprint’s modal system separates: - `ModalCurtain`, which supplies core usability and behavior without visual styling. - `Modal`, which adds the standard visual design on top of `ModalCurtain`. - Developers generally use the more prescriptive `Modal`, but can use `ModalCurtain` for unusual requirements. - Tokens can also inherit from one another. For example, a semantic token such as `button-cta-background-color` may derive from a broader token like `cta-background-color`, which ultimately maps to a raw value such as `blue-400`. - Users are encouraged to select the highest abstraction appropriate for their use case. ## Why the Structure Helps - Higher layers reduce repeated work and improve consistency. - Lower layers preserve flexibility for custom product needs. - Components allow engineers to focus on product functionality instead of rebuilding common UI patterns. - Layered primitives provide a controlled way to support exceptions without abandoning the design system. - The architecture is intended to simplify maintenance and save time for both developers and end users. Thumbprint’s model demonstrates that a design system does not need to choose between standardization and flexibility. A layered structure provides strong defaults while preserving lower-level tools for cases that require customization.

accessibilitydesign-systemsreactdesign-tokens+3

figmaMay 17, 2023

Four years in, here’s what Config tells us about the state of design | Figma Blog (opens in new tab)

Config 2023 submissions suggest that the design industry is emerging from pandemic-era uncertainty with renewed optimism. Figma analyzed more than 1,000 conference proposals and found increasing interest in accessibility, creativity enabled by design systems, and broader collaboration. Overall, the submissions portray designers as focused on turning recent challenges into opportunities for more scalable, inclusive, and effective product development. ## A More Optimistic Design Community - Config submissions increased from 420 in 2021 to 520 in 2022 and more than 1,000 in 2023. - Positive sentiment rose from 63% of submissions in 2021 to 72% in 2023. - Submissions increasingly emphasized possibilities and ways teams had “thrived,” rather than focusing on outdated practices or persistent problems. - References to the pandemic fell to one-sixth of their 2021 level. - Mentions of “remote” declined by roughly 20%, suggesting that teams are adapting to changed work patterns. ## Design Systems as Creative Infrastructure - The perceived divide between creative freedom and systematic processes is narrowing. - Designers increasingly view design systems as tools that reduce repetitive work and create more space for creative thinking. - Teams operating at scale are investing in design tokens and reusable systems to maintain speed and consistency. - In 2021, design-system discussions focused mainly on foundational tasks such as auditing, scaling, and establishing basic infrastructure. - By 2023, submissions connected design systems more directly with creativity and visual expression, using terms such as “art,” “transition,” “color,” and “creating.” The emerging view is that systems do not suppress creativity; they can provide the structure and efficiency needed to support it.

accessibilityfigmaaidesign-systems+3