Design Tokens | Techlist.io

figmaMar 24, 20263 min readCurated summary

Agents, Meet the Figma Canvas | Figma Blog

Figma is opening its canvas to AI agents, allowing tools such as Claude Code and Codex to create and modify designs directly in Figma files. Through the `use_figma` tool and customizable skills, agents can use a team’s components, variables, design decisions, and workflows instead of producing generic designs. The feature is free during beta but is expected to become usage-based and paid. ## Agents Work Directly on the Figma Canvas - Figma’s MCP integration lets agents read and write Figma files through the `use_figma` tool. - Agents can create or update: - Design assets - Components - Files based on existing design systems - Designs linked to established variables and conventions - Teams can move between code, the command line, and Figma while keeping design context shared. - Figma positions the canvas as the place where product decisions become visible and refined. ## Working Across Code and Canvas - The existing `generate_figma_design` tool converts HTML from live apps and websites into editable Figma layers. - The new `use_figma` tool operates directly on the canvas, using existing components and variables. - The tools are intended to work together: - `generate_figma_design` brings current implementation details into Figma. - `use_figma` edits those designs or creates new system-aligned assets. ## Skills Encode Design Intent - Skills are Markdown-based instructions that tell agents: - Which workflow steps to follow - What sequence to use - Which team conventions to respect - What quality standards and specialized knowledge to apply - Anyone can author a skill without building a plugin or writing traditional code. - The foundational `/figma-use` skill teaches agents Figma’s structure and core principles. - Teams can customize that foundation to reflect their own design systems and working methods. ## Example Skills and Workflows Figma highlights skills for tasks such as: - Generating component libraries from code - Creating designs from existing components and variables - Producing accessibility specifications for VoiceOver, TalkBack, and ARIA - Creating components from structured JSON contracts - Applying design systems to existing designs - Managing spacing through variables and fallbacks - Synchronizing design tokens between code and Figma - Running parallel, multi-agent design workflows ## More Predictable and Self-Correcting Output - Skills make AI behavior more consistent by encoding repeatable instructions and implementation rules. - Agents can use screenshots to identify mismatches and iteratively refine generated screens. - Because agents work with real Figma structure—components, variables, and auto layout—corrections affect the underlying design system rather than only the visual appearance. - Team conventions become active rules that agents apply during creation, rather than static documentation they merely reference. Figma’s agent workflow is most useful when teams invest in well-defined components, variables, and skills. During the beta, teams can experiment with `use_figma` and community skills to automate design work while preserving their existing design intent and system standards.

Read original

Design Tokens Figma Design Systems AI Agents+4

figmaMar 2, 20263 min readCurated summary

Our Config 2026 Speakers on the Biggest Opportunities With AI | Figma Blog

Figma’s Config 2026 speakers see AI as more than a productivity tool: it is expanding the scope of creative work, from software and music to fashion and manufacturing. Their perspectives emphasize human direction, participation, taste, and intention as AI accelerates experimentation. The central opportunity is to use AI to extend creative capacity without losing the distinctly human role of shaping meaning and purpose. ## AI as a New Creative Medium - Holly Herndon describes software as one of the defining artistic mediums of the current era. - AI enables studios to take on more complex projects, shifting creative roles toward orchestration. - Herndon and Mat Dryhurst’s *Starmirror* treats AI models as collective, public endeavors: - Visitors and local choirs contribute vocal data. - The data will train a new AI choir. - Participants engage with both the model’s inputs and outputs. - The project demonstrates how creative work can keep humans actively involved rather than treating AI as an isolated generator. ## Connecting Digital Creativity to the Physical World - Danit Peleg argues that AI will increasingly create tangible objects, not just digital designs. - AI is likely to influence: - Manufacturing - Architecture - Fashion - Wearable textiles - Peleg uses AI agents throughout her production pipeline, from initial concepts through fabrication. - Figma Weave, created after Figma’s acquisition of Weavy, is intended to expand AI-native capabilities for: - Image and video generation - Animation and motion design - VFX creation and editing - These tools point toward workflows where digital concepts can move more directly into physical production. ## Creativity as Attention and Care - Vicki Tan connects creativity with decision-making: both involve following questions and intuition despite uncertainty. - She argues that creativity is not primarily originality or talent, but care, attention, and sustained engagement with an idea. - Her interpretation of the French word *attendre*—to wait for or tend to—frames creativity as allowing meaning to emerge over time. - Rather than constantly seeking something completely new, creators can begin by noticing what already feels personal, meaningful, or instinctively theirs. ## Rethinking Creative Work in 2026 - The featured speakers come from varied fields, including art, fashion, behavioral design, software strategy, and emerging technology. - Their work challenges older assumptions about creativity and encourages experimentation with new processes. - AI’s greatest value may lie in amplifying human judgment, participation, and creative intent rather than replacing them. Creators should treat AI as an expandable medium and collaborator while preserving the human practices—attention, taste, participation, and purpose—that give creative work meaning.

