Design Systems

252 posts

figmaApr 7, 20242 min readCurated summary

How to Build a Design System | Design Systems 102 | Figma Blog

A design system creates a shared language and reusable components that improve product consistency, team efficiency, and collaboration. Figma recommends building one around the organization’s specific goals and challenges rather than following a universal formula. The process begins with understanding the problem, auditing existing work, involving cross-functional partners, and choosing an approach that can evolve over time. ## Lay the Groundwork - Define why the design system is needed: - What problems should it solve? - What goals should it support? - How will success be measured? - Recognize that systems vary in scope: - Small teams may need a simple component library. - Enterprise organizations may require a comprehensive system. - Design the system to grow as product and team needs change. ## Take Stock of Existing Design and Code - Collect screenshots and examples of the product across: - Platforms and devices - Interactive states - Alternate versions - Look for recurring patterns and consistent UI elements that can become system foundations. - Audit the codebase for existing reusable components, shared CSS variables, and repeated UI patterns. - Build on existing engineering work instead of creating disconnected design and development systems. ## Organize and Evaluate the Product Landscape - Categorize the collected examples to understand the current design language. - Identify: - Inconsistencies across products or platforms - Redundant solutions - Disconnected user experiences - Problems being solved differently by designers and developers - Use these findings to prioritize where a unified system can provide the greatest value. ## Find Cross-Functional Champions - Involve designers, developers, product managers, and other stakeholders. - Seek people who care about consistency and can advocate for the system internally. - Include developers early because they can assess: - Technical feasibility - Implementation requirements - Long-term maintenance - A design system can begin with a single dedicated contributor, but broader collaboration helps it serve the whole product team. ## Choose an Approach - Decide whether to: - Build a custom system from scratch - Adopt an existing framework and adapt it to the organization’s needs - The best choice depends on the team’s goals, existing assets, technical context, and available resources. A practical starting point is to define measurable goals, audit both design files and production code, and form a cross-functional group before creating components. This ensures the design system addresses real product problems and remains useful as the organization evolves.

Design Systems Figma User Experience User Interface+3

figmaApr 2, 20242 min readCurated summary

Join Us for Framework by Figma: Our Global Design Systems Event | Figma Blog

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

Design Systems Figma Accessibility Design To Code+3

figmaFeb 13, 20242 min readCurated summary

5 Things Designers Need to Know for a Smooth Handoff | Figma Blog

Design handoff should be treated as an ongoing process of communication and collaboration, not a single event at the end of design. The article argues that clear annotations, shared terminology, and organized files help ensure that “Ready for dev” genuinely means developers have the context they need. These practices reduce ambiguity while preserving conversations between designers and developers. ## Streamline and Clarify Callouts - Use annotations to explain design intent and highlight details that might otherwise be missed. - Focus callouts on information developers actually need, such as: - New components - Specific interactions not obvious from a prototype - Platform-specific differences - Specs, measurements, and behavior - Avoid duplicating information already captured through variables or styles. - Figma’s annotations in Dev Mode can pin measurements, properties, and notes directly to designs. - Annotations are intended to improve—not replace—designer-developer discussions. ## Adopt a Shared Language - Design and development may use different terms for similar concepts, so teams should align on naming early. - Clarify terms such as “toggle” or “switch” to avoid misunderstandings. - Coordinate variable, style, and component names with conventions already used in code. - Use variables and styles for foundational properties such as: - Fonts - Colors - Spacing - Shared names like `bg-primary-active` are more reliable than manually communicating hex codes or font specifications. - A color wheel within the design system can help teams consistently reference shades and tints. ## Organize Files with Labels - Infinite canvases can become difficult for developers to navigate, especially when they contain unfinished explorations. - Clean up and structure files before inviting developers to build. - Use sections to group related designs and reduce navigation overhead. - Mark completed sections or frames with a “Ready for dev” status so developers know where to focus. - Standardized team templates can reduce context switching and create a more predictable handoff process. A smooth handoff depends on shared context, precise communication, and intentional file organization. Designers should tailor annotations and terminology to their development partners, then clearly separate exploratory work from implementation-ready designs.

Design Systems Figma Design Tokens Dev Mode+3

