design systems • design ops — tooling • BrandinguxElle Design System
Meeting the needs of many with a single source of truth
200+
products supported
100+
brands with accessibility compliance
~80
components with product-specific variants
~2000
tokens for flexible customization without breaking
OverviewBayer’s product ecosystem was growing, and the old design system model was becoming fragmented with deviated libraries to compensate for needed, but missing flexibility for customization. With Figma’s major improvements to Variables, Code Connect, and the release of impactful AI tools like Cursor and Claude spelled out the obvious choice of a major version release of the Design System.
Our Challenges
-
Support Existing Users
With our previous design system supporting over 200 product teams, we needed to ensure ease into a new system migration
-
Unite Deviated Components
Contribute and consolidate commonly used component and patterns from detached, private, and custom libraries to improve visibility, consistency, reusability
-
Framework Translator
Because Bayer allows development teams to choose any preferred framework, we needed to find a way for the design system to harmonize between teams
-
Integrate and Update Tooling
With new AI tools, automation is more attainable than ever, and with Figma’s Variables capabilities, flexibility was more attainable than ever
Token Architecture
Overview
Design Tokens
Naming conventionIntroducing semantically named Design Tokens into our system allowed us to standardize naming conventions between design and development, improving hand-off, improve Design System usability, and reduce cognitive load through simplification.
Color
-
![]()
Beyonttra
-
![]()
Wireframe
-
![]()
Sub-Brand
-
![]()
Bayer - Pharma EU
-
![]()
Bayer - Crop Science
Typography
-
![]()
Beyonttra
-
![]()
Wireframe
-
![]()
Sub-Brand
-
![]()
Bayer - Pharma EU
-
![]()
Bayer - Crop Science
Spacing
AI Integration
Adding cursor and Figma’s MCP server to our workflow
By utilizing both Cursor and Figma’s MCP server, we solved for our design/dev parity issues, sped up production time, and centralized our iterative versioning.
System prompts & instructions
product migration translatorBy mapping every design token from our previous design system to our new design system, uxElle, we successfully able to automate product migration from one to the other.
Framework translatorAfter auditing all products at Bayer, we discovered many non-design system users were using Shadcn, Tailwind, and mui. To ensure compatibility, we created a workflow to translate any product into our uxElle’s framework.
Component Library
Nearly 80 components and patterns compose our flexible component library. Each component is truly out-of-the-box ready with ‘Replace Instance’, product-specific and branding tokens.