Read original

Design Tokens AI AI Agents Machine Learning+2

figmaJan 12, 20262 min readCurated summary

The New Business Case For Design Systems | Figma Blog

Design systems are no longer merely efficiency tools or static component libraries; they are strategic investments that can influence revenue, customer loyalty, global expansion, and product quality. Research from the Design Executive Council shows that organizations are increasingly measuring design-system value through customer and business outcomes, not just reduced rework or faster handoffs. The strongest business case connects design-system work to metrics executives already care about. ## Linking Design Systems to Customer Outcomes - Teams can measure design-system impact through adoption, retention, engagement, satisfaction, and support metrics. - Freshworks attributed its design system to: - A 28% reduction in customer service costs - Faster support-ticket resolution - SAP collects more than one million in-app user feedback data points to improve its design system. - Freshworks uses CSAT scores, A/B tests, and funnel diagnostics to identify onboarding friction and guide new components, patterns, and features. - These metrics help design teams demonstrate business value while creating a roadmap for improving customer experience and product “stickiness.” ## Scaling Company Values and Product Quality - Design systems can scale not only brand identity but also company principles and product standards. - Linear uses its design system to support a culture of craft and quality, which contributes to customer loyalty and net revenue retention. - The system is intentionally flexible and continuously updated rather than governed by rigid rules. - Its goal is to ensure that products feel thoughtfully crafted while allowing teams to adapt components as needed. ## Supporting Global Growth and Localization - Design systems help companies expand internationally while maintaining consistency, brand identity, and cultural relevance. - Hyundai Motor Group uses one system across more than 30 vehicle models and three brands—Hyundai, Kia, and Genesis—while preserving each brand’s distinct identity. - Grammarly built localization into its design-system strategy from the beginning by: - Employing in-house linguists - Accounting for cultural nuances - Treating right-to-left readability as a core design input - Distributed teams across North America, South Korea, and Poland use a shared foundation to handle different languages, hardware constraints, screen sizes, and cultural expectations. - Hyundai’s 42dot uses custom Figma plugins to test multilingual user experiences. The practical recommendation is to frame a design system around outcomes that business leaders already value—customer satisfaction, retention, revenue, global growth, and product quality. Productivity improvements remain useful, but the most persuasive evidence comes from showing how design-system decisions change customer and business performance.

Read original

Design Tokens Figma Design Systems User Experience+2

tossDec 14, 2025Original article

Painting the Wheels of a Moving Train: (opens in new tab)