figmaFeb 11, 20243 min readCurated summary

What Is a Design System | Design Systems 101 | Figma Blog

Design systems provide a shared foundation for designing and building consistent digital products. They combine principles, visual standards, reusable components, documentation, and development guidance to reduce duplication and prevent confusing or fragmented user experiences. Rather than limiting creativity, a well-designed system gives teams a common language and lets them focus on solving higher-level product problems. ## What a Design System Is - A design system is a collection of building blocks, standards, resources, and processes that guide product design and development. - It acts as a blueprint for an organization’s product ecosystem, covering: - Design tokens and technical specifications - Documentation and best practices - UX principles and decision-making processes - Brand, accessibility, and usability guidance - Its goal is to make products more consistent while reducing the time spent recreating common elements and patterns. ## The Three-Level Structure ### 1. The Design System - The highest-level container includes the organization’s overall guidance and evolving processes. - It may include design principles, documentation, technical specifications, tokens, and product-development standards. ### 2. Component and Pattern Libraries - Component libraries contain reusable interface elements such as buttons, input fields, and other UI controls. - Pattern libraries describe broader solutions, such as navigation flows, layouts, and data-display approaches. - These libraries can include: - Templates and layouts - Interaction patterns - Design components - Code snippets - Technical specifications - Usage documentation - They connect design and development by translating design intent into implementable code and shared practices. ### 3. Foundational Elements - Foundational elements establish the product’s visual language and voice. - Common examples include: - Color - Typography - Icons and logos - Illustrations - Voice and tone - Brand guidelines - Accessibility standards ## Design Systems Versus Related Resources - A component library focuses on individual UI elements, while a pattern library addresses complete interface solutions or user flows. - A design system is broader than a style guide: - Style guides mainly document visual elements such as colors, typography, and imagery. - Design systems also include components, coding standards, usability guidance, processes, and documentation. ## More Than Visual Consistency - Design systems influence the full user experience, not just appearance. - Consistent colors, icons, button behavior, language, and layouts help users understand and navigate products more easily. - The article challenges the idea that design systems eliminate creativity or force every design to look identical. - Instead, they handle repeated design and implementation decisions so designers can spend more time addressing unique product and user needs. A practical design system should be treated as an evolving shared foundation rather than a static style guide. Combining reusable components with clear standards, documentation, accessibility guidance, and development support helps teams scale product work without sacrificing consistency or usability.

Design Systems User Experience Accessibility Design Tokens+2

figmaFeb 1, 20242 min readCurated summary

An Insider’s Guide to a Seamless Figma Migration | Figma Blog

Migrating to Figma is presented as an organizational change—not merely a software switch. Success depends on careful planning, cross-functional communication, advocacy, training, and adaptation of existing workflows and cultural norms. The article argues that treating migration as a strategic investment can produce long-term gains in collaboration, transparency, and productivity. ## Planning the Migration - Begin by identifying the reasons for adopting Figma, such as: - Better collaboration - Greater transparency - Streamlined processes - Treat migration as a change-management initiative involving the entire organization. - Plan around team commitments and existing tool-expiration dates. - Use resources such as Figma’s Migration Toolkit for guidance when moving from other design platforms. ## Building a Cross-Functional Advocacy Team - Create a core team with representatives from design, development, product management, and stakeholder groups. - Give the team responsibility for: - Gathering balanced feedback - Configuring the Figma workspace - Managing communications - Coordinating library transfers - Successful examples include: - Wells Fargo’s “Figma Jedis,” combining experts and enthusiastic users - Uber’s integration of Figma training with an existing design-system workshop - JPMorgan Chase’s advocates, nominated by leadership and cross-functional groups - The strongest advocates are engaged, representative of different departments, and connected to existing initiatives. ## Securing Organization-Wide Support - Obtain buy-in from developers, product managers, leadership, and other stakeholders—not only designers. - Present a clear proposal outlining the benefits and drawbacks of migration. - Build support through: - Workshops and demonstrations - Best-practice sharing - Early access to libraries and components - Training and practical guidance - Dropbox’s migration shows the value of sustained outreach and creative engagement, including extensive internal promotion and Figma-themed incentives. ## Learning from Other Organizations - Contact teams that have already completed large-scale migrations. - Their experience can provide: - Training plans - Deployment playbooks - Cover pages and workspace conventions - Warnings about common mistakes - Examples from Wells Fargo, Uber, and Dropbox demonstrate how peer advice can improve rollout planning and reduce avoidable problems. - Large migrations benefit from studying proven approaches rather than designing every process from scratch. ## Establishing a Migration Timeline - Build a schedule that accounts for: - Team availability - Existing project commitments - Expiration dates for current tools - A defined timeline helps coordinate the transition and gives teams a clear path from planning to adoption. The practical recommendation is to manage a Figma migration as a coordinated organizational program: assemble advocates, involve every relevant function, learn from experienced teams, and create a realistic timeline before moving work and libraries.

