Accessibility

58 posts

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.

Accessibility Design Systems React Design Tokens+3

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.

Accessibility Figma AI Design Systems+3

figmaMay 8, 20232 min readCurated summary

The Future of Design Systems Is Accessible | Figma Blog

Design systems can make accessibility a scalable, built-in practice rather than a late-stage compliance task. By standardizing accessible colors, components, documentation, and feedback processes, they allow improvements to spread across an entire product ecosystem. The article also highlights AI as an emerging tool for detecting and fixing accessibility issues, while emphasizing the need for responsible implementation. ## Accessibility and design systems belong together - Only about 3% of the internet was accessible to people with disabilities in 2022. - Design systems offer a way to improve that figure by embedding accessibility rules into shared components and guidelines. - In-house design system adoption increased by 22% in 2020, and 47% of surveyed organizations reported including accessibility guidelines. - Accessible design is both a social responsibility and a business opportunity, given the global population of people with disabilities and their significant purchasing power. - Accessibility can be integrated into: - Tested foreground and background color combinations - Individual UI components - Consistent documentation and usage guidance - Ongoing feedback and testing processes - System-level changes can be propagated across many product instances, making accessibility fixes more efficient and consistent. ## Responsible AI in accessibility - Design system teams are increasingly exploring AI to improve accessibility. - New AI-powered tools aim to identify and resolve common issues automatically. - Potential applications include: - Generating descriptions for images - Labeling buttons that lack accessible names - Adding semantic structure to interfaces - These tools can accelerate accessibility work, but they should supplement—not replace—human expertise, testing, and accountability. Design systems should treat accessibility as a foundational requirement from the beginning. Teams can make the greatest impact by combining accessible system components and standards with continuous testing, inclusive feedback, and carefully governed automation.

Accessibility AI Design Systems Wcag+2

figmaMar 1, 20233 min readCurated summary

The Future of Design Systems is Automated | Figma Blog

Design systems are moving from static libraries toward automated, extensible ecosystems powered by plugins, widgets, and AI. These tools can automate repetitive work, expand Figma’s capabilities, and increasingly generate or recommend design solutions using existing system components. The article argues that automation will change designers’ responsibilities, but not eliminate the need for human judgment, creativity, and strategy. ## Plugins and Widgets as Design-System Extensions - Plugins have a long history in design and publishing software, dating back to tools such as HyperCard and QuarkXPress. - They created a broader ecosystem in which users could build and share custom effects, brushes, styles, and workflows. - In modern design systems, plugins generally serve two purposes: - Automating repetitive existing tasks. - Extending product capabilities through analytics, testing, accessibility checks, and other functionality. - Widgets add collaborative and visual tools directly to the design workspace, helping teams organize information and communicate around design systems. ## Automating Repetitive Tasks - Plugins can reduce manual work involved in maintaining and applying design-system assets. - Automation allows designers to spend less time on mechanical operations and more time on problem-solving and decision-making. - The broader trend reflects a shift from tools merely supporting designers to tools actively performing parts of the design process. ## Extending Design-System Capabilities - Plugins can provide capabilities that are not included in a core design application. - Examples include: - Gathering usage and library analytics. - Testing designs. - Improving accessibility. - Connecting design workflows to other tools and systems. - This extensibility enables teams to adapt their design environment to specialized organizational needs. ## AI-Assisted Design - Earlier experiments, such as Airbnb’s 2017 work on generating code from low-fidelity wireframes, demonstrated the potential of machine-learning-assisted design. - More recent tools such as Diagram’s Genius can analyze Figma files and suggest designs using components from an organization’s design system. - These developments suggest that AI is beginning to make earlier prototypes practical. - AI tools may eventually help generate interfaces, recommend components, complete workflows, or produce code from design input. ## Changing Roles and Responsibilities - Automation raises concerns about whether designers and developers will be replaced by software. - The article frames this as a question about how tools shape professional practice, rather than simply whether they eliminate jobs. - As routine production becomes automated, human designers may focus more on: - Defining problems. - Making judgments and trade-offs. - Establishing product direction. - Applying empathy, taste, and contextual understanding. - The future of design therefore depends on how practitioners adapt alongside increasingly capable tools. Design teams should treat plugins, widgets, and AI as ways to expand human capability rather than substitutes for design thinking. The most effective systems will combine automation for repetitive work with human oversight, creativity, and strategic judgment.

