Design Token System v2.0 Release
- Blog
- Design Token System v2.0 Release
Insights
Design Token System v2.0 Release
Unified design tokens across web, mobile, and native platforms with automatic sync
Design tokens are the atomic building blocks of a design system — the colours, spacing values, typography scales, shadows, and motion curves that define the visual language of a product. With v2.0 of our Design Token System, we have achieved true cross-platform unification, enabling a single source of truth that automatically propagates changes to web, iOS, Android, and native desktop applications.
The journey to v2.0 began with a fundamental question: why do design teams spend so much time manually synchronizing values across platforms? Every time a colour changes, a spacing value is updated, or a new font weight is introduced, designers and developers across multiple platforms must coordinate to ensure consistency. This manual process is slow, error-prone, and scales poorly as the number of platforms and products grows.
Cross-Platform Token Architecture
At the core of v2.0 is a new token architecture that separates semantic meaning from platform-specific implementation. Tokens are defined in a platform-agnostic format that captures their purpose and relationships, then transformed by platform-specific build pipelines into native formats — CSS custom properties for web, Swift constants for iOS, Kotlin values for Android, and XAML resources for Windows. This separation ensures that a single design decision propagates correctly across every platform without manual intervention.
The architecture supports three layers of tokens: primitive tokens that define raw values, semantic tokens that assign meaning to primitives, and component tokens that map semantic tokens to specific component properties. This layered approach makes the system both powerful and maintainable, allowing teams to make broad changes at the semantic level or targeted changes at the component level.
Figma Plugin Updates
Our updated Figma plugin now provides bidirectional sync between design files and the token repository. Designers can modify tokens directly in Figma and push changes to the central repository, or pull the latest token values into their design files. The plugin also validates token usage in design files, flagging instances where hard-coded values are used instead of tokens and suggesting the appropriate token replacement.
Design tokens are not just variables with better names. They are the contract between design intent and engineering implementation — the bridge that ensures what designers envision is exactly what users experience across every platform.
Migration Guide and Tooling
Migrating from v1.x to v2.0 is supported by comprehensive tooling. An automated migration script analyzes existing token usage, maps v1 tokens to their v2 equivalents, and generates pull requests with the necessary changes. For custom tokens, the migration tool provides a guided workflow that helps teams define the semantic layer for their proprietary tokens. In testing with early adopters, the migration tool automated over 90% of the transition, reducing what would have been weeks of manual work to a few hours of review.
The migration guide also covers organizational changes recommended for v2.0 adoption. Teams are encouraged to establish a token governance process that defines how new tokens are proposed, reviewed, and approved. This governance prevents token proliferation — a common problem in v1.x where teams created duplicate tokens for similar purposes, undermining the consistency that tokens are meant to provide.
Performance and Developer Experience
Token resolution in v2.0 is significantly faster than v1.x. The build pipeline has been rewritten to support incremental compilation, meaning that a change to a single token triggers rebuilds only for the platforms and components that use it. Build times for large token sets have decreased by 75%, making the edit-preview-commit cycle fast enough to encourage experimentation.
Developer experience improvements include auto-complete support for all major IDEs, a token browser CLI that allows developers to search and preview tokens from the terminal, and a visual diff tool that shows the before-and-after impact of token changes across all platforms. These tools reduce the friction of working with tokens and make the system more accessible to developers who are new to token-based design.
Joel Koh
Digital Lead at One X Design, passionate about human-centered design for AI products.
Share this article
Related Posts