⭕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.
In Jux, we decided to structure tokens with three properties in mind: alias vs core tokens, simple vs composite tokens, and nested grouping of tokens. For external references check out this 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 Jux's 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.
Last updated