Accessibility Figma AI Design Systems+4

figmaFeb 27, 20232 min readCurated summary

Behind the scenes: international keyboard shortcuts | Figma Blog

Figma redesigned its keyboard shortcut system to work reliably across international keyboard layouts, after discovering that many users could not access shortcuts built for US keyboards. The project revealed unexpected challenges in browser APIs, Unicode casing, and the sheer number of keyboard configurations. Figma ultimately had to combine new shortcut mappings with layout detection and normalization improvements. ## Why International Shortcuts Matter - Figma shortcuts improve speed, accessibility, and access to menus and tools. - US-centric shortcuts excluded users whose keyboards lacked keys such as: - Backslash (`\`) for toggling the UI - Forward slash (`/`) for starting cursor chat - The team began a year-long effort involving multiple disciplines to make shortcuts accessible worldwide. ## How Figma Processes Shortcuts - Browsers send key presses as `KeyboardEvent` objects. - Figma translates each event into an internal representation. - Shortcut definitions and their associated actions are stored in JSON. - Available shortcuts depend on factors such as: - User preferences - Product context - Operating system - Whether a feature is enabled - Figma matches each key press against the active shortcut definitions and executes the corresponding action. ## Unicode and Shortcut Normalization Problems - Adding alternate shortcuts for each layout seemed simple, but normalization introduced unexpected issues. - On German keyboards, `Meta + Alt + ß` was needed for decreasing text weight. - JavaScript converts `"ß".toUpperCase()` into `"SS"`, turning one key into two characters. - Converting the result back to lowercase does not restore the original `ß`. - Figma worked around this by using the capital eszett character, `ẞ`, which remains stable when uppercased. - The capital eszett was officially adopted by Germany’s spelling council in 2017, although programming languages and tools do not uniformly support it. ## Detecting Keyboard Layouts - Figma prioritized layouts most commonly used by its users because thousands of layouts exist. - The desktop app can inspect the operating system’s keyboard setting. - Browsers provide less reliable information, so Figma used heuristics based on the experimental Keyboard API. - The API exposes characters associated with physical key positions. - For example, seeing `ä` on the `Quote` key, combined with other mappings, can suggest a Swedish layout. - Logging revealed more than 2,500 distinct keyboard layouts used on Figma within a single 30-day period. Figma’s experience shows that international keyboard support requires more than adding translated shortcut definitions. Robust implementations must account for physical key positions, browser and OS limitations, Unicode edge cases, and the enormous variety of real-world keyboard layouts.

Accessibility Json Internationalization Keyboardevents+3

figmaJan 30, 20233 min readCurated summary

The Future of Design Systems is Complicated | Figma Blog

Design systems have evolved from simple visual metaphors into complex frameworks supporting many platforms, use cases, accessibility needs, and performance expectations. The article argues that teams need more structure to manage this complexity, but excessive control can suppress creativity. The future lies in balancing consistent systems with flexibility, experimentation, and contributions from the wider design community. ## Complexity Is the New Normal - Early systems such as Google’s Material Design used familiar metaphors—like stacked paper—to help users understand digital interfaces. - Google later abandoned that metaphor as users became more comfortable with digital interactions and products expanded across: - New devices and form factors - Accessibility standards - More sophisticated interactions - Higher performance expectations - Products such as Instagram evolved from single-purpose apps into platforms for discovery, advertising, partnerships, and shopping. - Larger teams now work across multiple interconnected systems, creating a need for better ways to organize design and development work. ## Taming Chaos with Structure - Design teams are adopting processes inspired by software development, particularly branching and merging. - Contributors can work on isolated branches, propose fixes or components, and have system managers review changes before incorporating them into the main system. - Spotify’s Encore supports “local systems,” allowing sub-teams to fork and extend the central system for specialized needs. - Spotify’s advertising team developed a strong collection of video-player components, which later influenced the broader organization. - Open design systems can: - Gather feedback from a wider range of users - Encourage outside contributions - Make products and design decisions more transparent - Build organizational trust and visibility ## When Structure Becomes Too Restrictive - Strict systems can limit experimentation and make designers feel they lack creative freedom. - A design system should reduce the effort required to express ideas, not create additional barriers. - Shopify designer José Torre compares systems to gardening rather than architecture: - Architecture implies that everything is planned and finished. - Gardening involves planting, observing, adapting, and intervening as unexpected growth occurs. - Components such as buttons and menus may develop in unforeseen directions, so systems need room to evolve rather than enforcing rigid boundaries. ## Finding the Balance - Effective design systems must combine consistency with adaptability. - Teams should establish enough structure to coordinate large, interconnected efforts while allowing local experimentation and new patterns to emerge. - Collaboration, contribution workflows, and ongoing maintenance are more valuable than treating a design system as a fixed, finished artifact. Design systems should be treated as living ecosystems: structured enough to provide shared foundations, but flexible enough to support creativity, accessibility, and changing product needs.

