Reducing time to update styles from 14 days to 10 min using tokens
Learn how to make use of the design tokens to achieve this flow below by reading and repeating the process in this case study.
Designers are now empowered. The designers make the changes they want without having to go through the dev team members, which reduces the time it takes to complete each change from 14 days to 10 minutes
Outline of this article
🎨= Design-specific part, 💻= Development-specific part
Design token is the single source of truth to name and store a design decision, tokens ensure the same style values are used across design files and code.
Implementing design tokens require you to have a design system. In one of my projects, we use MUI, the React component library, as a base for our own design system and code library.
Once you have a design system, you can start setting up design tokens anytime. Though I would recommend you to start as early as possible before your styles library grows too big to be tamed.
Though there is no standard tools required for setting up design tokens, in this case study we will mainly use
Figma - as our main UI design tool Figma Tokens - Figma plugin for creating tokens and sync Github - as our main repository, where design tokens reside Storybook - for documentation
3. From Figma to Github 🎨
You may already be using design tokens if you work with a style guide or design system. Colors, typefaces, sizes, and other design elements are your "core styles" that you can turn into design tokens.
There are three steps to do this: 1. Define a naming convention for every style 2. Keep them in a file that is independent of technology like .json 3. Store your file in a place that your team has access to, like a GitHub repo
Define a naming convention for every style In my case, the style name is pre-defined by MUI, thus, I won't go over the how in this case study. However if you're interested or need some guide, you can look into the Further readings section.
Keep them in a file that is independent of technology like .json Figma does not yet support implementing design tokens, but you can complete this step by using Figma plugins such as Figma tokens or Design tokens. The plugin will assist you in managing your styles, creating JSON tokens from each style, and syncing your existing tokens with your repo.
Figma tokens plugin: If you have an existing design system, you can import the entire style set as tokens
At this step, you can try modifying your style to include references, which I recommend doing as it will help you manage your style when design decisions change.
This 4p shade creates opacity that reference another token named Light.Primary.Main
Your tokens will be automatically converted into a JSON file by the plugin, which you can then export or sync in your repository.
Store your file in a place that everyone has access to, like a github repo Now is a good time to start talking with your developers because we need to agree on where the source-of-truth for all tokens should be kept so that both parties, design and developers, can manage these tokens. Normally, we choose the same location as your code repository.
At this point, I collaborated with my development team to create a new and dedicated GitHub repo, which I then integrated with the Figma Tokens plugin using the instructions found here
You can try pushing and pulling your tokens to the repo after integration to keep the style up to date.
Congratulations, yayyy! 🎉🎉🎉
You have now completed the first half of this journey. It's time to hand over the baton to our developers for the second half!
4. From Github to the eye of users 💻
Again, I hope you have a developer buddy (or are a developer yourself) to help you finish this section.
You should now have your Figma embedded with your tokens repo and be able to sync your JSON token file. While the rest of the step is up to you and how you want to use the tokens, here are some examples you could try for your own workflow.
Possible workflow for your team
Automate the update and transformation processes. The main idea behind design tokens is to move design decisions to a technology-independent space. Tokens are saved in a JSON format that can be transformed for any language or platform.
Developers that embrace the design system can select the design token format that best suits their needs from a list of options. Additionally, consolidating design decisions in one location rather than in Sass and Xml has several benefits. If you make a change to the file, all platforms will be able to regularly consume it and receive the updated values, maintaining the brand's look and feel.
You can use the Style Dictionary system to complete the transition process itself. Design tokens and assets will be converted into platform-specific deliverables by the Style Dictionary, which you can then publish as a shared asset via an NPM package for use by all of your products.
Make it visual The best way to see an impact is seeing in front of your eyes. Other than transforming the token, you can integrate your tokens repo with the preview environment like Vercel or Storybook
By offering the tokens and component previews and documentation, Storybook enables a quicker transition from design to actual code. I find it to be a pretty cool playground where we may experiment with various design elements and tokens before making a choice. It is the ideal option to show the impact of design tokens since it enables the developer and stakeholders to see things quickly. Additionally, it invites designers to collaborate while maintaining the code as the main source of truth for the solution.
Preview design token changes in the browser using Storybook Addon
5. Let’s see them all in action
The current design tokens pipeline and workflow from our project
A designer can see their changes being made to actual coded components without the need of a developer, giving further confidence to the designer that their changes are working on actual code and not just in Figma.
6. Unleash tokens potential with themes
When it comes to themes and accessibility, design tokens are best friends. With the use of a grouping set of design tokens, we can create a range of themes that can be used and switched out quickly inside our product suite. Examples include light and dark themes, high-contrast modes, user-preferable themes, different moodboard styles etc.
Switching between light and dark theme
Enjoy!
That's all we need to get started with design tokens. As one of the design token ambassadors, I was fascinated by how this simple concept could have such a large impact on designers, developers, and even businesses. I hope this article has helped to inform your thinking and easily kickstart your every product with the tokens.
If you found this article useful, please share it and if you like it, please help us advocate for design tokens!