Design Systems Figma Design Collaboration Design Tools+2

figmaJan 30, 20243 min readCurated summary

Everything You Need to Know About Dev Mode | Figma Blog

Figma built Dev Mode to make the transition from design to code more efficient for developers, who now represent roughly one-third of its weekly active users. Rather than separating developers into different tools or files, Figma created a dedicated space within the same collaborative environment. After an open beta shaped by extensive user feedback and more than 200 updates in its first two months, Dev Mode moved out of beta with a focus on clearer handoff and developer-centered workflows. ## Why Figma Built Dev Mode - Developers were already using Figma alongside designers, product managers, and other collaborators, despite Figma not being optimized for their workflows. - Figma wanted to support varied development roles, including: - Front-end developers working with design systems - Design systems engineers building components - Developers implementing content layouts and exporting assets - In 2021, Figma acquired Visly, a team of eight designers and engineers experienced in React UI development and developer tooling. - The Visly team emphasized that developers should not have to learn every interaction in design mode; the experience should be tailored to their needs. ## An Integrated Development Workspace - Figma considered both fully separate files and tightly integrated design and development experiences. - It ultimately chose a dedicated mode inside Figma: - Developers get tools and workflows optimized for implementation. - They retain access to the design context and collaboration surrounding the work. - The approach avoids forcing teams to switch tools or lose important information during handoff. - Dev Mode launched as an open beta at Config 2023, with customer feedback driving rapid improvements and over 200 requested updates delivered in the first two months. ## Communicating Design Intent - Traditionally, designers had to manually create measurements, callouts, and organized specifications for developers. - Dev Mode introduces annotations that remain connected to the design and update as the design changes. - Designers can: - Click and drag to measure - Highlight important details without cluttering the canvas - Add live specifications and contextual notes - Automate or customize annotations through plugins - Designers can mark a section as “ready for development” without creating a separate file or page. - Developers can use diffing tools to compare changes between versions and stay current with design updates. ## Practical Impact Dev Mode is intended to make design handoff less manual and more collaborative by giving developers a purpose-built workspace without removing them from Figma’s shared context. Teams can use annotations, readiness labels, and frame comparisons to reduce ambiguity and keep implementation aligned with evolving designs.

Design Systems Figma React Design To Code+3

figmaJan 30, 20242 min readCurated summary

The Art and Science of Annotations in Dev Mode | Figma Blog

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

Design Systems Figma Accessibility Dev Mode+2

figmaJan 25, 20242 min readCurated summary

Six Myths Holding You Back from Embracing Design Systems | Figma Blog

Design systems are not reserved for large companies or teams with advanced design practices. Figma argues that the best system is practical, goal-oriented, and tailored to an organization’s brand, users, and needs—not copied from industry trends or famous examples. By challenging common assumptions, teams can adopt design systems more confidently and incrementally. ## Design Systems Benefit Teams of All Sizes - Small organizations can use design systems to improve efficiency, consistency, and collaboration. - The system’s scale and appearance may vary, but its core purpose remains the same. - Mixpanel’s redesign is cited as an example of using a design system to reduce costs, improve consistency, and make analytics more accessible. ## A Design System Does Not Need Every New Technique - Design trends change constantly, and no single approach is universally correct. - Teams should learn from industry practices without becoming distracted by building a “perfect” or fashionable system. - A useful design system should serve clear organizational goals rather than imitate the latest trends. ## Material Design Is Not a Universal Solution - Google’s Material Design is influential, but it is not automatically suitable for every organization. - Design systems should reflect a company’s brand identity, user needs, and business objectives. - Teams should balance established standards with solutions appropriate to their current context. - Examples such as Uber Base, Spotify Backstage, Pipedrive, Microsoft Teams, and Salesforce Lightning demonstrate that successful systems can differ significantly. ## You Do Not Have to Build Everything From Scratch - The article begins addressing the misconception that every design system must be created internally from the ground up. - Open-source design-system resources and existing UI kits can provide a starting point. - Reusing proven foundations can help teams move faster while adapting components to their own requirements. The practical recommendation is to start with the problems your team needs to solve, then adopt or create only the structure necessary to address them.

