We use cookies to improve performance and enhance your experience. By using our website you agree to our use of cookies in accordance with our privacy policy.

COMING SOON

Design tokens: the shortest
path 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.)

Keep brand consistency across platforms

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.

Implement and update at scale

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.

Improve design-dev collaboration

When are design tokens coming to UXPin?

Font and color design tokens

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

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 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?

Want to be the first to try design tokens in UXPin?