Knowledge Base
Ask or search…

Design Tokens

What are tokens?

Design tokens are reusable visual elements that represent design choices in user interface design. Tokens provide a unified language for communicating design decisions, allowing for a multi-layered architecture of styles which translate to code.
Design tokens are defined and stored in a central location, allowing designers to quickly and easily apply consistent styles across various products and projects. Tokens include information such as colors, typography styles, sizes, spacing, among others. This allows for a more efficient and scalable design process, as designers can reuse and build upon existing tokens instead of starting from scratch each time.
Design tokens are written in a JSON format, allowing developers to quickly implement design decisions across code bases. This helps to ensure that the design and development teams work in tandem, with the same goals in mind. By using design tokens in this way, teams can collaborate more easily, align their designs with brand design guidelines, and increase development efficiency.
Tokens are structured with three properties in mind: alias vs core tokens, simple vs composite tokens, and nested grouping of tokens. It's easier to communicate and document design decisions when designers think in terms of meaning and purpose rather than hard-coded values with tokens.
Not acquainted with the topic? Check out Erez Reznikov article for a deeper dive. Also, Tokens naming is an important topic recommended to read about here.

Jux token management

JUX tokens are managed in a dedicated page, organized by types based on W3C standards. Under each type, different token sets can be created for the interface in design different modes (light/dark dense/spread). Under each set, three main folders are automatically created for each token category: Core, Semantic, and Specific.
The recipe to structure tokens starts by creating the core tokens (ex. brand colors), followed by semantic and specific tokens for one mode, duplicating the token set for the another mode, and changing all the semantic and specific tokens to point to the correct core tokens of that mode. The existence of the three prime system folders helps make the whole token system as common and readable as possible.

Using tokens in JUXs Editor

Tokens can be created and edited in the management page. Once created, they will appear in the Editor DDP (dynamic design panel) inputs for selection.
Tokens are easier to create while testing the design decisions (values) on different components, on the canvas itself. To create tokens in the editor view on canvas, hover over the DDP fields to reveal the token icon menu button and click it. Create token action is placed at the bottom of the dropdown. Of course, new tokens will appear in the management page as well.

Sharing design tokens with development

JUX has an internal “repository” for tokens, components and assets. Every time a token (and of course - component and asset) is saved or updated, the JUX repository will be updated. A developer can use the JUX CLI to pull the internal “repository”. On the developer side, the developer needs to run the login command followed by the “pull” command to pull the repo. Than immediately use that code in their project.

Maintaining an organized shared token library is the first step for better team collaboration. Let us know if you need help with establishing your team token library or if you have feedback about our tokens management.
What to expect next? Usage information of each token.