Scalable Design System Migration
Migrated Artfinder from Sketch to Figma, establishing a 3-layer token architecture. Secured WCAG AA compliance and replaced legacy grids with a scalable 4px system.
The Challenge
What I inherited: No Figma files. Defined by disorganized Sketch files, InVision prototypes, and production code with no guidance.
The Problems:
Legacy 5px grid: Created inconsistent spacing and weird hierarchy.
No token system: Hard-coded hex values created drift.
Accessibility failures: Button color contrast failed WCAG AA.
Engineering friction: The primary goal was to make implementation easier.
The Assignment: 'Migrate us to Figma, fix the accessibility problems, and build a system that makes engineering faster. You have 8 weeks.'
Research & Discovery
1. Audited Sketch files: Found inconsistent spacing patterns and multiple versions of components.
2. Analyzed production UI: Identified color patterns, typography scales, and contrast failures.
3. Interviewed Engineers: Their main pain point was 'We don't know what values to use.'
4. Benchmarked Systems: Analyzed Material Design, Polaris, and Atlassian. Key insight: All use 4px/8px grids and structured tokens.
The Solution: Three-Layer Token Architecture
Layer 1: Primitive Tokens (Foundation)
Size Primitives: -size(8)=-16px ... size(4)=8px. Every value is a multiple of 2px.
Color Primitives: Red-200, Darkblue-200, etc.
Layer 2: Semantic Tokens (Meaning)
Background/Red-200, Icon/Grey-75, Text/Darkblue-200.
Why it matters: Engineers use semantic names (Background/Grey-200) instead of hex codes. Changing a primitive updates everything globally.
The Migration Process
Foundation Setup: Defined variables for size, color, type. Critical decision: Implemented a simple, logical naming convention.
Semantic Layer: Created tokens for every use case (Backgrounds, Icons, Text, Borders). Validated naming with engineering weekly.
Component Library: Rebuilt every component (Buttons, Forms, Cards, Nav) with token references and Auto-layout.
The Button Fix: Switch to semantic text tokens guaranteed WCAG AA compliance.
Outcomes & Impact
✅ Complete migration from Sketch/InVision to Figma
✅ Three-layer token system established
✅ 4px grid replaced legacy 5px grid
✅ WCAG AA compliance for all interactive elements
✅ Engineering validation: 'Engineering can move faster now'. Engineers use token names and semantic colors.
Long-term adoption: System is still in use 2+ years later.
Conclusion
What I'd Do Differently:
1. Document the 'why' behind token naming earlier.
2. Build accessibility into primitives from day 1, not fix later.
3. Create more 'before/after' examples for components.
Key Learnings:
Solo designer work requires pragmatic choices: 'Good enough' shipping on time > perfect system late.
Engineering buy-in comes from solving their problems: Focus on clear naming and predictability.
Grid changes have cascading effects: Switching 5px to 4px unlocked consistency.