The Power of Design Tokens in Figma - a Single Source of Truth for Design Systems
Why companies should use design tokens in the future for faster processes, making developers and designers happy and saving unnecessary sync meetings.
share article
.svg)
.svg)
.svg)
Published on
February 23, 2023
Author
Nadia Wiegand
UX + UI Designer
What are Design Tokens?
Design tokens are the visual design atoms of the design system - more precisely, they are named entities that store visual design attributes. We use them instead of hard-coded values (e.g., hex values for colors or pixel values for spacing) to maintain a scalable and consistent visual system for UI development. Salesforce, Lightning design system
Design Tokens are a powerful tool in Figma for any organization that wants to create a consistent, unified design system. Simply put, Design Tokens are standardized values and properties that define the properties of design elements such as Fontsize, Colors, Boarder Radius, Spacing, and Animations.
These tokens can be used across projects and platforms, ensuring consistency across all of the company's products and services.
Why use design tokens for a design system?
Design tokens are essential for any organization that wants to build a unified design system in Figma. They enable designers and developers to create interface components that work across multiple projects, platforms, and design and development teams.
This consistency leads to a smoother user experience, faster development cycles, and fewer costly errors.
Design tokens: unleash the magic
Design systems include hundreds of atoms and elements. When companies have multiple teams working on and with a design system, it's important that they all speak the same language.
Naming Conventions in Design Systems
The biggest challenge with design systems is that the design and implemented code has different naming for UI components and values.
A simple example is this component
Naming is not only important in our everyday lives. How would it be if everyone could choose for themselves what we call the banana? You ask for a banana, and you get everything but a banana.
Without agreeing on which term stands for which thing, we can't communicate. The same is true for UI components.
What would you name the component? Is it a banner, a message or an alert?
Naming Pinciple 1: Logical Naming
Good names are easy to understand. The naming is logically oriented to the object.
Naming Pinciple 2: Simple Naming
When naming becomes complex and can't be kept simple, something is probably wrong. Either the component already exists in another form or the component is not generic enough.
Naming Pinciple 3: Scalable Naming
If it is clear that components scale, an equally scalable naming should be used. An example for sizes is xs, sm, md, lg, xl, xxl, 3xl and so on. Not good would be SpacingSmall, SpacingSmaller, SpacingSmaller, SpacingSmaller
Naming Pinciple 4: Standardized Naming
Every skateholder needs to understand which designation stands for what. Designers, developers, QA, PO, analysts, etc. should always know which component is being discussed.
Naming Semantic for Design Tokens
To name a token correctly, the information of an element is divided into 4 areas:
Design Components in Figma Name
When we use colors in a design system, we no longer name the tokens by what they are (Green500), but by what they are used for.
By directly linking color and usage, a design system can be maintained cleanly by multiple designers without having to look up references for each element, or even using "just any color".
The plug-in Tokens Studio for Figma
Jan Six, a Product Designer at GitHub, has already developed several plug-ins for Figma. Besides Batch Styler and Auto Grid, he has developed the revolutionary plug-in Tokens Studio for Figma, which enables the gap between native Figma stylings and other standatized values for design systems.
The advantages of the plug-in
With the plug-in, values and properties for components can be created quickly and easily, which can be used not only by designers, but also by developers. Due to a uniform naming convention and an almost identical structure of components in design and development, the ei of the frontend saves a lot of time. Developers no longer have to manually enter a value for each component, but can instead use the tokens created in Figma.
A Single Source of Truth
Design values that are used globally for a design system can be exported and synchronized as JSON files by the plug-in in order to use design presets.
Synchronization can be done via:
- Local memory (default)
- JSONBin.io
- URL
- GitHub
- GitLab
- Azure DevOps
- General versioned memory
Intelligent referencing
By creating semantic design tokens, other tokens in the JSON file can be referenced. In this way, themes can be created that depend on a global set of other tokens.
An example here is the light and dark mode, which takes a lot of time in the manual adjustment, but is easy to manage with the plug-in and the semantic structure.
Use mathematics for token values
To multiply token values by a certain scale, round to numbers or create a spacing pattern, multiplication, division, addition or subtraction can be done directly within the plug-in. This allows design decisions to be made dynamically.
Tokens for radii/distances etc
The creation of systematic design values is limited to colors, fonts and effects such as dropshadows with the Figma board tools.
Other design properties such as radii, strokewidths, spacings in autolayout, and resizing can be specified via the plug-in and reused for all atoms of a design system.
Installing the plug-in
The plug-in for Figma can be installed here. Alternatively search for "Tokens Studio" in the Figma Community. Via "get started" you can view all features and get started.
Documentation of the scope of functions
The extensive documentation of the plug-in for designers and developers can be viewed here.
Synchronize tokens for designers and developers
The defined design tokens can be synchronized via several options.
Local memory
By default, all tokens from the plug-in are stored in the document that is being worked on. This solution works well, but only until the tokens need to be used in multiple documents. Then all tokens must be copied and pasted into the other document.
JSONBin.io
Those who have an account at JSONBin.io can synchronize all tokens here. This option is free of charge and in handling an easy way to synchronize the tokens. The disadvantage is that the tokens are not versioned by default.
URL
The tokens can be stored on a remote .json file stored on your own server. This synchronization method is read-only.
GitHub
Synchronizing with GitHub is the method recommended by the plug-in developer. By connecting to the repository, tokens can be pulled and pushed. A branch can also be selected to push to, allowing design decisions to be reviewed and investigated before being pushed to production.
GitLab
For the GitLab, the same applies as for the GitHub. Connect to the repository so that tokens can be pushed and pulled. Branching to examine the tokens on the "living heart" is also possible.
Azure DevOps
This option allows to store tokens on ADO.
General versioned memory
A read-only, write-only and read-write-create flow is supported here.
BitBucket
BitBucket is currently not supported, but it is planned to integrate this.
These works might interest you
New design system in Figma for Deichmann
.webp)
Are you ready to set new standards?
Then let's talk.
