Context
The company developed a global product ecosystem that included mobile apps, web, B2B, and white-label solutions. As the company grew, it became necessary to scale the same product scenarios across platforms, launch new lines of business, and adapt products for different brands while maintaining a consistent user experience.
At the same time, each part of the ecosystem was built using separate UI libraries and local rules. Teams were recreating similar patterns, solutions differed across platforms, and developers had to manually interpret Figma mockups. The approach that had worked for individual products was no longer scalable across the entire ecosystem: synchronization and support costs were rising, and maintaining a consistent brand and quality was becoming increasingly difficult.
Challenge
Design a unified, scalable design system from local UI libraries that enables:
Visual consistency across products and platforms;
Development independence from Figma during implementation;
Faster component discovery and reuse;
Easy scaling and onboarding of new teams and products.
My Role
As Design System Lead, I was responsible for the design system across products and platforms, including:
design system strategy and architecture;
Figma and Git library development and maintenance;
Design-to-code automation and design–engineering synchronization;
team onboarding and training on design system usage.
Approach
I focused on building a scalable, highly automated design system where system changes could move from design to implementation with minimal manual handoff. The architecture, workflows, and AI layer enabled teams to use, maintain, and evolve the system independently within shared standards. I analyzed 10 major design systems, including Carbon, Wise, and eBay, to understand best practices for scaling, and completed AI for Design Systems Certification. I then audited all products and platforms and interviewed team leads to identify current issues, legacy, and system scope. Separate C-level interviews helped define the current vision and future direction of the product ecosystem.
Architecture design
Based on findings, I designed the new system architecture and built a Proof of Concept to validate it before migration. I presented the concept to design and engineering, gathered feedback, and aligned teams on the target architecture and development plan. Once approved, I moved into the gradual migration of foundations, tokens, components, and existing products.
System standardization
The audit revealed fragmented tokens and foundations, along with inconsistencies between design and implementation. In some cases, engineers had to interpret system values directly from Figma.
I established a unified foundation and token structure that supported shared rules, platform variations, and themes. Legacy was migrated gradually as new system solutions were implemented and outdated versions were phased out.
I automated design-to-code delivery: changes to the main library were automatically validated in Figma and distributed across products. This reduced implementation errors and manual work while keeping Design and Engineering in sync.
Component lifecycle
Once per sprint, I held sync sessions with product team leads to identify components for standardization and align requirements across products and platforms. For each component, I defined tokens, specifications, variants and states, documentation, accessibility requirements, and validation rules. I then added it to the Figma library for design review.
Once approved, the component was implemented in platform-specific component libraries, preserving shared logic while supporting necessary platform differences. After validation and code review, updates were rolled out across products. Following successful adoption, legacy components and related tokens were phased out, reducing duplication and unused solutions.
This established a consistent component lifecycle—from product request and cross-team alignment to implementation, adoption, and legacy removal.
System accessibility & adoption
I developed Storybook as a single source of truth for implemented components, bringing together states, variants, documentation, accessibility, foundations, themes, and platform-specific behavior. Designers and engineers could review components and their implementation in one place without constantly switching to Figma.
In Figma, I created clear navigation across foundations and core components. Automated tokens and modes allowed designers to switch between platforms and themes and visually compare variations. For onboarding new team members: navigation, documentation, and visual examples helped them quickly understand the system’s structure and how to work with it.
Additionally, I organized ongoing communication through regular design-system meetings and a dedicated channel, where teams aligned on changes, discussed new components, and received design-system updates after releases. This created a clear process for adoption and continuous system development.
AI-assisted operating model
As AI-assisted development became more common, vibe coding introduced a new source of inconsistency and legacy: engineers could generate solutions faster, but outside established design system patterns and standards.
I developed AI workflows for design system development, translating its architecture, rules, and standards into reusable instructions. I configured specialized roles and skills for component development, validation, and Code Review. This allowed teams to use AI within the design system’s established rules, reducing uncontrolled variations and automating repetitive development and validation tasks.
Results
The design system became shared infrastructure for design and engineering. Design-to-code automation significantly reduced manual handoffs and developers’ reliance on Figma, while a unified component lifecycle accelerated delivery and improved consistency across products and platforms.
Gradual migration reduced legacy and duplicate solutions. Storybook, documentation, Figma navigation, and DS communication helped teams independently find the right components, understand platform-specific differences, and validate implementation. This simplified onboarding and accelerated the adoption of new system and product solutions.
For the business, the design system significantly reduced the cost of scaling the product ecosystem: new products required fewer design and development resources, teams worked faster and more autonomously, and AI workflows supported sustainable system growth.
Metric | Result |
|---|---|
Manual design-to-code handoff effort | −80% |
Cross-platform consistency | +15% |
Design debt | −18% |
Technical debt | −12% |
Product launch time | −23% |