Design Systems

252 posts

figmaJul 16, 20242 min readCurated summary

An Update on our Make Designs Feature | Figma Blog

Figma temporarily disabled its Make Designs AI feature after discovering that some generated mockups closely resembled real applications, including Apple’s weather app. The issue came not from model training, but from insufficiently reviewed components and example screens in Figma’s custom design systems. Figma removed the problematic assets and planned stronger quality assurance before relaunching the feature, later bringing it back under the name First Draft with updates. ## How Make Designs Works - Combines an AI model, contextual design-system data, and a user prompt. - Uses generally available models such as OpenAI’s GPT-4o and Amazon Titan, without additional fine-tuning. - Relies on separate mobile and desktop design systems containing hundreds of components and example compositions. - The language model selects, arranges, parameterizes, and themes components based on the prompt. - Amazon Titan generates the images used in the resulting designs. ## What Went Wrong - Figma reviewed the design systems during development and private beta testing. - Shortly before Config 2024, new components and example screens were added without sufficient vetting. - Some assets resembled patterns from real-world applications. - A prompt for a weather app produced results that appeared notably similar to Apple’s first-party design. - The incident was identified after designer Andy Allen raised the concern, prompting an immediate investigation. ## Figma’s Response - The team traced the similarities to assets in the underlying design systems. - Problematic components and examples were removed. - Make Designs was rolled back and disabled. - Figma postponed relaunching the feature while developing a more robust QA process. ## Future Direction - Make Designs was originally called “First Draft” to emphasize that AI output is only a starting point. - Figma wants users eventually to connect the feature to their own company design systems. - This could reduce the time spent locating, assembling, and configuring components. - Figma maintains that designers remain essential for refining drafts into meaningful user experiences. - The feature was later re-enabled with updates and renamed First Draft. Figma’s experience highlights the need to carefully audit not only AI models but also the data, components, and examples supplied to them. AI-generated designs should be treated as starting points that require professional review and creative refinement.

Design Systems AI Generative AI User Interface+3

figmaJul 10, 20242 min readCurated summary

Crafting the Visual Identity for Config 2024 | Figma Blog

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.

Design Systems Figma User Experience Component Library+1

figmaJun 25, 20242 min readCurated summary

What is Good Design in the Age of AI? | Figma Blog

AI is making product creation faster and more accessible, increasing the importance of design as a differentiator. Figma argues that designers should not chase automation or trends, but apply enduring principles such as empathy, creativity, and solving real user needs. The future of good design will depend on experimentation, stronger design-to-code connections, pragmatism, and new forms of human–AI collaboration. ## AI Creates a New Design Inflection Point - Like the iPhone’s launch in 2007, AI is introducing a new medium that requires experimentation and the development of new interaction patterns. - Early mobile products often forced desktop experiences onto smaller screens; today, many AI products similarly rely on basic chatbots and templates. - Designers can unlock AI’s potential through: - Richer interactions - Intuitive gestures - Patterns designed specifically for AI - AI can generate code, designs, and complete applications from prompts, allowing teams to move rapidly from concept to creation. - As more people participate in product development, thoughtful design becomes increasingly important for products to stand out. ## Codifying the Fundamentals of Good Design - Figma’s AI feature for generating initial UI drafts needed to understand the mechanics of good design. - Because large language models are text-oriented, generating high-quality visual interfaces is more difficult than generating text or code. - A complete rulebook for design is impractical: - Good design contains too many contextual details to define exhaustively. - Extremely large prompts exceed technical token limits. - Figma instead focused on reducing design expertise to a small set of broadly applicable principles. - Teaching AI requires designers to make their intuitive knowledge explicit by creating rules that are: - Clear - Concrete - Practical - General enough to apply across many interfaces - The process resembles teaching design: instructors must break complex judgment into principles that others can understand and use. ## Design’s Continuing Role - AI should elevate design rather than simply automate it. - The most valuable design foundations remain relatively constant despite technological change. - Designers’ roles may evolve, but their understanding of users, creativity, and ability to solve meaningful problems remain essential. ## Practical Direction Teams should treat AI as a new design medium, not merely an automation tool. They should experiment with AI-native interaction patterns while grounding products in concise, teachable design principles and genuine user needs.

Design Systems Figma AI Large Language Models+2

figmaJun 25, 20242 min readCurated summary

Welcome to The Prompt | Figma Blog

