Maia was crafted as a highly customisable SaaS solution, empowering clients to tailor the product to their unique requirements. Unlike conventional SaaS offerings, our approach involves close collaboration between clients and our design team, ensuring that the product aligns seamlessly with their users' needs. This necessitates a design and development process that is agile and adaptable, allowing for swift adjustments to branding elements such as logos, colors, typography & spacing.
‍
Like many products, Maia was initially constructed with basic styles for various functions. The common problem with styles - when I need to change only the color of certain text layers, I need to select layers individually across the screen. This process was not only time-consuming but also prone to human errors, particularly when managing designs across multiple files. The need for quick, error-free changes led to the implementation of a token-based design system.

They help save time and effort when building designs, managing design systems, and creating complex prototyping flows.


With Figma's variable update, we have the capability to store reusable values such as color codes or numerical values, which can be applied to various design properties. I initiated this process by starting with color values.

I used number scale to establish a clear hierarchy for various shades or tints of a single color. This simplified the understanding of colour relationships and enhanced design consistency.

I created a new collection of variables with semantic names to express the function or intent of design elements. This facilitated easier usage and understanding of variables within the design system. This is particularly beneficial when dealing with various shades or tints of a single colour. The numbers represent the intensity or value of the color, clarifying the relationship between different shades.

Semantic naming anticipates potential changes in design or branding direction. Tokens named according to their role are more adaptable to shifts in color schemes, branding updates, or design trends. This foresight ensures that the design system remains flexible and responsive to evolving needs and preferences.

Then, I started with adding number variables for spacing and radii values based on an eight-point grid system. This ensured consistent spacing and radii throughout the design, enhancing visual harmony. I then created tokens that reference the primitive values.

MAIA uses  an eight-point grid system, so, variables based on multipliers of 8.
T-shirt sizing for radii simplifies the categorisation and organisation of design elements based on complexity, enabling the creation and maintenance of a consistent and scalable design language across various projects.

The implementation of the token-based design system not only streamlined Maia's design and development process but also facilitated unprecedented levels of customisation. With variables and swap design system feature, UI adjustments was made quicker than ever, saving significant time and effort. During demos and presentations, I could effortlessly pull up a screen, make adjustments, or co-design a screen in a call, and showcase it to clients in their own style. This holistic visualisation provided clients with a clear understanding of how their unique brand identity would be reflected in the user experience.