Design Systems Open Source Design Thinking Component Library+3

figmaJan 24, 20242 min readCurated summary

What’s next for Dev Mode: Annotations, Compare Changes, Plugins, and More | Figma Blog

Figma is moving Dev Mode out of free beta on January 31, 2024, while adding features designed to improve design-to-development handoff. The update introduces connected annotations, richer visual and code comparisons, customizable plugins, Jira integration, and a redesigned VS Code experience. Dev Mode will require a paid seat after the beta ends. ## Annotations for clearer handoff - Designers can add measurements, properties, specifications, and contextual notes directly to design layers. - Annotations update automatically when the associated design changes. - They appear or disappear at different zoom levels, keeping designs informative without cluttering the canvas. - Teams can use plugins to create and manage annotations in bulk. ## Visual and code-based change comparisons - The compare changes experience has been redesigned to show differences both visually and in code. - The Figma for Jira app brings design context into Jira issues. - Jira users can receive notifications when related designs change. ## Custom code generation with plugins - Codegen plugins let teams generate code for technologies such as HTML, React, Tailwind, and Bootstrap. - Organizations can customize generated output around their frameworks, design systems, component libraries, and internal APIs. - Plugins can validate design-system usage, link to documentation, and identify existing code components. - Enterprise administrators can pin plugins and configure them to run by default across organizational files. - Figma highlights custom implementations such as Razorpay’s RazorSharp plugin. ## Improvements to Figma for VS Code - The extension makes it easier to inspect designs without switching between tools. - A redesigned navigation experience replaces difficult canvas panning with a grid of frames. - Developers can open individual frames in a focused view. - Plugins can now run directly in VS Code, including private and customized tools. Teams using Dev Mode should prepare for the paid-seat requirement and evaluate annotations, plugins, Jira integration, and the VS Code extension to fit their existing handoff and design-system workflows.

Design Systems Figma Dev Mode Plugins+4

figmaJan 8, 20244 min readCurated summary

How Razorpay Sharpened Developer Workflows | Figma Blog