Accessibility Design Systems Open Source Material Design+1

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.

Accessibility Figma Design Systems Design Tokens+2

figmaJul 20, 20223 min readCurated summary

Illuminating dark mode | Figma Blog

Dark mode looked like a simple color swap, but Figma found it required a broad redesign of its UI architecture and engineering processes. The project aimed not only to satisfy user demand and improve accessibility, but also to create a scalable foundation for future themes. Figma ultimately treated dark mode as a systems problem involving product scope, shared components, edge cases, and maintainability. ## Accessibility and User Demand - Dark mode became Figma’s most requested feature after users complained about bright screens during late-night work. - It could improve legibility for people with certain visual impairments and aligned with Figma’s mission of making design accessible. - The team also considered WCAG contrast requirements rather than treating the feature as purely cosmetic. - Figma shipped dark mode in May 2022 after months of product, design, and engineering work. ## The Complexities of Color - The initial idea was to replace light colors with dark ones, but this approach would not scale as the product evolved. - Figma wanted a solution that: - Made new features support dark mode by default. - Simplified onboarding for engineers. - Reduced regressions when experimenting with themes. - Could support additional themes in Figma and FigJam. - Some decisions were straightforward: - Light editor panels would become dark. - Text and icons would become light foreground elements. - Toolbars and menus already dark in light mode would remain dark. - Other questions required product decisions: - Which parts of Figma should support dark mode? - Should user-created canvas content, such as the canvas background, change with the theme? - Should colors rendered by the C++ editor engine, including the transparency grid, also change? ## Auditing the Product Surface - Before coding began, team members audited Figma’s UI to estimate the work required for each surface. - The project involved far more than the main editor: - Modals - Panels - Toolbars - Dropdowns and submodals - Hidden states and complex edge cases - Each surface needed its full range of views and states considered, not just its most commonly seen appearance. ## Building a Systematic Approach - At kickoff, ten product engineering teams owned major parts of Figma’s interface. - Shared UI components had to be refactored so they could support dark mode where appropriate while remaining unchanged on unsupported surfaces. - The team recognized that a small central engineering group could not manually handle every component and state. - This drove the need for a systematic, regression-resistant approach that could scale across teams and continue supporting future product development. Figma’s experience shows that theme support should be designed as an extensible system, not implemented as a one-time recoloring exercise. Teams planning similar work should begin with a full product audit, define theme boundaries clearly, and invest in shared components and automation that make future themes easier to add.

Accessibility Design Systems User Interface Wcag+2

figmaMay 26, 20222 min readCurated summary

Full-scale expression with Grilli Type | Figma Blog

Variable fonts let designers adjust weight, optical size, slant, and other typographic properties from a single file, making type more adaptable across screens and contexts. Thierry Blancpain of Grilli Type argues that they improve efficiency, designer–developer collaboration, accessibility, and expressive web design. Their adoption in tools such as Figma helps turn precise typographic intentions into practical code. ## Scaling Typography Across Contexts - Fonts can become less readable when scaled from mobile or business-card sizes to desktop or billboard sizes. - Designers often need careful kerning and tracking adjustments to preserve legibility and visual balance. - Supporting multiple weights and styles traditionally requires separate font files, increasing assets, code complexity, download size, and opportunities for error. ## The Efficiency of Variable Fonts - A variable font contains an entire type family in one file. - Designers can adjust several axes—such as weight, optical size, and slant—rather than selecting from fixed styles. - Variable fonts are increasingly a standard format, so support across tools is important for avoiding workarounds and inconsistent workflows. - Figma’s support allows designers to use the same capabilities during design that developers can later implement in code. ## Improving Designer–Developer Collaboration - Developers benefit from managing one font file instead of many individual assets. - A single file simplifies updates, keeps code cleaner, and reduces implementation friction. - Designers gain finer control over typography, including custom weights and optical sizing. - Blancpain notes that variable fonts are especially valuable when designers and developers work in separate roles, since the format creates a shared, more transferable design language. ## More Expressive and Dynamic Web Design - Variable fonts support animated and interactive typography, such as changing from regular to bold on hover. - Grilli Type’s GT Maru Mega demonstrates how expressive type can remain usable at small sizes through variable adjustments. - Blancpain expects the web to become increasingly dynamic, with motion and responsive typography replacing purely static experiences. - Typography can communicate mood and interaction—not merely deliver information. Variable fonts are recommended as both a practical production format and a creative medium. Their combination of smaller asset overhead, precise control, and animation potential makes them useful for modern responsive interfaces and richer web experiences.

