Design Tokens & Continuous ‘D’ — Design, Development & Delivery
It’s 2022, and who hasn’t already heard about Design Tokens? They’re everywhere — from design tools to development environments.
Conceptualized by Salesforce and termed by Jina and Jon, Design Tokens are the single source of truth to name and store a design decision. The design tokens enable better collaboration between design and development teams and ensure consistency.
But, there is still a significant amount of inconsistency and manual processes involved in how tokens are exported from the design tools and how they’re applied in both design and development environments.
From my conversations with designers and developers working on design systems, below is a high-level view of what their approach looked like;
- Designers define the tokens in their design tool, export them, and share them with the development team. The exported file is usually in JSON format.
- The development team converts the JSON file to a platform-specific file with the help of a token translation tool. The converted file is a set of atomic values consumed by various design system elements.
- Designers communicate any changes to the design tokens with the development team. The development team then makes required adjustments or applies the new tokens file to ensure alignment and consistency with the design decisions.
If you read between the lines, you will notice that creating and maintaining tokens is a tedious and, quite often, manual task. In addition, ensuring consistency and continuously integrating and delivering these atomic values from a designer’s environment to a developer’s is quite challenging.
In my quest to find a solution to this challenge, I came across Figma Tokens, a Figma plugin that helps create, apply and manage design decisions.
The Figma Tokens plugin helps solve two aspects of our challenge;
- It provides a rich experience to create, apply and manage tokens from one unified interface compared to navigating through several layers and art-boards on a Figma file.
- It provides a sync option, allowing us to store the design tokens in the same repository as the code base, such as GitHub. Designers no longer need to export and share a file with the development team, nor is the development team required to manually upload the shared file to a repository.
With Figma tokens plugin, I was able to quickly connect to GitHub repository and enable an automatic and seamless integration. Any changes I made to the design tokens on the plugin or in the repository were always in sync.
But wait, our challenge is only addressed partially. The automatically exported file is a JSON file that should be translated before being consumed. So now, I am stuck again. To get to my finish line, I needed to know…
- Who does this translation?
- When should the translation happen?
- How is the translated file distributed?
In another context, I was beautifying a friend’s resume (this is what UX Designers do most of the time, right? Beautifying PPTs, Resumes, and whatnot!). While I was pixel-perfectly aligning a set of skills, actions and workflows triggered a subconscious thought. I remembered that every repository on GitHub has a dedicated section for this. So, I got a crash course from my friend on how Github actions work and how they are triggered.
Applying this knowledge to our context (No. Not the beautifying resume part. The GitHub actions part :D), I was able to answer my questions by creating a custom action in GitHub.
Whenever there is an update to the tokens source file in the repository, the workflow defined in the custom action will…
- Check out the tokens source file
- Translate the source file by replacing all math equations, aliases, and groups into atomic values
- Convert the atomic values into style (CSS/SCSS/LESS) variables using a style-dictionary
- Check in the translated and converted files back to the repository
- Publish the package file to a repository manager by automatically bumping the version (a minor update in my case)
And in this way, I reached my finish line. I could continuously integrate and deliver design decisions to the development environments, ensuring greater design decision consistency and limited manual intervention.
Design and development are now driven through the design tokens enabling continuous integration, delivery resulting in a better handoff. (And, of course a happy friend. Beautifying the resume was worth the effort ;))
Further reading:
- Design Tokens for Dummies: https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71
- Figma Tokens: https://www.figma.com/community/plugin/843461159747178978
- GitHub Actions: https://docs.github.com/en/actions