Razorpay built Blade, a cross-platform design system, to create consistent, accessible experiences across its many products while accelerating collaboration between designers and developers. Its success depends not only on reusable components, but also on adoption metrics, advocacy, developer tooling, and tight integration between design and code. Tools such as Blade Coverage, RazorSharp, Dev Mode, Storybook links, and Figma variables have significantly reduced handoff friction and improved productivity. ## Blade’s Cross-Platform Structure - Razorpay has around 70 designers and 100 front-end developers. - Three designers and five engineers work full-time on Blade. - Blade supports desktop web, mobile web, iOS, and Android through a shared API and common properties. - This allows developers to transfer knowledge between platforms without rebuilding the system for each one. ## Problems Blade Solved - Before Blade, teams frequently hard-coded custom components and missed details such as: - Button states - Text-field error handling - Accessibility requirements - Repetitive, ad hoc development led to inconsistent user experiences across Razorpay’s products and domains. - Blade provides: - A shared design and development language - More consistent experiences across products - Built-in accessibility - Faster collaboration and shorter time to market - Designers and developers are treated as Blade’s customers, while end users benefit from the resulting consistency and reliability. ## Driving Design System Adoption - Razorpay uses several strategies to reduce adoption friction: - Securing leadership support for funding and organizational adoption - Tracking metrics such as onboarded projects and the percentage of apps using Blade components - Holding office hours and maintaining a support Slack channel - Creating an advocacy group of designers from consumer teams - Announcing new components through demo videos and status-page updates - These practices make Blade visible, supported, and easier for individual teams to adopt. ## Measuring Impact and Coverage - Blade’s north star is enabling teams to ship polished interfaces while the system handles common design and implementation work. - Its adoption targets are: - 70% Blade usage for new features - 50% usage for existing product surfaces - Razorpay discovered that adoption begins during design, not just development. - The Blade Coverage plugin shows designers where their designs diverge from Blade components, helping them: - Identify issues earlier - Predict launch timelines more accurately - Reduce handoff friction - Quantitative metrics are supplemented with surveys and focus groups measuring speed, documentation, training, collaboration, and user experience. - These findings contribute to an annual Net Promoter Score for the design system. ## RazorSharp and Improved Developer Handoffs - Before Dev Mode, developers had to inspect designs manually, identify components and properties, and reproduce them in code. - A developer created RazorSharp as a private plugin that automatically generated equivalent code for designs. - Initially, Figma required edit access to run plugins, forcing developers to clone shared files before using RazorSharp. - When Figma introduced Dev Mode, Razorpay adapted RazorSharp to work there in just two days. - Developers can now inspect designs and generate implementation code without editing or duplicating files. - Dev Mode also includes links to Storybook, allowing developers to move directly from a design component to its code playground. ## Variables and Design Tokens - Razorpay is transitioning its design tokens to Figma variables. - This makes token copying more seamless and supports developer-friendly naming such as `surface.text.subtle`. - Spacing tokens are now mapped to variables, addressing a frequent request from consuming teams. - Variables make light and dark modes easier to implement without duplicating entire designs. - Previously, multiple themes and modes caused Blade files to consume large amounts of memory and slowed designers down. - Consolidating Blade into a single theme with variables has substantially improved design performance. Razorpay’s approach shows that a design system is most effective when it is treated as an internal product: it needs leadership support, measurable adoption goals, user support, and tooling that connects design directly to implementation. Teams building similar systems should invest in both component quality and the workflows that make those components easy to discover and use.

Design Systems Figma Design Tokens Web Development+3

figmaDec 7, 20233 min readCurated summary

Why Cultivating a Prototyping Culture Will Help You Build Better Products | Figma Blog

Prototyping should move from a last-minute design enhancement to an integral part of product development. Interactive prototypes expose navigation, usability, and feasibility problems before engineering investment, while enabling teams to explore more ideas and secure stakeholder support. The article argues that organizations need shared skills, dedicated time, and leadership support to make prototyping an everyday practice. ## Prototyping as an Early Validation Tool - A prototype is a mock-up or interactive demonstration used to test and refine a product concept. - Unlike static designs, interactive prototypes reveal how an experience actually works, including: - Navigation complexity - Interaction problems - User-testing obstacles - Gaps between design intent and technical implementation - Introducing prototypes early can reduce wasted engineering effort and streamline collaboration between designers and engineers. - Prototypes let teams evaluate an idea’s value before committing to development or visual polish. ## The Power of Rapid Experimentation - Teams can quickly generate and validate multiple concepts without creating separate development cycles. - Exploring broadly before narrowing down encourages more innovative and unconventional experiences. - Proofs of concept help designers communicate ideas clearly and gain approval from stakeholders and senior leadership. - Advanced prototyping gives designers a stronger voice in product and business decisions by allowing them to demonstrate—not merely describe—their proposals. ## Building a Prototyping Culture - The growing emphasis on prototyping resembles the adoption of design systems, which also evolved from specialized practice into an organizational capability. - Companies such as Lyft encourage designers to move beyond static mockups by using: - Videos - GIFs - Interactive prototypes - Organizations must invest time and resources in training so prototyping becomes a natural, enjoyable part of the workflow rather than an obstacle. - Successful adoption requires alignment across the company: - Individual contributors need to build prototyping expertise. - Leadership must recognize its impact on efficiency and decision-making. - Managers should explicitly make time for prototyping in the product process. - Training programs and employee initiatives can help develop prototyping skills and apply them during important product reviews. ## Rewriting the Product Development Process - Prototyping challenges the idea that product development follows a simple linear sequence. - Adding prototypes earlier introduces more iteration, but it also helps teams identify obstacles and compare alternatives sooner. - Designers can use these insights to avoid known problems and move more directly toward viable solutions. - The shift affects the entire product organization, not only the design team, because prototyping changes how teams collaborate, make decisions, and obtain buy-in. Organizations should treat prototyping as a core product-development capability: provide training, protect time for experimentation, and require interactive validation early enough to influence the product—not merely decorate the final design.