Accessibility Figma User Experience Typography+3

figmaMay 18, 20222 min readCurated summary

A step forward in our accessibility efforts | Figma Blog

Figma argues that making design accessible requires enabling people of all abilities to participate throughout the design process. Its new prototype screen reader beta addresses a major gap for blind and low-vision users by making prototype content readable and navigable with assistive technology. The company presents this as an important step, while acknowledging that substantial accessibility work remains. ## Prototype Screen Reader Beta - Previously, screen readers encountered Figma prototypes as an essentially empty canvas, making text, images, and interactive content inaccessible. - The beta supports: - Text notes - Image alt text - Navigation through prototypes - Buttons and keyboard actions such as tabbing - Because Figma designs are not built as HTML, the company created an HTML representation of prototypes specifically for screen readers. - The beta was launched to gather feedback and improve the experience; it later became an open beta for everyone. ## Accessibility Work Underway - Figma has also introduced: - Dark mode and improved color-contrast compliance - Live captions for audio chat - A platform-wide accessibility assessment by Deque - Greater support for accessibility plugins, widgets, and community files - The company is developing reusable UI components and internal tools that encourage keyboard and screen reader compatibility. - Accessibility is being incorporated into team expectations, product development, and early user testing through alpha and beta programs. ## Remaining Challenges - Figma recognizes that more screen reader and general accessibility support is needed. - Planned capabilities include allowing users to: - Add alt text - Assign ARIA roles to components - Define prototype tab order - The company emphasizes that accessibility improvements should be developed collaboratively with the community. Figma’s recommendation in practice is to continue testing accessibility features with users who rely on assistive technology and to treat accessibility as an ongoing part of product design and engineering rather than a one-time update.

Accessibility HTML Wcag Keyboard Navigation+3

figmaMar 23, 20223 min readCurated summary

The art and influence of motion | Figma Blog

Motion helps digital interfaces communicate in ways that resemble the physical world. UX designer Katie Swindler argues that animation can clarify state, build mental models, improve perceived responsiveness, and add personality—but only when it serves a clear purpose. Effective motion balances practicality with restraint and must remain accessible to people who cannot or should not experience animation. ## Motion as a Human-Centered Language - People naturally interpret facial expressions, gestures, and movement alongside spoken information; interfaces can use motion similarly. - Animations communicate: - Progress, such as loading bars - Errors, such as a field shaking after an incorrect password - Change, such as charts recalibrating after a page refresh - Motion helps translate a digital environment into terms understood by a brain shaped by interaction with a physical, three-dimensional world. - It gives users information for building mental models without requiring explicit explanation. ## Designing Familiar Physical Metaphors - Digital animations can borrow from familiar physical behavior. - A sliding menu or “drawer” suggests that: - It can be opened and closed repeatedly - Its contents remain available when reopened - These familiar cues make interfaces feel intuitive. - Figma examples include animated cursor-chat bubbles and the celebratory shake of the FigJam Timer. ## Purpose-Driven Microanimations - Microanimations should solve a specific user or system problem rather than exist merely for decoration. - A short one- to two-second transition can disguise unavoidable backend processing delays and make a product feel more responsive. - Motion should be evaluated with the same discipline as icons: adding more visual elements is not automatically beneficial. - Designers should consider whether text, a static visual, or no additional communication would work better. ## Balancing Practicality and Personality - The strongest motion combines functional guidance with a distinct sense of character. - Animations should be fast, subtle, and respectful of the user’s time. - Swindler highlights Apple’s “sprout” or “Genie in the Bottle” animation: - Minimizing a window visually pulls it into its dock icon. - Restoring it reverses the motion, showing where the window came from and where it will return. - This type of animation provides orientation and delight without distracting from the task. ## Accessibility and Common Mistakes - Motion must never be essential to understanding or operating an interface. - Certain animations can trigger people with epilepsy or create barriers for users with motion-related sensitivities. - Excessive or frenetic movement can: - Interrupt users - Create confusion and visual busyness - Add unnecessary steps - Frustrate users and weaken brand affinity - Every animation should be selected carefully and used with restraint to solve a user problem elegantly. Motion is most effective when it communicates meaning, reinforces familiar behavior, and adds personality without demanding attention. Designers should prototype animations deliberately, test them for accessibility, and remove any movement that does not clearly improve the experience.

