Design tokens: the shortestpath from design to dev
Manage your design workflow better with design tokens to stay
consistent with your Design System across all projects.
What are design tokens?
Design tokens (a.k.a. atomic design tokens) are small but central elements of entire design systems. They carry common information about your UI like colors, spaces, or font sizes across teams, apps, and platforms. In other words, they’re the single source of truth for individual design choices.Â
In practical terms, design system tokens replace hard-coded values with sets of plug-and-play properties that you can quickly implement and update at scale (without having to ask your developer every time).
Keep brand consistency across platforms
The point of design tokens is to keep UI and code consistent across designs and products. This way, it’s much easier to always stay true to the design, no matter who’s currently working on the development team (or on the design.)
Implement and update at scale
A single design token will help you introduce consistency across multiple elements in multiple places at once. Saving you and your team tons of time you’d otherwise spend changing things like colors, fonts, or spacing one by one.
Improve design-dev collaboration
A design token automatically translates design changes, such as color or typography, into strings of code. Instead of sending tickets to the dev team (and then checking and approving each one), the designer updates the design token pulled into an app, and that’s it. Done.
Color Tokens Are Here!
Color token import
Import design system color tokens to UXPin via copy-paste or linking JSON/CDN. In the future, we’ll work on connecting with Theo, Style Dictionary, and the design token format module.
Font and color design tokens
First, we'll release design tokens for colors, fonts, and eventually properties like padding, borders, and so on. Use them to update your design libraries and change styles to update all components of your design system.
More types of tokens
More CSS design tokens are in the works, including tokens for spacing, padding, gaps, border styles, animations, and easings.
Stay tuned for more Design Tokens Updates
Color Tokens are here and soon we'll be rolling out new elements of Design Tokens. Talk to us to see how Design Tokens can improve your workflow.