Design Systems Figma Prototyping Product Development+2

figmaDec 6, 20232 min readCurated summary

From Slack-lash to Toggle Tax: The New Vernacular of Work | Figma Blog

The article presents a playful glossary for the changing realities of digital and hybrid work. These terms capture common frustrations, habits, and moments in modern workplaces—from endless notifications and multitasking to awkward meetings and collaborative design. Together, they suggest that humor and shared language help people navigate an increasingly virtual work environment. ## Balancing Effort and Iteration - **Fidelity Fluency:** Knowing how polished a project needs to be, and avoiding unnecessary pixel-perfect work when a rough concept is sufficient. - **WIP Waltz:** The continual cycle of revising, tweaking, and rethinking work as it develops. - **Style Guide Safari:** Exploring a design system’s typography, colors, and other visual elements to find the right creative direction. - **UI Lock Ness Monster:** A frequently discussed interface feature that is always expected in a future update but never appears. ## Digital Overload and Distraction - **Keyboard Cardio:** The frantic effort of sending emails and Slack messages, likened to an intense keyboard workout. - **Slack-lash:** The shock of being hit by a sudden flood of Slack notifications and messages. - **Tab Tsunami:** Having so many browser tabs open that the screen—and one’s attention—feels overwhelmed. - **Toggle Tax:** The mental cost of constantly switching between tasks and contexts. - **Workplace Whack-a-Mole:** Repeatedly responding to incoming tasks, alerts, and emails as soon as they appear. ## Virtual Meeting Experiences - **Icebroken:** Oversharing during an icebreaker and turning a friendly introduction into an uncomfortable moment. - **Screenshare Scramble:** Quickly hiding embarrassing or irrelevant browser tabs before sharing a screen. - **Zoombie:** Someone who appears present on a video call but is mentally disengaged. - **Zoom Zen:** The rare, highly effective meeting where the agenda is clear, participation runs smoothly, and the call ends on time. ## Collaboration and Social Validation - **Sudden Heavy Stamping:** Receiving an unexpected rush of positive reactions—such as hearts or “+1” votes—on a collaborative idea. - **Fidelity Fluency** also reflects collaborative judgment: teams must match the level of detail to the project’s actual needs rather than overinvesting in polish. The glossary turns the habits and tensions of modern work into memorable expressions. Recognizing these patterns can make digital collaboration more manageable—and encourage teams to protect focus, communicate intentionally, and find humor in workplace chaos.

Design Systems Figma User Interface Slack+3

figmaDec 6, 20232 min readCurated summary

Top 10 things we shipped this year | Figma Blog

Figma’s 2023 product updates focused on helping teams design and build together, from major launches like Dev Mode and variables to smaller quality-of-life improvements. Rather than ranking features strictly, the company highlights updates that improve different stages of product development. The excerpt spotlights faster font selection and more powerful component exploration. ## A Year of Design-to-Development Improvements - Figma describes 2023 as a major year, marked by: - The largest Config conference to date - The launch of Dev Mode for developer-focused workflows - Variables and advanced prototyping - More than 200 product updates, including the “Little Big Updates” - The company emphasizes that small fixes and major features both meaningfully improve users’ work. ## New Serifs in Town - Font picker previews now appear directly on the canvas. - Users can hover over typefaces and immediately see how text will look without selecting each font. - This makes comparing typefaces faster and reduces friction when choosing typography. ## The Smart Play - The component details modal and playground are available from the assets panel. - Selecting an asset opens component information and provides a link to its main library. - On Professional plans and above, the playground lets users: - Preview component variants - Test component properties - Explore variable modes - These capabilities support quicker experimentation and easier iteration within the design workflow. Overall, the featured updates show Figma’s effort to improve both everyday design tasks and the broader collaboration between designers and developers.