Toss Design System (TDS) underwent its first major color system overhaul in seven years to address deep-seated issues with perceptual inconsistency and fragmented cross-platform management. By transitioning to a perceptually uniform color space and an automated token pipeline, the team established a scalable infrastructure capable of supporting the brand's rapid expansion into global markets and diverse digital environments. ### Legacy Issues in Color Consistency * **Uneven luminosity across hues:** Colors sharing the same numerical value (e.g., Grey 100 and Blue 100) exhibited different perceptual brightness levels, leading to "patchy" layouts when used together. * **Discrepancies between Light and Dark modes:** Specific colors, such as Teal 50, appeared significantly more vibrant in dark mode than in light mode, forcing designers to manually customize colors for different themes. * **Accessibility hurdles:** Low-contrast colors often became invisible on low-resolution devices or virtual environments, failing to meet consistent accessibility standards. ### Technical Debt and Scaling Barriers * **Interconnected palettes:** Because the color scales were interdependent, modifying a single color required re-evaluating the entire palette across all hues and both light/dark modes. * **Fragmentation of truth:** Web, native apps, and design editors managed tokens independently, leading to "token drift" where certain colors existed on some platforms but not others. * **Business expansion pressure:** As Toss moved toward becoming a "super-app" and entering global markets, the manual process of maintaining design consistency became a bottleneck for development speed. ### Implementing Perceptually Uniform Color Spaces * **Adopting OKLCH:** Toss shifted from traditional HSL models to OKLCH to ensure that colors with the same lightness values are perceived as equally bright by the human eye. * **Automated color logic:** The team developed an automation logic that extracts accessible color combinations (backgrounds, text, and assets) for any input color, allowing third-party mini-apps to maintain brand identity without sacrificing accessibility. * **Chroma Clamping:** To ensure compatibility with standard RGB displays, the system utilizes chroma clamping to maintain intended hue and lightness even when hardware limitations arise. ### Refined Visual Correction and Contrast * **Solving the "Dark Yellow Problem":** Since mathematically consistent yellow often appears muddy or loses its "yellowness" at higher contrast levels, the team applied manual visual corrections to preserve the color's psychological impact. * **APCA-based Dark Mode optimization:** Utilizing the Advanced Perceptual Contrast Algorithm (APCA), the team increased contrast ratios in dark mode to compensate for human optical illusions and improve legibility at low screen brightness. ### Designer-Led Automation Pipeline * **Single Source of Truth:** By integrating Token Studio (Figma plugin) with GitHub, the team created a unified repository where design changes are synchronized across all platforms simultaneously. * **Automated deployment:** Designers can now commit changes and generate pull requests directly; pre-processing scripts then transform these tokens into platform-specific code for web, iOS, and Android without requiring manual developer intervention. The transition to a token-based, automated color system demonstrates that investing in foundational design infrastructure is essential for long-term scalability. For organizations managing complex, multi-platform products, adopting perceptually uniform color spaces like OKLCH can significantly reduce design debt and improve the efficiency of cross-functional teams.

Design Tokens Figma Design Systems Accessibility+4

naverDec 8, 2025Original article

When Design Systems Meet AI: Shifts (opens in new tab)

The integration of AI into the frontend development workflow is transforming how markup is generated, shifting the developer's role from manual coding to system orchestration. By leveraging Naver Financial’s robust design system—comprised of standardized design tokens and components—developers can use AI to automate the translation of Figma designs into functional code. This evolution suggests a future where the efficiency of UI implementation is dictated by the maturity of the underlying design system and the precision of AI instructions. ### Foundations of the Naver Financial Design System * The system is built on "Design Tokens," which serve as the smallest units of design, such as colors, typography, and spacing, ensuring consistency across all platforms. * Pre-defined components act as the primary building blocks for the UI, allowing the AI to reference established patterns rather than generating arbitrary styles. * The philosophy of "knowing your system" is emphasized as a prerequisite; AI effectiveness is directly proportional to how well-structured the design assets and code libraries are. ### Automating Markup with Code Connect and AI * Figma's "Code Connect" is utilized to bridge the gap between design files and the actual codebase, providing a source of truth for how components should be implemented. * Specific "Instructions" or prompts are developed to guide the AI in mapping Figma properties to specific React component props and design system logic. * This approach enables the transition from "drawing" UI to "declaring" it, where the AI interprets the design intent and outputs code that adheres to the organization’s technical standards. ### Challenges and Limitations in Real-World Development * While AI-generated markup provides a strong starting point, it often requires manual intervention for complex business logic, state management, and edge-case handling. * Maintaining the "Instruction" set requires ongoing effort to ensure the AI stays updated with the latest changes in the component library. * Developers must transition into a "reviewer" role, as the AI can still struggle with the specific context of a feature or integration with legacy code structures. The path to fully automated frontend development requires a highly mature design system as its backbone. For teams looking to adopt this paradigm, the priority should be standardizing design tokens and component interfaces; only then can AI effectively reduce the "last mile" of markup work and allow developers to focus on higher-level architectural challenges.

Design Tokens AI Design Systems Code Connect+2

figmaNov 18, 20252 min readCurated summary

5 Shifts Redefining Design Systems in the AI Era | Figma Blog

