Design tokens are design decisions which store tiny pieces of design information, centralised cross multiple platforms and products. They store design decisions such as colors, sizes, spacing, etc in a platform-agnostic way, using an atomic design pattern. Figma tokens and a figma-based token library is used to convert a Design Token into JSON. In the Git repository, the JSON file undergoes several token conversion processes and operations to arrive at the final version of brand files and themes. in short, design tokens + JSON + Git + Jenkins => Magic! This enables front-end developers to focus on business logic over aesthetics.
At Yubi, we have 5 products (Yubi Loans, Yubi Invest, Yubi Flow, Yubi Co.Lend, Yubi Pools) to ideate, design, build and grow. And let us tell you, there was hardly a day when we didn’t spend realising the need for robust process automation to ease the transition from design to development. The more we thought about it, the more we were able to narrow down on 2 problems as the root cause.
Problem 1: What we Design is Not Always the Exact Thing That Is Built
Image Credit — Imgur
Though it may seem a bit exaggerated, designers and developers can easily relate to and agree on the above visual. There could be many reasons for this problem, but the most common one is that designers and developers have different areas of expertise.
For example, let’s say we want to update the padding of a certain button across the application.
Current Scenario
- Designer makes necessary padding changes in the design, on Figma, XD etc;
- Designer shares the updated design file with dev team;
- Developer goes through the updated file and observes the padding changes;
- Developer now makes the necessary padding changes in the development environment;
- Designer verifies the padding change and signs it off.
Now, lets see how the above process works real time
Source: Yubi
Problem 2: No, Amount of Time Isn’t Enough!
Imagine revamping your company’s brand on website, iOS and Android app, across design components, where each component has different shades of your brand’s color palette, different sizes and transitions.
It could easily take weeks to propagate this, as you will implement these changes across platforms/products and kickstart the development on each one of them.
Design tokens to save the day!
Now let’s see what design tokens are and how they solve our problems.
What are Design Tokens?
Design Tokens are a technology-agnostic methodology, architecture, & process for scaling design across tools, devices, & platforms — W3C Design Tokens Community
Design Tokens, the Single Source of Truth!
Design tokens are design decisions which store tiny pieces of design information housed in a centralised Single Source of Truth across multiple platforms and products. This concept was created by Salesforce and its name was termed by Jina Anne.
“Roses are #FF0000 and Violets are #0000FF, I don’t sleep at night cause I’m confused of hex — A random Dev”
Design tokens help us get rid of confusing hex code and read design decisions in a much more understandable way, the way it helps decode John Caryl’s lyrics
“Roses are $red and Violets are $blue, I don’t sleep at night cause I’m thinking of you — Chris Carly”
How do Design Tokens Work?
Design tokens use atomic design pattern to store design decisions such as colors, sizes, spacing, animations, borders, typography and all the other design elements into a centralised state in a platform-agnostic way. These tiny pieces of design decisions (atoms) are then combined to create molecules, organisms, templates and pages
Source: Yubi
Remember divide and conquer? The concept behind Atomic design is to break a complex design down to the bare basic atoms till it becomes indivisible.
These token-based components are then converted into themes and brands to power different platforms and products. Various token conversion plugins can be used to convert centralised tokens to platform-supported design elements like css, scss, js, xml etc.
Design Token Conversion Process
Source: Yubi
Now that we have stored all the design decisions in a centralised store, the next step would be to automate this entire process with Design OPS
Yeah, you read it right, Design OPS!
Design OPS
DesignOps refer to the orchestration and optimisation of people, processes, and craft in order to amplify design’s value and impact at scale — Nielsen Norman Group
As we start building more products with much more complex design systems, there is a definite need for the design process and operations to meet the ongoing scale without compromising on design values and principles.
Whenever design tokens are created, we use Figma Token, a Figma-based Design Token Library created by JanSix to convert Design Decision or Token into JSON.
These JSON files are then pushed to the Git repository where it undergoes several token conversion processes and operations to arrive at the final version of brand files and themes.
Source: Yubi
Here at Yubi, we use CDN-based token file loading, to load all design changes on the fly on our production web and mobile application. Above is a high-level design on how we achieved the entire automation.
Now, Let’s look at the same Developer — Designer design sign-off visual again!
Source: Yubi
In Numbers
Note: Numbers are arrived at based on comparing our traditional design process with that of a POC on design tokens
- Reduce the frontend development effort across platform up to 30%;
- Improve the design accuracy in the application up to 90%;
- Reduce the design revamp effort up to 70%;
- Improve the design handoff and sign-off process up to 30%.
Conclusion
Design Tokens + JSON + Git + Jenkins => Magic!
With proper tooling and processes, we’ve not only solved the problems mentioned above, but also helped reduce the frontend development effort up to 40%, by letting the frontend developer focus only on the components and business logic and not on the aesthetics, themes and design representations.
