Assembly Design System
Building Quizlet's first production-grade design system from a 20% passion project into a multi-platform foundation that lets designers and engineers ship faster across web, iOS, and Android.
Company
Quizlet
Role
Design Lead & Team Lead
Platforms
Team size (peak)
Web, iOS, Android
3 Engineers, 4 Designers, 1 Animator
Overview
A system built from the ground up
When I started pushing for Assembly, Quizlet had no true token system, minimal documentation, and no shared naming conventions. Designers were detaching components. Engineers were guessing at color values. Every new feature introduced more visual drift.
What started as a 20% time project earned full leadership buy-in. I made the business case for dedicated investment, secured headcount, and ran the team as design lead, product manager, and team lead simultaneously, covering quarterly planning, OKR setting, sprint ceremonies, and the actual design work.
3
Platforms
shipped
8+
Team members
at peak
2
Product
rebrands
4/5
Efficiency score
2025 survey
Context & Problem
The state of things before Assembly
Quizlet's product had grown fast and the design foundation hadn't kept pace. Components existed but weren't documented. Token naming was inconsistent or nonexistent. There was no clear process for how design decisions translated into production code, and the gaps were especially painful across platforms.
By 2025, a cross-functional survey of 26 team members showed 73% used Assembly regularly, up from a starting point of zero structure and no shared tooling.
Key pain points
Approach
Making the case, building the team
I built the business case framing it around engineering velocity, designer productivity, and the cost of visual debt. Leadership approved headcount for one full-time web engineer and two part-time native engineers. Over time the team grew to include a design manager, three engineers, four part-time product designers, and an animator.
I ran the team with a PM mindset: quarterly and annual planning, OKR setting using big rocks frameworks, sprint planning, backlog grooming, and regular retros. The work progressed in phases, starting with foundational token architecture, moving through the component library build-out, and maturing into cross-platform tooling and engineering enablement.
Design manager
People, planning, and oversight
Lead designer and program driver (My role)
People, planning, and oversight
Web engineer
Full-time
iOS engineer
Full-time
Android engineer
Full-time
Product designer
(2) Part-time
Animator
Part-time
Visual designer
Part time
Design Work — Tokens
Architecting the token system
I structured tokens into three tiers: reference, system, and component. Reference tokens hold raw values. System tokens map those to semantic roles like interactive/bg/primary with light and dark values. Component tokens scope to specific UI contexts. All 399 variables (182 ref, 142 sys, 75 comp) live in Figma Variables and support light and dark mode natively.
Token pipeline — Figma to production
1
Token values defined and maintained in Figma Variables (ref, sys, comp collections)
2
Figma plugin exports tokens as JSON
3
JSON committed via pull request to shared GitHub repo
5
Token changes propagate to web, iOS, and Android production builds
4
Designers QA color changes directly in production apps — closing the loop without engineering bottlenecks
Designers could change a token in Figma and ship it to production across all three platforms without filing a ticket or waiting on an engineer. That autonomy compounds over time.
Design Work — Component Library
A full component library, documented and live
Every component in the Assembly Figma library ships with anatomy diagrams, size variants, interaction states, do/don't guidance, and platform availability indicators. Links to Storybook are included directly in the library for engineering reference.
The library spans atoms like buttons, links, and radio buttons through complex molecules like modals, toasts, coachmarks, and content list items.
Design Work — Foundations
Icons, avatars, and the full foundation layer
Assembly needed a complete foundation beneath the component library: a custom icon library with hundreds of categorized system icons, a full typographic scale, a color system built for light/dark mode and rebranding, and an avatar system covering Quizlet's illustrated characters, uploaded photos, and fallback states at every size.
Rebrands
Shipping rebrands at scale
Quizlet went through two rebrands during this work. The first was a full product rebrand I designed and shipped as v1 of the system. The second was lighter-touch but revealed fragility in the color system, which directly shaped the deeper token architecture that followed.
With tokens in place, rebrand decisions could be made once and propagated across all three platforms. What used to require manually updating hundreds of Figma files became a token update and a pull request.
Tooling & Enablement
Closing the loop between design and engineering
A design system is only as good as the workflows around it. Assembly included Storybook integration, Code Connect and Dev Mode in Figma for engineering inspection, and documentation quality standards built directly into the Assembly Figma library that made self-service the default.
I also designed and recorded a LinkedIn Learning course on Figma fundamentals for engineers, covering Dev Mode, Code Connect, and Storybook Connect. By 2025, Figma was the #1 documentation destination (16 of 22 survey respondents) with Storybook a close second among engineers.
Tooling & process highlights
Storybook integration: component pages link directly to live Storybook stories for engineering reference
Code Connect + Dev Mode: engineers inspect real component props in Figma without asking designers
Token pipeline: JSON export from Figma to GitHub PR to multi-platform production
LinkedIn Learning course: self-paced Figma + Assembly onboarding for engineers
Assembly Figma library: anatomy diagrams, size variants, interaction states, and do/don't guidance built directly into every component
Impact
What Assembly made possible
Rebrands that once took months of manual effort propagated in days. New features were built on a shared foundation rather than reinventing patterns each time. Handoff became more predictable. And designers could ship token changes to production across all three platforms without filing a single ticket.
A 2025 survey of 26 cross-functional team members gave Assembly a 4/5 on efficiency, component discoverability and confidence in selecting the right token. 73% used the system regularly and 77% wanted to contribute back to it.
Key outcomes
Full token system shipped across ref, sys, and comp layers on web, iOS, and Android
Complete Assembly Figma library with anatomy docs, variants, and Storybook links across all three platforms
Full foundation layer: icon library, illustration system, type scale, color system, and avatar component
Figma became the #1 documentation destination; Storybook a close second among engineers
Two product rebrands shipped at scale with significantly reduced manual effort
Designer-driven token pipeline — color changes shipped to production without engineering bottlenecks
77% of survey respondents interested in contributing to Assembly
Reflection
What I'd do differently
Running the design system team while leading design on other product teams meant Assembly sometimes had to compete for my attention. I would have pushed for clearer ownership earlier and developed other leaders within the team sooner rather than holding so much context myself.
The 2025 survey flagged two known gaps: Figma-to-code parity scored 3.3/5 and ease of implementing designs in code scored 3.4/5. Both would have been the next chapter of the work. The LinkedIn Learning course was the right idea but needed more internal champions to drive adoption.