Introducing Design Token Automation
Creating a digital product requires countless decisions, perhaps most so in the frontend: the shape, size, colour, typography and placement of every UI component is subject to a decision process that spans multiple departments including design and development.
Keeping track of these decisions that can make or break your user experience can be an arduous task. This is why some of our front-end experts at Sweet Mustard designed a solution they dubbed ‘Design Token Automation’, which promises to streamline the decision making process between design and development.
Who was the client? Well, us, Sweet Mustard! Though we certainly hope the idea catches on, we’re mainly planning on using it to improve both the efficiency and quality of the frontend design process for our clients. Allow us to explain how we’re planning to achieve this.
The final gap
In terms of automation, digital products have already come far. Git allows multiple developers to collaborate on projects while tracking individual contributions and DevOps pipelines handle deployment and scaling almost fully automatically.
The missing link however lies in the beginning: design is still handled as a separate process, with design handed over to frontend developers as a render with a few important pointers. Design tools like Figma offer some relief, though they are mainly aimed at supporting designers without taking code synchronization into account.
Design Token Automation is our way of solving some of these issues. Design tokens help to define and document all of the design decisions. They are fundamental in the shared language between designers and developers.
Using a token translation tool (Style Dictionary) and the currently W3C agreed on file type (JSON), our aim is to make synchronization of design decisions in tools like Figma with code elements (JSON, css, flutter code, etc.) fully automatic. Thus bridging the final gap between design and development, paving a road all the way to deployment.
The end result for our clients is twofold. Firstly it allows us to speed up the time between design and development by eliminating the trivial and repetitive task of copying design choices into code. This also reduces the chance of human error in the copying process.
But most importantly, it also leads to a higher quality of service for our clients. These design tokens can be reused, guaranteeing consistent visual design between products, leading to a more uniform & trustworthy customer experience. Customers can also change aspects of their design knowing that those changes are swiftly & consistently applied throughout their product stack.
Don't hesitate to contact us if you would like to learn more. Our Sweet Mustard team is already hard at work implementing this approach into their newest projects. Maybe your company could be next to benefit from an automatic pipeline from design all the way to deployment?