Design systems are evolving from static libraries into living frameworks that preserve craft, context, and brand identity while AI accelerates product development. The article argues that speed without direction creates divergence, whereas AI grounded in a strong design system can increase exploration and execution without sacrificing quality. This shift requires systems to encode not only reusable assets, but also the reasoning and standards behind them. ## From consistency guides to carriers of craft - AI can generate quickly, but without clear foundations its work may drift from a team’s vision. - Design systems increasingly encode taste, intuition, interaction patterns, and creative identity. - Components, layouts, and interactions can carry a consistent sensibility throughout development. - The goal is to scale production while preserving the human qualities that distinguish a product. ## Enabling grounded exploration - AI tools such as Figma Make allow teams to generate many design directions rapidly. - A robust design system keeps those explorations usable by grounding them in shared components and established patterns. - Teams can test variations in layouts, colors, and component arrangements without starting from scratch. - Once a direction is selected, moving to production becomes more about refinement than reconstruction. ## Building systems for AI consumption - Traditional systems assumed that designers and developers could infer missing context from the brand and business. - AI lacks that implicit understanding, so systems must explicitly document: - Design rationale - Constraints and decision criteria - Examples of quality - Usage guidance across documentation, code, and design - Tokens and components alone are insufficient; AI needs the surrounding context to produce aligned outputs. ## Expanding into governance - Design system teams are moving beyond maintaining component libraries. - Their role increasingly includes governing the broader set of tools and workflows through which people contribute to products. - This is especially important as AI enables contributors without traditional design or product titles to influence product experiences. - The provided excerpt ends while introducing this broader governance role, so the article’s fifth shift is not included. Overall, teams should treat design systems as active sources of craft and context—not merely collections of reusable components. Systems that make implicit knowledge explicit can help AI increase speed while keeping product decisions coherent and distinctive.

Read original

Design Tokens Figma AI Design Systems+2

figmaOct 27, 20253 min readCurated summary

Schema 2025: Design Systems For A New Era | Figma Blog

Figma’s Schema 2025 announcements present design systems as living infrastructure for an AI-driven product development process. They are evolving beyond static rules into a shared language connecting design, code, people, and AI. The updates focus on scaling across brands, enabling flexibility without sacrificing consistency, and improving the connection between design intent and implementation. ## Design systems for the AI era - As product, design, and engineering roles increasingly overlap, more people and AI tools contribute to product development. - Design systems can provide the common language needed to maintain consistency across these contributors. - Figma aims to help teams preserve quality and design intent while allowing ideas to evolve across products and platforms. - The announced features emphasize: - Power balanced with flexibility - Better connections between design and code - Broader participation in the design process ## Extended collections for multi-brand systems - Traditional variables work well for straightforward theming but can be limiting for organizations with multiple products and distinct brands. - Extended collections allow teams to create a white-labeled version of a core design system. - Individual teams can add, publish, and reuse their own themes while remaining connected to the parent system. - Extensions automatically inherit updates such as new variables or color changes. - Explicitly overridden values remain customized, allowing local flexibility without losing synchronization. - Extended collections are expected to become available in November. ## Slots for flexible components - Conventional Figma components restrict how designers can modify instances. - For example, dropdown components traditionally required hidden list items or detaching the component to add new content. - Slots will allow designers to insert their own layers inside component instances without breaking the connection to the design system. - Component authors can specify which types of instances a slot accepts. - This improves usability while preserving design-system compliance. - Slots are available through an early-access program. ## Check designs for better token usage - Developers often need clarification about which exact design token corresponds to a raw value in a design. - The Check designs linter identifies elements that should align with the design system, including variables. - Figma’s custom model suggests the appropriate variable for each context. - Designers can review suggestions before applying them and then hand off more reliable designs to development. - Early access is available to organizations and Enterprise full-seat plans. Figma’s direction is to make design systems more adaptable and intelligent: centralized enough to preserve consistency, but flexible enough for multiple brands, contributors, and use cases. Teams should look toward systems that can actively guide design and implementation rather than merely document standards.

Read original

Design Tokens Figma AI Design Systems+1

figmaOct 20, 20252 min readCurated summary

Design Systems: From the Basics to Big Things Ahead | Figma Blog

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

Read original

Design Tokens Figma AI Design Systems+3

figmaAug 5, 20253 min readCurated summary

Design Systems And AI: Why MCP Servers Are The Unlock | Figma Blog

