Design System Tokens

*This project is in progress

‍

We had several issues in our current project that we needed to solve, to name a few:

• The design system has more than 340 components and 140 styles, so changes in the semantic use of a style meant that UI designers had to update the design system manually.
• Communication between design and dev teams is complicated since the devs are from different companies.
• The client is interested in implementing a dark mode in the near future.

‍

To solve these challenges, we decided to implement design tokens in our Figma file. I led a small team of two UI designers and a developer, and we started researching what would be the best approach for this project. Since it is a medium design system, we defined a plan with stages.

First, we tried several Figma plugins like Token Studio, but finally decided to use the native Figma Variables so we could have a better long-term support.

After that, we defined the nomenclature that would be the best approach for our system.

‍

‍

‍

Once we had the naming and organization defined, we started to create and document all the tokens our system needed in a Figma branch. This stage had several iterations because as we started documenting, we came across more complex usages of styles, pushing us to redefine our token organization.

‍

‍

‍

After we had all our tokens documented, we started applying them into our components.

We have already applied all our tokens into the design system file, and we have started to apply them into our templates.