Tokenization Process and Unification of Plasma UI Versions

Context

The scenario we encountered when we started structuring the design system team was a library of coded components used in a suite of products (PLASMA V2). This library had the issue of not being designed for this purpose, as the components were not reusable. Additionally, there was a second library (PLASMA V3), which is an evolution of the first one and already had a structure more similar to an actual design system. However, it had some problems, such as the significant differences between the coded component library and the Figma library, as well as the size progression system of the components, which was organized as a theme for the components. This meant that all components had to have 3 sizes and could not be used in mixed sizes.

Challenge

The challenge in this scenario was, first and foremost, to organize the second library so that our components were fully mapped and represented in Figma. This process was completed recently, in mid-2024, and since then, we have been working on several initiatives to improve the design system. The first initiative is the process of converting the older library, PLASMA V2, to PLASMA V3, considering that the visual differences between them are minimal. The second initiative is the structuring of a token system that we aim to implement in the library, already including the 3 size themes. Finally, the third initiative is the development of documentation, covering both components and system patterns.