Increasing product development efficiency by 59% with a scalable design system
Design system
UI Design
UX Design
Junior UX/UI Designer
Junior UX/UI Designer
Senior UX/UI Designer
Figma
Atomic design
Stark
When I took responsibility for our Design System In Figma, I found that, despite its potential, it was fragmented and underutilized. The components were packed together on a single page, without a clear structure or a semantic guide to indicate when or how to use them. The developers saw it more as a visual moodboard than as a source of truth from which clean code could be extracted; the Primary button, for example, it only reached a 60% adoption in new projects. Worse yet, almost all the screens failed to comply with the WCAG AA contrast, jeopardizing the accessibility of our platform and delaying development cycles every time someone reinvented the wheel.
For three intense months (January to March 2025), I led this transformation as Owner of the Design System, accompanied by three designers UX/UI And three developers key, who became not only implementers, but also allies of this evolution.
As we delve into the archive of Figma, we realized that each component told a different story. There was no common language: some styles used opaque greys, others showed greens too bright for an alert, and typefaces danced between sizes without one Defined scale. I decided then that our color palette and our typography should speak the same language: a clear, predictable and accessible one.
First, we plot in FigJam a map of primitive tokens:”GREY/20” was the faintest gray,”GREEN/60” our successful tone. Then, we assign a role to each one using semantic tokens — for example, background-button-primary O text-secondary— so that, when touching code, any developer would instantly know the purpose of each variable.
We also designed a new color scale that would ensure minimum AA contrast according to the WCAG standard, applying semantic variables at each brightness level to cover all use cases.
At the same time, we established a typographic scale based on a mathematical progression (Ratio 1.309 About 16 px), defining from Heading-XL Until Body-sm, with line-height And Kerning careful people who restored harmony to each screen.
First, we analyze accessibility of the existing button, measuring its contrast ratio in all states and detecting that it did not meet the WCAG AA minimum.
Based on this diagnosis, we implemented the new definition of Primary-button-background as the main background, ensuring that this color met AA minimum contrast standards in each application.
Next, We apply the new definitions of tokens—so much of Fill How of Stroke—to the different types of buttons: Primary, Secondary And tertiary. For each type, we detail specific parameters in the four component states: Default, Hover, Focus And Disabled, thus ensuring a coherent, accessible and easily implementable experience in the development environment.
This case of refactoring the button is just one example of our work: in total, we addressed approximately 20 additional components, including information cards, entry forms, drop-down menus and switches, each applying the same methodology of accessibility analysis, definition of tokens of Fill And Stroke, and standardization of states Default, Hover, Focus And Disabled to ensure consistency, accessibility and ease of implementation throughout the system.
Instead of dropping a change package and disappearing, I organized one-on-one meetings with each developer. I shared with them the “why” behind each token, let's give us time to explore together the Dev Mode, answer questions and listen to their suggestions. Small improvements emerged from that dialog: an adjustment to the opacity of a gray for a border, an additional variable for an alert state. Each contribution was integrated, focusing the team on a shared mission.
To formalize the pace of growth, we appointed a single responsible person —member of the design team—who would review and prioritize requests for new components or modifications, evaluating the impact depending on how many screens they use them and the complexity of implementing them. In this way, the system ceased to be a living and chaotic entity to become an organism governed by clear criteria.
One month after deploying the new Design System, the Lead Developer He told me: “The implementation times of a new module have fallen by 20%. We no longer have to guess what color corresponds to an error state or remake buttons by hand.” With data in hand, we calculated savings of 190 hours per year — an increase of 59% in efficiency— and an economic impact equivalent to $56 000 USD.But the real value was in the team atmosphere: seeing designers and developers speaking the same language, solving doubts in Slack with token references, and celebrating each new component adopted. I learned that a good Design System does not impose itself: it is co-created, nourished by contributions and, above all, it is defended with narrative.
By redesigning the user experience of an event registration flow, we achieved 18.35% conversion and 25.97% of new accounts.
Democratizing physical and mental well-being with a digital platform that reinforces brand trust and reduces conversion time by 33%.
Digital solution based on Job to be Done insights, built on a solid and proactive UX process to dynamically meet the needs of users.
