Making the right thing the easy thing | Schema by Figma 2025

Quick Overview

Figma successfully drove adoption of its internal design system by prioritizing accessibility improvements, automating tedious migration work via code mods, and introducing flexible 'Primitives' components, ultimately making the right design choices the easiest choices for product teams.

Key Points: Figma initially operated without a robust design system due to its small team size and product scope (00:37). The lack of consistency slowed product teams down and created maintenance tasks across different surface areas (1:35). Code mods were used to automate tedious migration work, removing over 1700 legacy component code references (05:50, 08:28). Primitives were introduced to offer teams styling flexibility while retaining built-in accessibility and interactions, helping scale fixes faster (6:14). Variables were implemented to keep color, spacing, and type in sync across design (Figma) and code using APIs and GitHub actions (6:55, 7:26). Accessibility was a core focus, driven by the goal that everyone globally, including over 1 billion people with disabilities, should be able to use Figma (3:04, 9:09). The core strategy became: 'Make it easy to build beautiful, accessible, consistent UI' (7:59).

Context: This presentation by Elynn Lee, a Product Manager at Figma, details the journey of evolving Figma's internal design system, Schema, from a state where it wasn't strictly necessary to a robust, scalable system. The talk focuses on overcoming initial adoption hurdles by aligning teams around the common goal of accessibility, specifically addressing the challenge of making system adoption feel like an 'upgrade' rather than 'extra work.'

Detailed Analysis

The presentation outlines Figma's approach to scaling its internal design system, Schema, focusing on making the 'right thing the easy thing.' Initially, Figma thrived with a small team and product without a formal design system, but as the product grew, inconsistencies emerged, slowing down product teams (1:35). To fix this, they first tackled migration using 'Code mods' to automate the deprecation of over 1700 legacy component references (05:50, 08:28). The next phase involved introducing 'Primitives'—headless components providing basic functionality, accessibility, and interactions—allowing teams flexibility in styling while ensuring baseline quality (6:14). Crucially, Variables were established to keep design tokens (color, spacing, type) synchronized between Figma and code using API and GitHub actions, drastically reducing confusion about which tokens to use (6:55, 7:38). A key driver for this effort was accessibility, motivated by the fact that over 1 billion people worldwide live with some form of disability and should be able to use Figma (3:04). By making accessibility improvements foundational (3:32) and demonstrating tangible business impact, they fostered alignment. The ultimate lesson derived was that adoption succeeds when it is easy to rally around a common goal, ensuring that the system adoption itself feels like an 'upgrade' rather than added friction (9:27, 9:51).