Design System: Creation, Maintenance, Tokenisation
The Beginning
From Translation to Innovation
Four years ago, I embarked on what would become a transformative journey - not just for the FinTech enterprise I was working with, but for my own professional evolution. The task seemed straightforward: translate an existing design system library to a new brand look and feel. What I didn't anticipate was how this project would push me to master new tools, navigate complex stakeholder relationships, and ultimately pioneer innovative solutions that would save the company hundreds of thousands of dollars.
Stage 1: Foundation
Building from Scratch in Sketch
Working with Sketch for the first time while creating structured component sets was intimidating. The miscommunications between PMs, developers, stakeholders, and the design team felt overwhelming. But these challenges became the foundation of my expertise. Each obstacle taught me something new about design systems, team collaboration, and the importance of clear documentation. Despite being time-consuming and my first experience with structured design systems, we successfully created the foundation.
Stage 2: Migration
The Figma Revolution
The transition from Sketch to Figma wasn't just a tool change - it was an opportunity to rebuild better. Teaching team members who had no Figma experience while establishing proper hierarchy taught me the value of mentorship and systematic thinking. Creating 50+ components with 400+ properties felt like building a digital language that would enable countless future innovations. The migration allowed us to start building awesome prototypes with micro interactions out of the box.
Stage 4: Tokenization
The Token Revolution
When business leaders decided on a visual refresh requiring tokenization, I stepped up despite having no prior token experience. Learning primitives, semantic tokens, and component tokens while analyzing best-in-class libraries like Atlassian's was exhilarating. Creating over 400 tokens and refactoring components according to current Figma trends transformed our design system. The rapid tokenization process enabled the business to present new designs to clients, resulting in new client signings and increased revenues.
Stage 5: AI Innovation
The $400k Breakthrough
Facing 9-12 month development estimates, my proactive nature and dream of bridging Figma and code led me to create an AI-powered Figma plugin. Using Gemini 2.5 Pro in Roo Code, I generated pixel-perfect, tokenized React components automatically. The shock and excitement of stakeholders and the CEO when seeing the results was one of the most rewarding moments of my career. This innovation created a fully-functional, production-ready design library based on Radix UI, switching my paradigm from just designing to designing and coding.
The Impact
$400k+ Cost Savings Through Innovation
The journey from a simple translation task to pioneering AI-assisted design-to-code workflows demonstrates the power of proactive thinking and continuous learning. By switching paradigms from just designing the library to designing and coding it, we've integrated more deeply into the development stage. The client has estimated over $400k in savings, which represents a huge win during cost-optimization periods. Currently, we're using best-in-class approaches, linking the DS library with CodeConnect, and exploring Figma MCP possibilities for the future.