Design Tokens | Techlist.io

figmaJul 12, 20232 min readCurated summary

How Thumbtack structures their design system | Figma Blog

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.

Read original

Design Tokens Design Systems React Accessibility+3

figmaJun 20, 20233 min readCurated summary

Config 2023 in Review: The Complete Recap | Figma Blog

Figma’s Config 2023 announcements reposition the platform as a workspace for the entire product development team, not just designers. The major launches—Dev Mode, variables, and advanced prototyping—aim to connect design more directly with code, development workflows, and real product behavior. Supporting updates to auto layout, fonts, and file discovery further improve everyday work, while Figma also signals a major investment in AI through its acquisition of Diagram. ## Dev Mode Connects Design and Development - Dev Mode is a dedicated Figma workspace designed around developers’ needs. - It helps developers: - Translate designs into code more quickly. - Connect Figma to Jira, GitHub, Storybook, and other tools through plugins. - Track designs and changes that need to reach production. - Inspect Figma files alongside code in VS Code. - Dev Mode launched in beta and was available free through 2023. ## Variables Bring Design Systems Closer to Code - Figma introduced variables to make design systems more flexible and scalable. - Variables can store reusable: - Colors - Numbers - Text values - Boolean values - They support aliasing and scoping, allowing teams to organize and contextualize values. - Variable modes enable themes such as light and dark designs. - Plugin and REST API support allows teams to manage variables programmatically. - The goal is to connect design tokens and systems more directly with the code that implements them. ## Advanced Prototyping Makes Designs More Dynamic - Variables can now be used in prototypes to represent changing application state. - Designers can use mathematical expressions and conditional logic, such as: - Increasing a number variable after each click. - Navigating to different screens depending on a variable’s value. - These capabilities let teams test realistic interactions before development begins. - In-context editing and inline preview allow designers to edit and play back prototypes in the same view. ## Quality-of-Life Improvements - Auto layout gained wrapping and minimum/maximum width and height controls. - The font picker now supports search, filtering, and previews displayed in each font. - The file browser makes it easier to locate files and projects shared by external teams. ## Figma’s Investment in AI - Figma expects AI to help people express ideas visually, speed up workflows, and create strong first drafts. - The company argues that turning a good draft into a world-class product will still require human judgment and expertise. - Figma acquired Diagram, founded by Jordan Singer, to accelerate AI development across the platform. - Diagram had previously built AI-assisted design tools on Figma’s platform. Overall, Config 2023 presents Figma as a shared environment spanning design, prototyping, development, and increasingly AI-assisted creation. Teams should consider Dev Mode and variables as the most significant changes for improving handoff, design-system management, and collaboration with engineering.

Read original

Design Tokens Figma Design Systems Prototyping+4

figmaMay 17, 20232 min readCurated summary

Four years in, here’s what Config tells us about the state of design | Figma Blog

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.

Read original

Design Tokens Figma AI Design Systems+3

figmaNov 9, 20222 min readCurated summary

Taking cues from code | Figma Blog

Design systems are becoming more complex as teams collaborate across interconnected products, and Figma argues that design can learn from software engineering. The goal is to introduce structure without eliminating creative flexibility. The article highlights component composition and decoupling structure from presentation as ways to make systems more adaptable and scalable. ## Design Borrowing from Code - Design was once largely local and isolated, with files stored on individual machines. - Modern design involves larger teams, shared ecosystems, and dependencies across products and files. - Design systems help maintain consistency and quality at scale, but excessive structure can restrict exploration. - Figma sees software engineering patterns as useful models for handling this complexity. ## Nesting Components for Flexible Layouts - Simple systems can represent variations through component variants. - As the number of layouts grows, maintaining every variation separately becomes difficult. - Component properties can support limited optionality, such as cards with or without images or pull quotes. - Properties are insufficient when components differ substantially in orientation and structure. - Composition offers a more flexible approach: - Designers create small, reusable sub-components. - These sub-components are nested inside larger, layout-specific components. - The same building blocks can be recombined into many arrangements. - This reduces the need to anticipate every possible layout when designing the system. ## Decoupling Structure from Presentation - Basic design systems often hard-code a single visual theme into each component. - Teams may later add light and dark modes, followed by themes for different products, brands, or sub-brands. - As the number of themes increases, maintaining colors and styles becomes increasingly burdensome. - The article introduces headless design systems as an architectural response to complex theming requirements, separating a component’s underlying structure from its visual presentation. A scalable design system should favor composable building blocks and flexible theming rather than attempting to encode every possible layout and brand variation directly into monolithic components.

Read original

Design Tokens Design Systems Component Architecture Theming+2

figmaOct 3, 20222 min readCurated summary

A sneak peek at Schema 2022 | Figma Blog

