Case Study · Design Systems

Design System
Workshop

What happens when a design team confuses a Figma library for a system — and how education and automation fixed it.

Workshop Facilitation Figma Plugin Design Tokens Governance
Scroll to explore
01 · The Problem

One misconception. Many symptoms.

As the design team grew, inconsistency grew with it. But the root cause wasn't the tools — it was a shared misunderstanding of what a design system actually is.

Common belief
"We have a Figma library with components, so we have a design system."
The reality
A design system is a living product — principles, tokens, governance, docs, and engineering alignment all working together.
SYMPTOM 01
Different naming conventions
Every designer named components differently. Search was useless. Variants were chaos.
SYMPTOM 02
Duplicated components
Seven versions of the same button across products. No single source of truth.
SYMPTOM 03
Engineering drift
Without tokens or documentation, engineers built their own interpretations. Inconsistency shipped.

02 · Historical Context

How we got here

Understanding the lineage of design systems helps teams value the full discipline — not just its surface tools.

📐
Pattern Language
1977
📖
Style Guides
1990s
🧩
Pattern Libraries
2000s
📦
Component Libraries
2010s
⚛️
Atomic Design
2013
🪙
Design Tokens
2014
🏗️
Modern Design Systems
2020s
🤖
AI-assisted
→ Now

Design systems have expanded beyond reusable UI into scalable product ecosystems — and the next chapter is being written with AI assistance.

03 · Core Concept

Tokens assemble into components

The most powerful mental model in design systems: every component is just a named collection of design decisions — tokens — composed together.

Interactive
Playground
Click through the steps — then on Step 4, click any floating token to change its value and watch the login form update live.
01–03Navigate the build sequence
04Click atoms to cycle their values
Every token updates the form live
01
Design tokens float freely
Color, spacing, radius, and typography are defined as named values — the raw vocabulary of your system.
02
Tokens gravitate together
When you define a component, tokens are referenced and composed. Nothing is hardcoded — everything points back to a source value.
03
A component is born
Molecules snap together into a Login Form component — fully composed, consistent, and ready to ship.
04
Tokens remain independent
Tokens aren't locked inside — click any token pill to change it and watch it update across the entire component live.
Token → Component assembly
04 · Live Example

A real component, dissected

Here's an actual Button component from a design system — broken into its token anatomy so you can see exactly what "design tokens" means in practice.

Button component · Token anatomy
Variants
Sizes
States
Default
Hover
Focused
Disabled
color.interactive.primary
#2563EB
color.text.on-primary
#FFFFFF
8px
radius.component.md
8px
10/20
spacing.button.padding-y / x
10px / 20px
Aa
typography.label.md
14px / 600
Every value you see in the component on the left maps to a named token. Change the token, the component updates everywhere it's used — across all products, all platforms.
COLOR TOKENS
color.interactive.primary
#2563EB
color.interactive.primary-hover
#1D4ED8
color.interactive.secondary-bg
#EEF4FF
color.interactive.danger
#FF4D6D
color.interactive.disabled-bg
#E5E7EB
SPACING TOKENS
6
spacing.button.padding-y-sm
6px
10
spacing.button.padding-y-md
10px
14
spacing.button.padding-y-lg
14px
RADIUS & TYPOGRAPHY TOKENS
radius.component.sm
6px
radius.component.md
8px
radius.component.lg
10px
Aa
typography.label.md
14px / 600
05 · Framework

The ten layers of a mature design system

Most teams have 3 or 4 of these. Production-ready means all 10 working together — each layer depending on the one before it.

Design Principles
The values that guide every decision — before any component is drawn.
Foundations
Color, typography, spacing, grid, motion — the atomic layer everything rests on.
Design Tokens
Named values that bridge design intent and engineering implementation.
Variables
Theme-level switches for dark mode, brand variants, density — without touching components.
Components & Variants
The building blocks teams reach for daily — documented, tested, maintained.
Patterns & Templates
Composed solutions to recurring design problems: empty states, error pages, onboarding.
Documentation
Usage guidelines and rationale that outlive any individual contributor.
Accessibility Standards
WCAG compliance baked in at the token level — not bolted on after the fact.
Governance Model
Who owns components, how contributions are reviewed, what deprecation looks like.
Design ↔ Dev Alignment
Shared vocabulary, token parity, and handoff workflows that hold under pressure.

06 · Workshop

Ten modules. One shared language.

The workshop addressed concepts, not tools — because tools change every year. Principles don't.

🧭
What is a Design System?
🚫
Misconceptions & Industry Myths
📈
Evolution of Design Systems
🪙
Foundations, Tokens & Components
⚛️
Atomic Design & Architecture
Accessibility by Design
⚖️
Governance & Contribution Models
🏆
Industry-leading Design Systems
Best Practices in Figma
📊
Measuring Adoption & Success
07 · Automation

A Figma plugin to close the gap

The workshop taught the why. The plugin handled the how — automating the scaffolding that used to cost days of manual setup.

Design Tokens & Variables
Full semantic token system with light/dark and brand mode support, generated in seconds.
Typography Scale
Modular type ramp from display to caption — auto-named, auto-styled, auto-variable-linked.
Color System
Primary, neutral, semantic, and state palettes with WCAG contrast checking built in.
Spacing, Elevation & Grid
4px base grid, elevation tokens, border-radius scale — all wired to Figma variables.
Page & Folder Structure
Standardised Figma project structure so any designer can navigate any project immediately.
DS Foundation Generator · Figma Plugin
Foundation layers
Design TokensDone
Color SystemDone
Typography ScaleGenerating…
Spacing SystemQueued
Project structure
Page OrganisationDone
Component FoldersDone
Elevation & GridQueued
Try the plugin on Figma Community ↗
08 · Outcomes

What changed after the workshop

Shared vocabulary, faster onboarding, fewer duplicates, better engineering alignment. Education combined with automation compounds quickly.

0%
fewer duplicate components
faster project setup
0%
team shared understanding
0%
of designers onboarded faster
Shared design system fundamentals across the org
Standardised project setup from day one
Reduced duplicate components across products
Faster onboarding for incoming designers
Stronger design-to-engineering collaboration
Automated DS creation through the Figma plugin
09 · Key Takeaway
A design system is not a Figma file.
It is a living product that enables teams to design, build, and scale consistently.

Education and automation aren't separate workstreams. This initiative proved that when teams understand the principles, they build better systems faster — and maintain them.

10 · References

Standing on the shoulders of giants

Material Design
Carbon Design System
Fluent Design
Atlassian Design System
Adobe Spectrum
Shopify Polaris
GitHub Primer
Atomic Design
Material Design
Carbon Design System
Fluent Design
Atlassian Design System
Adobe Spectrum
Shopify Polaris
GitHub Primer
Atomic Design
⚛️
Atomic Design
Brad Frost
🎨
Material Design 3
Google
🏗️
Carbon Design System
IBM
🌊
Fluent Design
Microsoft
🔷
Atlassian Design System
Atlassian
🛍️
Shopify Polaris
Shopify
🎞️
Adobe Spectrum
Adobe
🐙
GitHub Primer
GitHub
🪙
Design Tokens W3C
W3C Community Group