⭕Tokens
What are tokens? and how can you use it while designing using Jux
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.
With the use of JSON, design tokens allow developers to implement design decisions across code bases. In this way, the design and development teams are aligned, and development efficiency is increased. Using design tokens in this manner allows teams to collaborate more easily, align their designs with brand design guidelines, and increase efficiency.
It’s important to keep in mind that there are two properties that tokens can have, with two options for each property: alias vs non-alias tokens:
and simple vs composite tokens:
For more references check out this article for a deeper dive. Also, Tokens naming is an important topic recommended to read about here.
Jux token management
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). Jux tokens are managed in a dedicated page, accessed through the left sidebar navigation panel.
Currently 4 types - Color, Typography, Font family and Dimension (future token support see roadmap):
You can create different token sets: a core set for core tokens and theme sets with alias tokens that are identical in structure, but point to different core tokens in the core set. (for example light/dark dense/loose modes of the UI).
The way to structure tokens:
Start by creating the core tokens in the core set (ex. brand colors)
Create theme sets which will have alias tokens that will point to some of the core tokens in the core set.
You can use any taxonomy you’d like for the token structure, with the only rigid parts being that they would start with the token type (color for example) and then follow the folder structure (color.folder.folder.folder.token_name). Tokens in the core set will also have ‘core’ as the second item in the token name (color.core.folder.folder.folder.token_name).
You can duplicate the theme sets to have as many as you need.
Using tokens in the 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.
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.
Sometimes, it’s more convenient to create a new token 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. After clicking it - the ‘token creation sidebar’ will appear for you to make sure the values are correct and save it.
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.
Last updated