Accessibility Figma User Experience Motion Design+2

figmaNov 29, 20212 min readCurated summary

What’s new in Figma: November 2021 | Figma Blog

Figma’s November 2021 updates focused on helping distributed teams collaborate more efficiently and inclusively. The main improvements redesigned comments to make feedback easier to notice and manage, while audio captions made real-time discussions more accessible to deaf and hard-of-hearing users. Together, these features reduce friction when teams move from ideas to decisions and deliverables. ## Redesigned Comments for Faster Feedback - Comments in both Figma and FigJam are now more prominent and easier to spot. - Adding and responding to comments has been simplified. - The redesign helps teams: - Share feedback more naturally - Organize and manage discussions - Act on feedback without interrupting their design workflow - The goal is to keep collaboration “in the flow” as teams iterate across functions. ## Audio Captions for More Inclusive Collaboration - Figma had previously introduced audio calls and cursor chat, allowing teammates to communicate without leaving a shared file. - FigJam also supports collaborative interactions such as high-fives during brainstorming sessions. - Closed captioning was added in beta to the Figma desktop app. - During audio discussions, captions make it clearer: - Who is speaking - What each person is saying - This improves participation for deaf and hard-of-hearing users and helps everyone follow important feedback. Figma’s November updates reinforce a practical collaboration principle: feedback should be easy to give, easy to understand, and accessible to every participant. Teams using Figma and FigJam can take advantage of redesigned comments and captions to make shared design work faster and more inclusive.

Accessibility Figma Figjam Collaborative Design+2

figmaJul 13, 20212 min readCurated summary

Behind the plugin: Cards for Humanity | Figma Blog

Cards for Humanity is a Figma plugin and website that helps teams practice inclusive and accessible design through an online card game. Players combine character cards with needs, disabilities, or challenges, then discuss how to design products for that person. The Idean team found that the tool makes difficult conversations about inclusion more tangible and encourages empathy-driven design. ## How the Game Works - Players pair two card types: - A character card with a name, age, and personality trait. - A card describing a need, disability, or personal challenge. - Clicking a card reveals written considerations to reduce assumptions about different experiences. - Its open-ended format supports workshops, brainstorming, and informal accessibility discussions. - The game puts people at the center of the design process rather than treating accessibility as an afterthought. ## Designing an Inclusive Tool - The team began with internal research, asking colleagues whether they would share personal traits or disabilities. - They expanded the card content through feedback from the wider product community. - Making the tool itself accessible proved challenging, requiring continuous listening and iteration. - The audience became broader than expected, including lawyers, gamers, clinicians, and educators—not just designers and developers. - This reinforced the importance of plain language, avoiding jargon, and designing for audiences beyond the expected user group. ## Balancing Internal Work and Client Priorities - Agency teams must balance billable client work with internal projects that have less obvious short-term ROI. - Idean viewed inclusive design as directly connected to better products, stronger outcomes, and happier clients. - Team members contributed both allocated work time and personal effort because of their commitment to the project. - The tool became part of the agency’s client process, potentially extending its impact across the products those clients create. - The team argues that inclusion should be understood not only as a business benefit, but also as a social responsibility. ## Starting the Conversation - Cards for Humanity is not prescriptive; simply discussing the cards can open conversations about accessibility. - The tool helps teams move from abstract intentions to concrete questions about people’s needs. - Its central purpose is to build empathy and make inclusive design a regular part of product development. Teams can use the plugin or website as a practical starting point for discussing accessibility, inclusion, and the responsibility designers and developers have toward diverse users.