AI may transform design and building, but its ultimate impact remains unsettled. Figma’s *The Prompt* explores that uncertainty through essays and interviews with experts across design, engineering, product development, and the built environment. The collection argues that human judgment—especially the ability to ask thoughtful, well-framed questions—will remain central to making AI useful. ## Prompting as a Creative Discipline - Prompt engineering is described as the practice of getting better answers by asking better questions. - Like interviewing or editing a magazine, effective prompting requires: - Clear context - Thoughtful framing - Useful guidance - AI’s capabilities are treated as largely inert without human direction; people must coax useful results from the technology. - The act of questioning is presented as a fundamentally human and creative instinct. ## The Purpose of *The Prompt* - Created by Figma’s Story Studio and Brand Studio, the magazine launched at Config 2024. - It combines writing, interviews, and illustrations to examine how AI is changing creative and technical work. - Contributors come from both inside and outside Figma and work across: - Design - Engineering - Product development - Robotics - Manufacturing - Residential housing ## Questions About AI’s Future The magazine uses a range of prompts to investigate both immediate applications and larger societal questions, including: - What constitutes good design when AI can generate and automate more work? - Whether code becoming a commodity should be feared - How much data is actually necessary - How starting with imperfect or incomplete ideas can shape innovation - Whether AI development can move beyond technological echo chambers - If efficiency undermines creativity - How to build AI features that people both want and trust - The relationship between artificial design intelligence (ADI) and artificial general intelligence (AGI) - Whether automation can unlock the full potential of design systems - The role of robots in construction and housing - Whether society is entering an age of androids ## Practical and Long-Term Perspectives - Contributors examine ambitious challenges, such as applying AI to manufacturing and housing. - They also focus on what AI can deliver reliably today rather than only speculating about distant possibilities. - The goal is to make complex systems more understandable and usable while learning how to guide AI more effectively. Figma presents *The Prompt* as both a magazine and an experiment in inquiry: meaningful progress with AI depends not just on increasingly capable systems, but on humans asking clearer, more imaginative, and more responsible questions.

Design Systems AI Large Language Models Automation+4

figmaJun 25, 20242 min readCurated summary

Inside the Redesigned Figma, Where Your Work Takes Center Stage | Figma Blog

UI3 is Figma’s third major redesign, created to manage the complexity accumulated over nearly a decade of new features. Its central goal is to put users’ work—not the interface—at the center while preserving professional workflows and making Figma more approachable. The redesign also establishes a flexible foundation for products such as Dev Mode, Figma AI, and Figma Slides. ## Why Figma redesigned the interface - **Center users’ ideas:** New capabilities such as interactive components and AI risked making the interface feel crowded or distracting. - **Serve both beginners and experts:** Figma aimed to become more intuitive for newcomers without removing the power and familiar ergonomics professional designers rely on. - **Adapt to modern design practices:** Reusable components, generative AI, and higher-level abstractions require tools that provide building blocks rather than focusing only on individual pixels. - **Prepare for the future:** UI3 supports Figma’s broader ecosystem, including closer connections between design and code, Dev Mode, Figma AI, and the newly introduced Figma Slides. ## Clearing the stage for the canvas - The redesign began by maximizing canvas space and reducing visual distractions. - Figma experimented with extreme concepts, including interfaces that appeared only on hover and layouts where panels constantly appeared and disappeared. - These approaches made the workspace feel unstable, so the team moved toward a more consistent solution: - Resizable and collapsible panels - A slim toolbar positioned at the bottom of the canvas - The ability to hide the interface completely and reveal panels when needed - The new structure creates a roomier workspace and provides a consistent framework for switching between Figma products. ## Iterative design process - Figma explored hundreds of interface variations. - Designers built and used many prototypes internally to evaluate how each approach affected real workflows. - Features and controls were deliberately removed until the team identified what users genuinely missed, then selectively restored them. UI3’s practical recommendation is to give designers more control over the interface: keep tools accessible, but allow the canvas and the work itself to take priority.

Design Systems Figma User Experience Generative AI+2

figmaJun 25, 20242 min readCurated summary

Config 2024 In Review | Figma Blog

Figma’s Config 2024 announcements focus on making design more exploratory, efficient, and connected to development. The company introduced Figma AI, a redesigned UI3 interface, Figma Slides, major Dev Mode improvements, and quality-of-life updates. Figma argues that as AI makes software creation easier, thoughtful design will become an even stronger differentiator. ## Figma AI: Faster exploration and production - **Visual Search** lets users find similar designs across accessible team files using a screenshot, selected frame, image, or sketch. - Improved **Asset Search** understands the context of queries, even when search terms do not match asset names. - New AI-powered efficiency features can: - Generate realistic images and copy - Rewrite, translate, or vary text - Automatically create prototype connections - Rename layers - **Make Designs**, available through the Actions panel, generates initial UI layouts and component options from text prompts. - Figma says these tools are built around practical user needs rather than AI hype, using large language models to reduce tedious work and help designers explore more possibilities. ## Other major Config announcements - **UI3** redesigns the Figma interface. - **Figma Slides** introduces a dedicated environment for building, collaborating on, and presenting presentations. - **Dev Mode updates** aim to move teams from designs being merely “design ready” to being fully “dev complete.” - Additional improvements target **Auto Layout, UI kits, and the prototype viewer**. ## Availability - Figma AI and UI3 were announced as limited betas with gradual rollout. - Users can join the waitlist through Figma’s help menu by selecting **“Join UI3 + AI waitlist.”** Figma’s overall direction is to support the full path from idea generation through design, presentation, and development, while using AI to automate routine tasks and expand creative exploration.

