Overview
Bitkub had many products, and every new project started its own design system. That wasted a lot of effort and made products inconsistent with each other, because they were built by different designers and developers.
So I led the work on design tokens and a company-wide design system.
Challenge
- Many products, each with an inconsistent design.
- No company-wide design system.
- The new system had to work with existing products, or nobody would adopt it.
- Each project used a different front-end framework.
- Android and iOS needed a different token structure from the web.
01 - Research, plan and share
I researched best practices for design tokens and adapted them to our situation.
The core problem was many products with very different designs. So the idea was a base design system for every product, with a style layer for each product that overrides the base.
The rule that made it work: every designer uses the same token names on components. With the Tokens Studio plugin, any Figma file could then switch between product styles.
I ran sessions for product designers, front-end developers and mobile developers so everyone shared the same understanding.
02 - Proof of concept with developers
After a lot of research and testing, I finished a first draft of the token structure for all products and worked with front-end and mobile developers on a proof of concept.
Because Android and iOS use a different token schema from the web, we hit some problems. We solved them by building a tool that converts our token file into formats the mobile platforms can use.
The result: a base design system
Every component in every product uses the same token names for its components and properties.
The base design system is used as it is for the back office and for any product without its own style.
The result: product design systems
Products with their own style override the base theme with their own tokens.
That makes changing themes easy. For example, a front-end developer can switch a product from the Bitkub NEXT theme to the Bitkub NFT theme by changing one line of code.
Bitkub NEXT
Bitkub NFT
What I learned
I learned a lot about how each mobile platform is structured: how to build tokens that work across mobile screen sizes, how native colours work, and the limits and token schema of each platform.
