NEO: Multibrand Design System
My Role
Product Design Lead
Team
1 Product Manager
3 Designers
5 Developers
Company
BMW Group
The Challenge
Each of our three brands had its own UI Kit, but without a unified component library, each product team developed the same components independently. This led to significant inconsistencies in implementation—differences that became particularly evident when users moved through the ecommerce journey across our products.
A button might look the same across brands, but behave differently. Form validation appeared at different moments. Loading states varied. Navigation patterns were inconsistent.
Duplicated Development Effort
Every team building the same components from scratch, multiplying engineering costs.
Design-Dev Disconnect
UI Kits showed one thing, implementations delivered another, creating endless design QA cycles.
Accessibility Gaps
With the European Accessibility Act approaching, we had no centralized way to ensure compliance across implementations.
Building the foundation with Tokens Studio.
We started by building a token-based theming system using the Tokens Studio. A key advantage of this approach was the direct integration with GitHub. Design tokens were automatically synced to our repository. This eliminated the traditional handoff friction—when designers updated a color or spacing value, developers immediately had access to the changes in a format ready for implementation.
What This Enabled
Single source of truth for all brands
Consistent component behavior
Rapid brand theming and switching
Reduced design and development time
Limitations We Faced
Plugin dependency
Adoption barrier and costs
Complex token management
Limited native Figma integration
A scalable design system with unified components.
Migrating to Figma Variables.
When Figma Variables matured, we saw an opportunity to eliminate our plugin dependency and gain better performance. We carefully migrated our entire token system to native Variables, maintaining team velocity while modernizing our infrastructure.
Audit & Mapping
Documented all existing tokens and mapped them to the new Variables structure, ensuring no functionality would be lost.
Phased Rollout
Migrated component families one at a time, allowing product teams to adopt changes gradually without disrupting ongoing work.
Team enablement
Ran workshops and created comprehensive documentation to ensure every designer understood the new system.
Comprehensive documentation for EAA compliance.
With the European Accessibility Act deadline approaching, we took a proactive approach documenting the accessibility requirements for every component. This empowered product teams to implement components correctly without needing deep accessibility expertise.
This documentation approach empowers product teams to implement components correctly without needing deep accessibility expertise. Each link leads to detailed acceptance criteria and testing procedures.
Measurable results across the organization.
60%
Reduction in design time
45%
Faster implementation