Design Systems AI Large Language Models Prototyping+3

figmaJun 25, 20242 min readCurated summary

Meet Figma AI: Empowering Designers with Intelligent Tools | Figma Blog

Figma AI is a suite of tools designed to help designers overcome creative blocks, work faster, and explore ideas more easily. Rather than treating AI as hype, Figma presents it as a practical way to solve common workflow problems, including finding existing designs and components. The features are initially available in a limited beta and are free during 2024, though usage limits and future pricing may change. ## Figma’s Practical Approach to AI - Figma AI builds on the company’s earlier AI features for FigJam. - The tools target several stages of design work: - Finding inspiration and existing assets - Exploring different design directions - Automating repetitive tasks - Generating interfaces from text prompts - Figma emphasizes helping designers remain efficient and creative rather than replacing their judgment. ## Visual Search - Visual Search allows users to find similar designs by: - Uploading an image - Selecting part of a canvas - Entering a text query - Results are drawn from team files the user can access. - Relevant frames can be inserted directly into the current working file. - Figma plans to expand search to Community files, with attribution, links to source files, and access to creators’ other work. ## AI-Enhanced Asset Search - Asset Search now uses semantic understanding rather than relying only on exact keyword matches. - A search such as “primary button” can find a component named `btn_large`. - The system considers the meaning and typical use of design elements, making components in large or complex design systems easier to discover. - The goal is to make finding assets feel more natural and reduce time spent searching through files and libraries. ## Beta Availability and Pricing - Figma AI and UI3 are being rolled out through a limited beta. - Users can join through Figma’s help menu by selecting **“Join UI3 + AI waitlist.”** - Features are free during the beta period, which runs through 2024. - Figma may introduce beta usage limits as it evaluates demand and infrastructure costs. - Pricing for general availability will be announced later. Figma AI is positioned as an assistive layer within the existing design workflow: it helps users locate useful starting points and reduce friction while leaving creative decisions with the designer.

Design Systems AI User Experience Generative AI+2

figmaMay 21, 20242 min readCurated summary

Unlocking the Power of Code Connect | Figma Blog

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.

Design Systems Figma Design To Code Dev Mode+2

figmaApr 17, 20242 min readCurated summary

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

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

Design Systems Figma Design Tokens API+2

figmaApr 15, 20242 min readCurated summary

What We Launched at Framework 2024 | Figma Blog

Figma’s Framework 2024 launches focus on increasing design-system adoption across organizations. The central argument is that creating a system is only half the challenge; teams must also make it useful and accessible to developers and other stakeholders. Code Connect, typography and gradient variables, and the Design System Analytics API are presented as tools for bridging design and code, improving consistency, and measuring adoption. ## Design System Adoption as the Central Challenge - Design systems have become more powerful and sophisticated, but that complexity can make organizational adoption harder. - Figma emphasizes that successful systems require more than components and documentation—they need an adoption strategy. - The new releases build on earlier updates such as variables, theming, state management, advanced prototyping, and Dev Mode. - Figma frames design-system advocacy partly as a marketing problem: teams must persuade designers and developers to use the system consistently. ## Code Connect Bridges Design and Code - Code Connect brings production-ready code snippets directly into Figma’s Dev Mode. - Developers can find the implementation for a design-system component without searching through separate documentation. - Copying the relevant snippet is intended to reduce inconsistencies and make the design-to-code process faster. - The beta supports React, iOS, and Storybook, with additional frameworks and platforms planned. - Bumble, GitHub, and HP shared their design-system challenges and early experiences with Code Connect. ## Typography and Gradient Variables Expand Token Coverage - Figma describes typography as an essential part of a complete design system that was previously difficult to represent with variables. - Typography variables allow teams to define font scales once and apply them consistently throughout a product. - They can support platform-specific adjustments and accessibility goals, including WCAG-compliant type scales. - Gradient variables, introduced alongside typography variables, further align Figma variables with the range of design tokens teams need. ## Analytics for Measuring Adoption - Figma also announced the Design System Analytics API, referred to in the introduction as the Library Analytics API. - The API is intended to help design-system teams understand usage across an organization. - By measuring adoption, teams can identify where systems are being used effectively and where additional education, improvements, or outreach may be needed. Figma’s overall recommendation is to treat a design system as an organizational product: provide developers with usable code, cover essential tokens such as typography and gradients, and use analytics to guide adoption efforts.