Design systems provide the shared language AI agents need to generate code that is not merely functional, but consistent with a company’s brand, accessibility standards, and engineering practices. Figma argues that its MCP server unlocks this value by transferring design context—such as components, variables, styles, and code mappings—directly into developer workflows. The result is a feedback loop in which stronger design systems produce better AI output, while AI makes those systems more useful and scalable. ## Design Systems as Context for AI - Design systems already connect design and engineering through: - Shared patterns and terminology - Documentation and best practices - Brand guidelines and reusable code - These same elements give AI agents the context required to produce the “right” output rather than generic interfaces. - A mature design system can therefore become a productivity multiplier for AI-powered product development. - Organizations without a robust system can also use Figma’s MCP server to help implement tokens and components. ## Design Systems as the Shared Language - As AI lowers the barrier between ideas and implementation, product differentiation increasingly depends on craft, visual identity, and user experience. - Design systems help scale that craft while preserving speed, quality, and consistency. - Effective systems provide: - **Scalable foundations:** Tokens for color, spacing, typography, and other design decisions - **Reusable components:** Flexible elements built around a shared source of truth - **Built-in accessibility:** Inclusive experiences by default - They also prevent teams from shipping interchangeable, generic interfaces assembled from common AI-generated parts. ## Why Context Improves AI Code Generation - Figma reports that 68% of developers use AI to write code, but only 32% trust its output. - Without design-system context, AI behaves like a new engineer who has not been onboarded: its code may work, but it may not follow team conventions. - With that context, AI can: - Reuse existing components and patterns - Apply design tokens consistently - Generate higher-quality starting code - Reduce misunderstandings and shorten design-engineering feedback loops ## How Figma’s MCP Server Works - When developers inspect a Figma frame, the MCP server sends relevant context to an AI agent, including: - Components - Styles - Variables - Variable code syntax - **Code Connect** can map design elements to real code resources, allowing agents to use existing implementation libraries. - Even without these mappings, the server supplies styling information that helps agents create more design-informed code. - Automated design-system rule generation can scan a codebase and produce a structured rules file covering: - Token definitions - Component libraries - Style hierarchies - Naming conventions - This file gives AI agents system-level defaults, reducing the need for developers to repeat detailed instructions in every prompt. - Figma MCP also provides annotations that can communicate extra context, including accessibility and interaction behavior. ## The Design-System and AI Flywheel - Better design systems provide richer context to AI agents. - Better context leads to more accurate, on-brand code. - Improved AI output can make design-system adoption and maintenance more valuable. - This creates a reinforcing cycle: robust systems improve AI results, and AI helps teams apply and extend those systems more effectively. Teams seeking reliable AI-generated product code should treat their design system as essential infrastructure and connect it to development tools through mechanisms such as MCP, Code Connect, tokens, rules, and annotations.

Read original

Design Tokens Figma Design Systems AI Agents+2

figmaMay 4, 20252 min readCurated summary

How Polaroid Is Building its Next Era of Innovation | Figma Blog

Polaroid is reinventing its iconic instant-photography business for the digital era while preserving its creative heritage. The company uses Figma to unify design across its website, camera products, and mobile apps, enabling faster collaboration and more consistent user experiences. A centralized design system and more capable prototypes help the team validate ideas early and reduce costly development changes. ## Preserving Polaroid’s Creative Legacy - Polaroid became culturally significant through Edwin Land’s instant-camera innovations and its use by artists such as Andy Warhol, Ansel Adams, and David Hockney. - Digital photography threatened the company’s survival, leading to the closure of its last film factory in 2008. - The Impossible Project acquired the factory, recreated Polaroid film chemistry, and eventually obtained the Polaroid brand. - The modern company now combines instant cameras and film with photo printers, connected-camera apps, and other digital products. ## Building a Single Source of Truth - Before adopting Figma, designers worked in separate files and fragmented workflows. - The lack of shared components and a centralized design system caused duplication, slowed iteration, and limited the team to designing primarily for iOS. - Figma’s cloud-based collaboration gives designers and other departments shared visibility, supporting remote work and cross-functional discussion. - Design tokens and variables allow Polaroid to: - Support light and dark modes. - Adapt designs across iOS and Android. - Change default fonts by platform. - Match an app’s theme to a camera’s colorway. - Show users only the camera model they own during device setup. - Figma UI kits provide starting points, while plugins such as Autoflow help map user journeys. ## Using Prototypes to Validate Ideas Earlier - More powerful Figma prototypes let the team test realistic user flows before development. - Users can navigate freely and change settings, producing more natural feedback than earlier prototype methods. - User testing reveals actual behavior instead of relying on assumptions. - Early validation improves product quality, saves time, and prevents expensive revisions later. Polaroid’s experience suggests that a shared design system combined with realistic prototyping can help legacy brands modernize efficiently while maintaining a recognizable creative identity.