Design Systems Figma Prototyping Dev Mode+3

figmaDec 5, 20232 min readCurated summary

Building a Design System That Breathes with Headspace | Figma Blog

Headspace rebuilt its design system to support rapid growth, multiple brands, and products spanning apps, wearables, and VR. Its previous system relied on hard-coded colors, manual processes, and plugins, making updates slow and creating inconsistencies. By adopting design tokens and Figma variables, Headspace created a scalable source of truth for designers and engineers that could evolve with the business. ## Challenges of the Previous System - Headspace served more than 100 million members across numerous products and partnerships. - The existing design system was manual and heavily dependent on plugins. - Hard-coded color values produced multiple hex-code variations and inconsistent experiences. - Even small palette changes could take the design systems team hours or days. - Plugins often required specialized knowledge, frequent resets, and workflows that were not intuitive for occasional users. - The system was designed for a single brand, creating problems when Headspace merged with Ginger, later rebranded as Headspace Care. ## Preparing for Multiple Brands and Future Growth - Senior product designer Steven Sczepanik audited the existing system after the merger announcement. - He rebuilt components and patterns so they were easier for designers and engineers to find and use. - The redesign established Headspace’s first formal token system. - Tokens created a shared language for foundational properties such as colors and typography. - The system was designed to support Headspace Care and future partnerships without requiring separate, disconnected systems. ## Replacing Plugins with Figma Variables - Headspace converted its color tokens and typography into Figma variables. - Variables replaced many plugin-based workflows with a native Figma solution. - Steven implemented the initial color and typography variables in about a day, compared with two years spent developing the broader previous system. - The new approach made theme changes and system-wide updates faster and more reliable. - Designers and engineers gained a more dependable source of truth for shared design decisions. ## A Design System That Can Evolve - Headspace’s design system now supports a growing ecosystem of brands, platforms, and experiences. - Centralized tokens reduce duplication and improve consistency across products. - Native variables make the system easier to maintain as the visual identity changes. - The work demonstrates that scalable design systems must accommodate organizational change, not just reuse components. Headspace’s experience suggests that teams preparing for growth should replace hard-coded values and fragile plugin workflows with structured tokens and native variables. This creates a more flexible foundation for consistent design across brands, products, and future expansion.

Design Systems Figma Design Tokens Design Variables+2

figmaDec 5, 20232 min readCurated summary

All Your Questions About Variables Answered (and a Few You Didn’t Even Know You Had) | Figma Blog

Figma’s latest variable updates expand design customization while bringing design systems closer to code. Variables can now control more visual properties and respond to different modes, making responsive, platform-specific designs easier to manage. The post presents variables as more flexible than traditional tokens and highlights their potential for both practical systems work and highly creative prototypes. ## Variables Enable Broader Customization - Designers are using variables for applications ranging from production design systems to interactive, game-like creations. - Unlike regular tokens, variables are open-ended and support more flexible customization. - Figma points to Headspace as an example of using variables to improve design-system efficiency and collaboration with developers. - Beginners can start with Figma’s dedicated variables guide and community file. ## New Properties That Support Responsive Design - **Reactive effects:** Variables can control blur sizes, drop-shadow colors, and offset distances, allowing effects to change by mode. - **Dynamic stroke weights:** Designs can use different stroke weights for platforms such as desktop and mobile. - **Layer opacity:** Opacity fields can be bound to variables for more nuanced visual control. - **Adaptable layout grids:** Grid settings can switch between modes, supporting pixel-perfect desktop and mobile layouts. - **Individual corner radii:** Each corner radius can be controlled independently through variables. - **Nested instance variant binding:** Variables can be applied to component instances nested within other components, enabling more complex component structures. ## Connecting Design and Code - The updates are intended to align design variables more closely with how values are managed in code. - Mode-based values make it easier to represent platform, theme, or responsive differences within a single design system. - Figma indicates that typography is an area planned for further variable support. Overall, the post recommends adopting variables as a flexible foundation for scalable design systems, responsive interfaces, and richer prototypes—especially when designers and developers need a shared source of truth.

Design Systems Figma Design Tokens Responsive Design+2