Overview
We have a lot of projects at Bitkub, and every time we start a new one, we create a new design system. As a result, it consumes too many resources, causing inconsistency with other projects because they are not created by the same designer or developer. So I’m starting to lead a design token and establish a corporate design system.
Challenge
- We have a number of projects with inconsistent design.
- There is no corporate design system in place.
- The new design system and design token should be compatible with existing products in order to be implemented.
- Each project uses a different front-end framework.
- Because we also have Android and iOS, therefore the design token structure is different from the web version.
01 - Research, planning and sharing
I have researched the best practices of design token to try to adapt and create to solve the problem of the product we have. The main issue is that we have many products with diverse designs. So the core concept I think is to make a base design system to apply to all products and make a style of each product to override the base style. One thing to remember is that every designer should use the same token name for components. By using the Tokens Studio plugin, every project in Figma can switch styles across products. Make a session to present design tokens to product design, front-end developers, and mobile developers to share knowledge and make everyone understand the same.
02 - POC with developer
After much research and testing, I have completed the initial draught structure design token for all products. Then I have to explain to the front-end developer and mobile developer to give a design token for proof of the concept. Because the token schema on Android and iOS differs from that on the web, we have some challenges. As a result, we developed a tool for converting a design token file to be compatible with a mobile operating system.
The result - Base design system
This is the design token that we have. The first is that every component in each product must use the same token name on the component and properties. For example, this is our base design system to use in the back office or for product that we don’t have individual styles.
The result - Product design system
For other products that have an individual style, We override a base theme with a design token to apply a product style. As a result, We can easy to change a theme by applying a product style. For example, a Front-end developer can change the theme from Bitkub NEXT to Bitkub NFT just change 1 line of code.
Bitkub NEXT
Bitkub NFT
What did I learn
I have learned a lot about the structure and design for each mobile operation system such as how to create a design token for any mobile screen size, and mobile native color. Understand the limit and design token schema of each platform.