One UI Token Design System
We adopted both the One UI design system and tokenization to make it efficient and consistent to operate with a 40% reduction in quantity of guidelines compared to the previous Sketch-based system and a 20% reduction in inconsistencies. It has also improved developer collaboration and management of history.
Samsung Electronics
Role
Design system designer
Participants
Team of 4 designers
Duration
2023.09 - 2025.01
Based on One UI, multiple apps within the Mobile Experience department, as well as other business units such as the Home Appliances and TV experience, have been influenced. In this project, my team and I structured the One UI design system, significantly contributing to maximizing scalability and efficiency in future projects while also reducing unnecessary internal resources.
Problem : Previous Sketch-based guidelines were inconsistent and hard to maintain. Design inefficiencies created friction in scalability and developer collaboration.
Solution : Introduced a tokenized Figma design system to standardize components and improve developer handoff. The structure enabled scalable design decisions and increased accuracy across devices.
I focuesed
Unified design system for multiple products Atomic and Tokenized library Scalable components for productivity
1 A design system is more than just aligning components and screens— it defines the structure of the design organization. Our team developed and distributed a design principle, a library, and a screen template, which are integrated across products like Samsung Health, Wallet, and etc. While each product manages its own optimized configurations, descriptions, and custom components, the overarching design system remains part of One UI Design. This ensures both consistency and efficiency across all products.
2 The six atomic elements included in the basic library were particularly crucial for use across all areas, so they were created as tokens to ensure alignment between developers and designers.
We break down existing components into atomic elements and extract specific values to reduce human error and organize scattered design elements into a solid, manageable system.
For example, when designing buttons, we no longer use raw HEX codes — instead, we adopt a tokenized structure.
With tokenized components and a structured design system library, multi-device experiences from compact cover screens to large 14-inch tablets can be designed efficiently and consistently. In One UI, ensuring cross-platform and cross-device consistency is critical. Through this project, we reduced human error and improved scalability, ultimately boosting design and development efficiency across the Galaxy ecosystem.
Outcomes
40% Lighter 20% more accurate 50% Faster
Reduced guideline quantity up to 40% Reduced QA-reported human errors In pilot test, cut design time by 50%