Accessibility Figma Product Design Inclusive Design+1

figmaMay 24, 20213 min readCurated summary

In the file at Config 2021 | Figma Blog

Config 2021’s breakout sessions emphasized practical systems for building products and teams. Coda’s Helena Jaramillo described how to create a strong product vision without existing user data, while Stripe’s design team shared principles for meeting immediate needs without sacrificing long-term scalability. Both approaches rely on context, shared perspectives, strong foundations, and thoughtful communication. ## Building a Vision from Zero to One - At Coda, Helena Jaramillo worked on a publishing platform designed to help users share best practices and discover documents. - Because the product was new, the team lacked existing user behavior, research participants, and historical data. - Helena built context by studying competitors and adjacent products, annotating screenshots in Figma, and identifying useful or unsuitable patterns. ## Developing a Strong Product Perspective - The team explored what publishing on Coda should feel like: a blog post, a no-code app, or a website. - They used Helena’s publishing experience and internal discussion to form a shared point of view. - Two priorities emerged: - Make publishing interactive documents easy. - Help publishers feel proud of and recognized for their work. - These principles shaped features such as simple publishing flows, photos, subtitles, and bylines. - When user insights are unavailable, a team can rely on collective intuition and expertise—but only by aligning around a clear perspective. ## Communicating the Broader Story - Helena created a “tl;dr page” in Figma to align cross-functional partners. - Rather than documenting every feature, the page used a short flow and several mockups to show the product narrative. - The goal was to make the intended experience understandable without requiring deep project context. ## Designing for Immediate Needs and Long-Term Scale Stripe’s Connie Yang, Tayler Aitken, and their team focus on simplifying complex processes for businesses and end users. Their approach combines urgency with long-term planning. - **Think in long time scales:** Stripe uses a “city planner mentality,” considering how systems connect, handle growth, and respond to future needs—potentially as far ahead as 2030. - **Lay strong foundations:** Teams should invest in fast, accessible products and scalable systems instead of short-term fixes. - Stripe’s design-system color tables, for example, include contrast and accessibility ratings, embedding quality requirements directly into the infrastructure. - **Prioritize rigor and quality:** Because Stripe handles payments and payouts, user trust is essential. The team accepts additional complexity when it produces a more reliable, polished experience. The practical recommendation is to combine strong early judgment with durable systems: build enough context to form a clear vision, communicate that vision simply, and make foundational decisions that continue serving users as the product grows.

Accessibility Figma Design Systems User Experience+2

figmaOct 14, 20202 min readCurated summary

Learning and failing as a team | Figma Blog

Config Europe highlighted how better products emerge from better teamwork. Figma argues that inclusive processes, cross-functional collaboration, and a willingness to fail openly help teams build more human-centered experiences. The success of its Variants feature demonstrates that iterative testing and diverse perspectives can turn early shortcomings into meaningful improvements. ## Learning Through Collaboration - Figma’s virtual Config Europe conference explored both product craft and team culture. - Sessions covered: - Accessibility-first design - Keeping design aligned with code - Technology ethics - Collaboration and shared failure - The central theme was balancing product function with human feeling while working more effectively together. ## Expanding the Team - UX designer Declan Talbert presents design systems as services for entire product teams, not merely pattern libraries for designers. - An inclusive design system can contain: - UI components - Accessibility guidance - Data resources - Project-management tools - Designers, developers, product managers, and other contributors should all be able to participate. - Broader collaboration and diverse skills lead to more human-centered products and services. ## Failing Together on Variants - Product Manager Kelsey Whelan and Product Designer Nikolas Klein describe shared failure as a major factor in the development of Figma’s Variants feature. - Early testing showed that the feature was powerful but difficult to approach, contradicting the team’s initial assumptions. - Usability testing expanded from a planned couple of weeks into four rounds over six weeks. - Figma invited employees from different roles—including design advocates, product educators, and engineering managers—to participate remotely through Zoom. - Participants identified usability problems and bugs, while a dedicated Slack channel helped coordinate fixes. - Repeated testing made the feature more intuitive and reinforced the idea of “failing forward”: using visible mistakes to improve the product and strengthen team culture. Figma’s practical recommendation is to open product development to more people, test ideas early, and treat failure as shared information rather than individual blame.

Accessibility Figma Design Systems Remote Collaboration+3