Design architecture
Thanks to Figma's latest release, we've been able to develop a base for Vade's design. A base of colors, sizes and typography that allows us to build a framework to reinforce our visual identity.
We are now more agile, consistent and efficient in building and maintaining our components.
How does it work ?
Our architecture has three levels. The first, called "the foundation", is dedicated to the base, to all the fundamental elements that will help us build our Design System. These elements are simply a list of variables that will be used later, such as all our colors or scaling variables.
Then, our second level corresponds to the aliases: the foundation variables that will be applied to a "context" to create semantic variables that will only be used in specific cases.
And last but not least, these same colors, assigned to a context, are assigned again but this time to a component. It is a question of framing the design so that it always remains the same, while being able to modify it quickly if necessary.
Concrete case
We want to create a layer system for our interface background colors. To do this, we'll pick one of the color such as "light-100" from our foundation and then, assign it a context which we will call "layer-1". Based on this principle, when we design our interfaces, we'll go straight to the "layer-1" variable for our backgrounds, which allows us to avoid errors or misuse of the variables.
Working in this way has several advantages: firstly, it allows us to be consistent in our design, with no possible errors, since we've defined that layer-1 must be used as the background color. Finally, it allows us to associate a version with the dark mode - which means we can remain constant in our prototype design, whatever the preview.
Following these principles makes it easier to maintain our design system. Thus, if we want to change the color of one of our backgrounds, all we have to do is assign a new color from our foundation to the background layer in question. Once the change has been made, the modifications will apply to all elements and protoype using this color.
Last but not least, those sementic element will finally be used to build our component.
