Methodology and work process

The project began with an audit of existing products to detect visual inconsistencies, duplications, and common team needs. Based on this analysis, we defined a roadmap focused on creating a robust and scalable system. We worked iteratively: first, we defined the token architecture (colors, typography, spacing) as a flexible foundation that was easy to update and extend. Then we built key components in Figma, documenting them with usage guidelines and best practices. In parallel, we developed the same components in code, ensuring design and development worked in sync. This allowed us to validate that tokens and components worked consistently in real environments, reducing errors and accelerating adoption.

Project challenges

Creating a customizable and scalable token architecture

One of the biggest challenges was creating a solid foundation of design tokens that could adapt to the company’s different products without losing consistency. Teams needed flexibility to customize elements such as colors, typography, or spacing, but at the same time it was crucial to maintain a common structure that enabled scalability.

We defined a clear, hierarchical architecture with reusable base tokens that could be modified depending on each product’s needs. In addition, we worked closely with development teams to ensure the code implementation reflected exactly what was designed in Figma. This structure made the system easy to maintain and prepared the team for future evolutions.

Image of Creating a customizable and scalable token architecture

Aligning design and development

Another major challenge was aligning design and development deliverables into a shared language. In the past, each team worked with different criteria, generating inconsistencies and rework.

To solve this, we created shared libraries in Figma and synchronized them with the components developed in code. This ensured both sides worked on the same foundation, with identical components and well-documented behavior rules. This integration prevented divergences and allowed designers to deliver complete flows with the confidence they would be faithfully replicated in production.

Image of Aligning design and development

Making designers’ work easier

Finally, one of the biggest challenges was securing the resources needed to dedicate full-time work to the project. At first, the design system was seen as an “extra” rather than a strategic investment.

We prepared a business case showing real inconsistencies between products, duplicated efforts, and examples of how a unified system could save time and money. We also presented a functional prototype that illustrated the impact on speed and quality. Thanks to this work, we gained leadership support and the budget to continue developing and scaling the design system.

Image of Making designers’ work easier

Securing budget to work on the project

Finally, one of the biggest challenges was securing the resources needed to dedicate full-time work to the project.

At first, the design system was seen as an “extra” rather than a strategic investment.

We prepared a business case showing real inconsistencies between products, duplicated efforts, and examples of how a unified system could save time and money. We also presented a functional prototype that illustrated the impact on speed and quality.

Thanks to this work, we gained leadership support and the budget to continue developing and scaling the design system.

Other projects

Preview of the project Bayn

Bayn

View project