Design systems in Figma

A course in twelve chapters. It works through the books that shaped the field and the systems it produced, from the token model to building with agents in 2026.

Start readingarrow_forward See the chapters

The curriculum

1
What a design system actually is
Patterns and practices, not a Figma file. Kholmatova, Alexander.
2
The token mental model
Options vs decisions, the three tiers, DTCG. Curtis, Frost, Jina Anne.
3
Naming and taxonomy
Name by purpose, not appearance. Curtis, Atlassian.
4
Variables and modes
Aliasing, scoping, the 2025 mode-limit change.
5
Component architecture
Properties, variants, slots, clean component APIs.
6
Auto layout and structure
Fill/Hug/Fixed, the new grid, structure as code quality.
7
Multi-brand file organization
The three schools, brand-as-mode. Perez-Cruz.
8
The token pipeline
Figma to DTCG to Style Dictionary to shipping code. Godbolt.
9
The agentic layer
Figma MCP, Code Connect, and the honest 70-90% reality.
10
Documentation and adoption
Adoption over coverage. Mall, Kholmatova.
11
Governance and delivery
Versioning, contribution, pilot-first selling. Mall, Couldwell.
12
Capstone: end to end
Every module, applied to a real build, pilot-first.

Taught through the authorities

The field's real voices, put in tension so you can choose the right approach per project.

Nathan CurtisEightShapes

The taxonomist. Options vs decisions, the naming grammar every serious system borrows.

Read the source →
Dan MallSuperFriendly

Pilot-first, adoption over coverage, the reuse economics.

Read the source →
Alla KholmatovaDesign Systems

Functional vs perceptual, the shared-language thesis.

Read the source →
Brad FrostAtomic Design

Atoms to pages, the three-tier themeable stack.

Read the source →
Jina AnneSalesforce / SLDS

Coined "design tokens." Tokens as a methodology; brandable vs constant.

Read the source →
Yesenia Perez-CruzExpressive Design Systems

Consistency vs expression. Levers and dials.

Read the source →
CanonicalVanilla / Ubuntu

A system in production: the open-source framework and tokens behind Ubuntu and Canonical's products.

Read the source →

The directory

Sixty production design systems with public Figma kits: Material, Polaris, Carbon, Fluent and the rest of the canon: filterable by platform and theming approach.

Browse the directoryarrow_forward