Project

At Duvify I had to audit, design and maintain the Design System. We named it Buildfy (making a play with the name of the brand and the objective of its creation).

It was carried out in 6 stages

Meeting with the team:
Compilation of the elements already implemented in the existing platforms (typography, colors, components, spacing, etc). After making an inventory we chose the Fundations and tokens that would remain or would be prepared for a slight redesign.

Define the Fundation:
From the inventory made in the previous stage, certain things were adapted to the concepts that the brand wanted to transmit. We also adjusted the typographies due to legibility problems, adjusted the colors to comply with basic accessibility standards (AA) and created other elements in the foundation that were not defined. Such as elevations, spacing, border radius, lines, margins, among others. All these were documented in Figma and Notion in parallel.

Definition of Design Tokens:
For this stage we started to transfer the foundations to tokens in figma and as styles so that they would be available to developers if they accessed the figma files. In this sense the tokens were named in different folders and a clear and specific nomenclature was defined to avoid implementation errors.

Component token creation:
Once the variables and styles were defined with the creation of the design tokens. The creation of the first components begins. We started with buttons, inputs, basic controls, tables, cards, etc. that were the most used elements. Each component was documented in Figma and notion with a brief description, use cases, best practices, variables, states, etc.

Documentation and Handoff
The most important thing about the documentation is that it is clear for the developers. At the end of the Design System I had a meeting with the development team to explain where the documentation was going to be found in Figma and how it was going to be published in the corresponding files.

Export the tokens in JSON version
In this last stage all the tokens and styles were selected and exported with the help of the Figma plugin tokens studio for Figma.