Read original

Design Tokens Figma Design Systems User Experience+4

figmaApr 7, 20253 min readCurated summary

How to Streamline Your Design System Workflow in Figma | Figma Blog

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

Read original

Design Tokens Figma Design Systems CSS+4

figmaMar 24, 20252 min readCurated summary

Making the Move to UI3: A Guide to Figma’s Next Chapter | Figma Blog

Figma will retire UI2 on April 30, 2025, making UI3 the standard interface. The redesign prioritizes canvas space, streamlines workflows, and enables features that will only be available in UI3, ahead of Config. Although users may need time to rebuild muscle memory, Figma argues that the changes ultimately make the product more intuitive and efficient. ## UI3 Becomes the New Standard - Figma is ending support for UI2 on April 30. - New features and experiences planned around Config will be available only in UI3. - Figma says it has incorporated user feedback before the full transition. - Recent refinements include: - Replacing the redundant “Reset others” icon - Simplifying boolean-operation labels - Removing duplicate actions from the overflow menu - Updating the mask icon for clarity - Restoring a tidy-up experience closer to UI2 - After the transition, the Properties panel will become a major focus for further improvements. ## Adjusting to the Redesigned Interface - The author initially hesitated because established workflows and muscle memory make interface changes difficult. - After using UI3, they found the redesign more effective rather than merely different. - Reported adjustment times vary: - Some users adapted within a few hours. - Others needed about a week to rebuild muscle memory. - The overall response presented in the article is that UI3 quickly becomes familiar and comfortable. ## Smart Eyedropper Selection - The eyedropper shortcut remains **I**, but the tool now understands more than raw color values. - It stays active while inspecting the canvas and supports switching between color models such as: - Hex - HSB - RGB - When hovering over a color, style, or variable, Figma can identify and display the underlying style or variable instead of only showing a hexadecimal value. - UI3 also allows users to create variables directly where they are working, reducing interruptions to the design workflow. UI3 is positioned as a necessary transition rather than an optional visual refresh. Users should begin adapting before April 30, while taking advantage of its improved variable handling, streamlined controls, and more canvas-focused layout.

Read original

Design Tokens Figma Design Systems Prototyping+1

figmaFeb 10, 20252 min readCurated summary

Making Metrics Matter | Design Systems 104 | Figma Blog

Design systems create measurable business value, not just reusable components and documentation. Figma argues that tracking adoption, usage, consistency, and time savings helps teams prove that value and identify where systems need improvement. The evidence is significant: designers with access to a design system completed tasks 34% faster, while some companies reported time savings of up to 50%. ## Measuring the Value of Design Systems - Figma’s research found that design-system users completed tasks **34% faster** than those without access. - For a team of seven designers, this efficiency is comparable to adding **3.5 designers’ worth of capacity each week**. - Participants also felt more confident because the system helped ensure their work aligned with the broader product. - Vanguard reported design updates happening **50% faster** with effective systems. ## Adoption and Usage as Business Signals - Creating components and documentation is only the starting point; measuring actual adoption reveals whether the system is delivering value. - Headspace reported: - **20–30% time savings** on straightforward tasks. - Up to **50% savings** on complex projects through tokens and variables. - Swiggy cut feature rollout time in half after implementing stronger tracking. - These results connect design-system usage to improved consistency, efficiency, and scalability. ## Reading the Signals Organizations should choose metrics that reflect their goals, including: - **Library and component usage:** Track which components, variables, and styles are frequently used. - High usage identifies the system’s most valuable “workhorses.” - Low usage can reveal elements that need improvement, replacement, or deprecation. - Tracking time saved through component reuse provides a concrete benefit that can help secure stakeholder support. A practical approach is to measure not only what a design system contains, but how consistently and effectively teams use it.

Read original

Design Tokens Figma Design Systems Metrics+2

figmaJan 22, 20252 min readCurated summary

Documentation That Drives Adoption | Design Systems 103 | Figma Blog

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

Read original

Design Tokens Figma Design Systems Dev Mode+3

figmaNov 20, 20243 min readCurated summary

The Making of the Figma Pattern Library | Figma Blog

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.

Read original

Design Tokens Figma Design Systems Accessibility+4