Design Systems Figma React Design Tokens+3

figmaApr 15, 20242 min readCurated summary

The Right Code for Your Design System | Figma Blog

Code Connect is Figma’s beta tool for improving design system adoption by connecting design mockups directly to production code. It replaces generic, auto-generated CSS snippets in Dev Mode with an organization’s actual component code, documentation, and usage guidance. Figma argues this can help developers build faster, use components correctly, and avoid creating duplicate one-off solutions. ## The Design System Adoption Problem - Design systems create a shared language between designers and developers. - Figma has already improved the design-to-code connection through: - Auto layout - Variables - Component properties - Dev Mode - A persistent challenge is adoption: - Developers may not know everything a design system contains. - Components and patterns may be used incorrectly. - Teams may create and maintain redundant custom components. - A design system succeeds only when it is used consistently and according to its intended guidelines. ## Code Connect’s Approach - Code Connect lets teams customize the code snippets shown in Figma Dev Mode. - Developers see real design system code rather than automatically generated CSS. - The feature is intended to: - Speed up implementation - Increase design system adoption - Encourage consistent component usage - Reduce duplicated, one-off components ## Connecting Design and Code - Design and development traditionally use different tools and optimize for different goals: - Designers focus on exploration and deciding what to build. - Developers focus on structure, implementation, and maintainability. - Figma presents Code Connect as another step toward allowing both disciplines to move smoothly between creative exploration and systematic implementation. - The tool is designed to address the broader disconnect between design workflows and coding workflows, rather than merely changing individual developer habits. ## Meeting Developers Where They Work - Code Connect is distributed through familiar development ecosystems: - npm for JavaScript and TypeScript projects - Swift Package Manager for SwiftUI projects - Setup instructions and the package are available on GitHub. - Developers can install and configure it through a command-line workflow. - Figma plans to add support for more platforms. - Once installed, design system teams can attach best practices and documentation directly to components and mockups, reducing the need for developers to search through separate documentation or code repositories. Code Connect’s practical recommendation is to bring production-ready component code and guidance into the developer’s existing design-inspection workflow, making the approved design system implementation the easiest option to use.

Design Systems Figma TypeScript JavaScript+4

figmaApr 15, 20242 min readCurated summary

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

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

Design Systems Figma User Experience Design Tokens+4

figmaApr 15, 20242 min readCurated summary

How Carvana Fuels Consistency and Scale | Figma Blog

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

Design Systems Figma User Experience Design Tokens+4

figmaApr 9, 20242 min readCurated summary

The Future of Design Systems is Marketing | Figma Blog

Design systems succeed only when people actively use them, so building a high-quality toolkit is not enough. The post argues that design systems teams should treat their systems like products, using marketing practices—audience research, tailored messaging, advocacy, and impact measurement—to drive adoption. This approach can turn a “nice-to-have” resource into an essential part of how an organization designs and builds products. ## Understand the Audience - Find product-market fit by learning how designers, developers, and leaders work, what frustrates them, and what they value. - Interview people across the Product Design and Engineering organization, from individual contributors to executives. - Begin with their existing processes, bottlenecks, and goals rather than immediately pitching the design system. - Use this research to shape the system’s positioning and continuously refine it. ## Tailor the Message to Each Group - Different audiences need different versions of the design system’s value proposition: - **Designers:** Emphasize creative enablement and brand consistency. - **Developers:** Focus on reusability, standardization, efficiency, and smoother design-to-code workflows. - **Decision-makers:** Demonstrate return on investment through faster delivery and reduced technical debt. - Address objections directly, including concerns about flexibility, technical constraints, and the effort required to implement the system. - A carefully adapted pitch can turn skepticism into support. ## Treat Adoption Like a Campaign - Replace one-off Slack announcements, presentations, and poorly attended training sessions with a deliberate go-to-market strategy. - Build compelling narratives around why the system matters to the organization. - Identify internal champions who can promote adoption within their teams. - Use supporting capabilities such as Code Connect, typography and gradient variables, and library analytics to make adoption easier to encourage and measure. The practical recommendation is to market a design system as actively as it is built: understand its users, communicate benefits in their language, recruit advocates, and measure whether it is delivering organizational value.

Design Systems Figma Product Design User Research+3

figmaApr 9, 20243 min readCurated summary

The Anatomy of a Component Sprint | Figma Blog

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.

Design Systems Figma Figjam Slack+3