Updating a design system in a growing product
Role:
Solo Product designer
Duration:
2 months
Tools:
Figma, Design Tokens, Atomic Design
TL;DR
Context
The design system already existed, but as the product grew more complex, everyday design work became harder to scale.
What I did
After Figma Config 2023, I led a full update of the design system around how we design today, and redesigned the handoff to developers.
Key Decisions
- Paused feature work to update the design system
- Introduced design tokens and Variables as the system foundation
- Centralised translations
- More design time for features: UI ticket prep 3 hrs → 2 min
- Developers involved earlier in estimation
Faster delivery
+
Consistency across web and mobile
+
Fixed accessibility
issues
- Same token names, no hex codes
- Design in English, check German instantly
- Fewer clarification questions
Design system’s impact
Problem & Decision
Outdated translations and mismatched colours slowed every design
Translations lived in two databases that were often outdated or containing different translations for the same entries. Switching component states could break content. Colors didn't match between design and development: every Jira ticket had to specify both token names and hex codes.
This slowed everyday design work and made consistency hard to maintain as the product grew.
Figma Variables could fix all of it, so I proposed pausing feature work
Variables could hold both tokens and translations, so one update would fix both.
Snapshot of the translation files
Design tokens
Shared token names replaced memory and hex codes
After aligning with developers, I introduced design tokens with shared naming.
0
Hex codes in tickets
Designers and developers use the same token names
Colour tokens
Translations
Translations moved into Figma Variables, so designers and developers work from one source
German runs longer, so designers check it while designing. Developers read the same translations in Dev Mode.
100%
Consistent copy
One wording change updates web and mobile
↓
Time searching for content
Every translation lives in Figma, not in the product
Centralised translations make language differences visible and easy to handle while designing
Handoff
I reworked the handoff with developers, and front-end tickets got faster
Every Jira ticket described the UI in full, when hi-fi designs should have been enough. Now designs and prototypes cover UI, behaviour and translations, and Jira covers logic and backend. I ran a workshop so developers could use Dev Mode fully, since live specs are easier to follow than written ones.
3hrs → 2min
UI ticket prep
Hi-fi designs replaced written UI descriptions
↑
Faster front-end tickets
Prototypes showed behaviour, so fewer questions
Reflection
Pausing feature work paid off twice: a better system and a faster handoff
Casual conversations can lead to big impact
The handoff rework wasn't on the roadmap. It started when I asked developers what they really needed.
Centralised translations keep tone consistent, but need discipline to maintain
Future
Next, I'd connect Figma MCP to cut UI ticket delivery time by 50 to 70%
AI would generate code straight from the design system and hi-fi frames, with far less back and forth during QA. Connected to Claude, it would also let me audit the full Variable library for inconsistent tokens, translations, documentation and accessibility.