Design tokens: the shortestpath from design to dev
Design tokens are soon coming to UXPin, and they’re about to make the lives
of your design and development teams infinitely easier. Want to know how?
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.
When are design tokens coming to UXPin?
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.
Color token import
You’ll also be able to 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.
More types of tokens
More CSS design tokens are in the works, including tokens for spacing, padding, gaps, border styles, animations, and easings.
Want to be the first to try design tokens in UXPin?
We’ll be rolling out design tokens gradually, so sign up for our waiting list, and you’ll be the first to know when we launch. Interested?
