Syncing Content
All work
Design System2025
Internal Design System
A token-led Figma library with 200+ components mapped 1:1 to Tailwind CSS variables, lifting team velocity 85%.
- Client
- Internal · OTOBIT
- Timeline
- 16 weeks · 2025
- Role
- Design system lead
- Toolbox
- FigmaTokens StudioStyle DictionaryStorybook
[ 01 — Problem ]
Three squads, three quiet forks of the same components. Onboarding a new engineer cost two weeks of 'which variant do I use?'
Internal design system used across three product squads. The goal was zero ambiguity between Figma and code — what a designer drops in a frame is what ships, down to the token.
[ 02 — Research ]
How I learned what to build.
- Library teardown
Audited all three forks; tagged every divergence.
- Eng interviews
Talked to 7 engineers across squads about handoff pain.
- Competitor analysis
Studied Polaris, Carbon, and Radix for token-naming patterns.
[ 03 — Insights ]
- Insight 01
“Tokens before components. Naming wins or loses adoption before a single Figma frame is opened.”
- Insight 02
“Documentation IS the system. If it can't be read in 90 seconds, it won't be used.”
[ 04 — Process ]
Discover, define, design, ship.
- 01Tokens
Color, type, spacing, radius, shadow, motion — defined in JSON, generated for both Figma & Tailwind.
- 02Primitives
Button, Input, Card, Stack, Grid. Variants ≤ 4 per primitive.
- 03Composites
Built only after primitives stabilized for 3 sprints.
- 04Rollout
Pair-shipped one screen per squad with the new system before deprecating forks.
[ 05 — Solution ]
The interface that shipped.
[ 06 — Impact ]
Numbers from production.
- 200+
- Components
- 85%
- Velocity lift
- 1 wk
- Onboarding down from 2 wks
[ 07 — Lessons ]
Design systems live or die on the second sprint, not the first. Adoption is a function of how easy it is to use, not how complete it is.
Next case study
Read case studyMobile UI Concept
A gesture-led mobile concept exploring thumb-zone radial menus, drag-to-confirm, and tactile haptic curves.