Updating a design system in a growing product
The design system already existed, but as the product grew more complex, everyday design work became harder to scale.
After Figma Config 2023, I led a deep update of the design system to reorganise it around how we actually design today, making it easier to evolve, document, and use when building new features.
Impact
- Cut design-to-dev handoff time by ~90%, enabling faster feature delivery
- Improved consistency across web and mobile
- Fixed accessibility issues like disabled state contrast
Key Decisions
- Paused feature work to update the design system
- Introduced design tokens and Variables as the system foundation
- Centralised translations
The design system was hard to use
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 changed the context
When Figma introduced Variables, I identified them as the right lever to solve these issues and proposed pausing feature work to update the design system.
Snapshot of the translation files
Replacing memory with shared rules
After aligning with developers, I introduced design tokens with shared naming.
Designers and developers relied on the same references instead of memory or hex codes.
Colour tokens
Centralising translations across web and native
Translations were managed in two Excel files that were often outdated or duplicated. When content couldn't be found, designers had to search directly in the product, making it hard to keep wording and tone consistent across desktop and mobile apps.
I moved translations into the design system using Variables, organised by generic usage first, then by feature. Designers could design in English and immediately check the UI in German, keeping copy consistent and catching layout issues caused by long words.
Centralised translations make language differences visible and easy to handle while designing
Redesigning the design–dev handoff process
While updating the design system, I noticed friction in how UI work was handed off to developers, with Jira tickets duplicating what was already in Figma and taking hours to write.
After researching how other teams handled handoff and aligning with developers, I redesigned the handoff process so high-fidelity wireframes and prototypes became the single source of truth for UI and translations, while Jira focused on logic and backend specifications. To support this shift, I ran a workshop to help developers adopt Figma Dev.
The new process reduced handoff preparation time by ~90% for designers, involved developers earlier in estimation and ownership, sped up refinement, and significantly reduced clarification needs—making implementation easier and more interactive.
Learnings & trade-offs
- Centralising translations is a tradeoff: it improves consistency and tone across products, but requires discipline to maintain over time.
- The handoff improvement wasn't on the roadmap, it came from a casual conversation.
- Solving one problem well can unlock others. Pausing to fix the design system also exposed and solved a handoff bottleneck that had nothing to do with the original plan.
Introduce AI to further improve delivery speed and consistency
To accelerate the design-to-production workflow, I would implement Figma MCP. With AI generating code directly from the design system and hi-fi frames, UI ticket delivery time could drop by 50-70%, with significantly less back and forth during QA.
The MCP would also strengthen design system management. By connecting Claude to it, we could audit the full Variable library for inconsistencies, including translation strings, tokens, documentation and accessibility across the product.