Schema 2022 is Figma’s annual conference focused specifically on design systems rather than design in general. The event combines in-person gatherings in New York, London, and Tokyo with a virtual livestream, bringing together designers, developers, and advocates to discuss practical challenges, emerging standards, and cross-disciplinary collaboration. ## A Global Design Systems Conference - Schema 2022 includes: - In-person events in New York, London, and Tokyo - A virtual event open to anyone unable to attend in person - Community meetups in each host city - Each city features a distinct lineup of speakers representing different areas of design expertise. - The conference is invite-only, but interested attendees can apply online. - Talks were later made available through DesignSystems.com. ## A More Focused Conference Than Config - Whereas Figma’s Config conference addresses design broadly, Schema concentrates on the specialized field of design systems. - Its narrower focus allows speakers and attendees to explore the field’s specific opportunities and challenges in greater depth. - Organizers aim to balance innovative content with introductory material for people who are still new to design systems. ## Collaboration Between Designers and Developers - Design systems require a mix of design, engineering, and organizational skills. - Schema is intended to encourage “creative cross-pollination” between designers and developers. - Designers can share ideas for plugins, extensions, and integrations. - Developers can demonstrate tools and systems they are building. - The event highlights how design systems create a shared language between the two disciplines. ## Design Tokens and Emerging Standards - The W3C Design Tokens Community Group is highlighted as an important part of the program. - Design tokens provide a technology-agnostic way to scale visual design across tools, devices, and platforms. - The group is working toward standards that allow products and design tools to share design-system styles consistently. - Figma’s developer advocates are especially interested in how the group addresses accessibility and internationalization early in the standards process. Schema 2022 presents design systems as both a specialized practice and a meeting point for design and software engineering. Its recommendation is implicit: people working with design systems should use the event and its talks to learn from adjacent disciplines, follow developing standards such as design tokens, and connect with the broader community.

Read original

Design Tokens Figma Design Systems Accessibility+2

figmaMay 23, 20222 min readCurated summary

A look back at Config 2022 | Figma Blog

Config 2022 brought together more than 100 speakers for 24 hours of talks on ambitious, urgent design work. The event covered topics ranging from Web3 and research strategy to design systems and emerging technologies. A central message was that designers can create meaningful local or global change by designing more inclusively and acting with urgency. ## Designing for Different Digital Experiences - Yuan Qing Lim discussed designing for Chinese users who moved directly from limited PC use to widespread mobile internet. - Three themes shaped the discussion: - **“More is More”**: Chinese digital products often embrace rich, maximalist experiences. - **Super apps**: Users expect broad functionality within unified platforms. - **Community**: Digital experiences should reflect strong social and communal behaviors. - The goal is to better serve China’s roughly 1 billion internet users by accounting for local expectations rather than applying Western design assumptions. ## Designing for New Internet Users - Rahul Goradia focused on people who are new to the internet, a group often overlooked by mainstream UX practices. - This population is especially significant in India, where internet access is expected to grow rapidly. - Designers should use usability testing to make e-commerce approachable for newcomers. - Products must account for changing behaviors, particularly as users adapt to a post-pandemic digital environment. ## A Broad Program of Design Topics - Other Config 2022 sessions explored: - Decentralizing design through Web3 - Turning research findings into strategy and product development - Design systems and their limitations - UX writing and product copy - Design tokens and collaboration - Dark-mode implementation - Multi-platform design systems - Designing super apps for Southeast Asia’s cultural diversity The event’s practical takeaway is to design for a wider range of users, challenge assumptions about “standard” digital behavior, and use research and collaboration to make products more accessible and effective.

Read original

Design Tokens Figma Design Systems User Experience+4

figmaSep 1, 20202 min readCurated summary

Creating multi-brand design systems | Figma Blog

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

Read original

Design Tokens Design Systems JavaScript Web Development+2

figmaMay 9, 20183 min readCurated summary

Material Design + Figma Styles = 🔥 | Figma Blog

Figma’s Styles feature makes Material Design easier to customize for different brands while preserving a shared, systematic foundation. The article presents a Material UI kit that uses global styles and nested components to theme colors, typography, elevation, grids, shapes, and icons across an entire design system. This approach helps teams move beyond generic stock interfaces toward consistent but distinctive branded experiences. ## The Challenge of Theming Material Design - Material Design improves usability and consistency across Google and Android applications. - Using the same components everywhere can make products feel generic and less connected to their brands. - Material’s broad component library creates a challenge: designers need an efficient way to customize an entire system rather than editing components individually. - Themed Material Design aims to preserve the system’s strengths while enabling more memorable brand expression. ## Figma Styles for Global Customization - Figma Styles define reusable global text, fill, stroke, effect, and grid settings. - Updating a style automatically changes every instance across the document. - Styles can be shared through team libraries and reused across projects. - This makes Styles well suited to theming large UI kits and design systems. ## Material Colors, Typography, Elevation, and Grids - **Colors:** Fill styles control primary and secondary colors, typography emphasis levels, and surface swatches. Changing a brand palette can update many components at once. - **Typography:** Text styles cover Material’s type specifications, using Roboto by default but allowing teams to substitute their own typeface. Font changes may require adjustments to size and spacing. - **Elevation:** Preset shadow styles represent Material’s elevation levels, simplifying shadows that may otherwise require combinations of up to three drop shadows. - **Grid:** A reusable 4dp baseline grid can be applied to frames and components, alongside custom desktop, tablet, or mobile grids. ## Combining Styles with Components - Nested components allow teams to globally control the shape of buttons, floating action buttons, and cards. - Designers can switch between sharp corners, cut corners, and rounded corners by toggling nested component visibility. - Changes propagate throughout the system, though updates across hundreds of components may take several seconds. - Individual component instances can still override shared settings when specialized styling is needed. ## Icon Libraries - Material offers five icon styles. - To keep the main kit manageable, each icon style was organized into a separate sticker-sheet document. - Teams can copy icons directly or publish the sheets as shared libraries for use across projects. Figma Styles combined with components provide a practical way to build Material-based systems that are globally consistent, easily maintained, and adaptable to individual brands.

Read original

Design Tokens Figma Design Systems Responsive Design+2