To create a Design System to be used when starting new projects for companies that may not have one in place or is incomplete. This way we can accelerate the process of delivering concepts and also define best practice guidelines when creating the styles and components, so designers can learn how they should build their own.
To have a robust but flexible design system that can adapt to different projects, with little changes to be used rapidly by the team involved in the project.
Multiple people have been involved in this initiative; 5 designers, collaborated in different stages of the process. We also meet with 2 front-end engineers, to align on how we are going to collaborate, as they will be coding the components.
As someone who had experience building design systems I took the responsibility to lead this project.
The files are divided into folders, having WIP and Released to show which ones are completed and ready to use
In order to have successfulreleases and align with the team, we started by:
We used Trello to create a Kanban to help us bring clarity of priority, what to work on next and what needed to be reviewed
Design tokens are the values needed to build a design system, like color, typography, spacing, etc. That's why we created folders for the tokens, separated from the components, which are the reusable blocks of the design system.
We also took the atomic design methodology, that's why we started with the atoms, which are the basic building blocks.
To create the colors, I defined a rule to be able to have the different states we needed for components like the buttons; to generate the hover and focus we use 20% black opacity increments for the light theme and 20% white opacity increments for the dark theme.
Then when the brand colors of a new client are used, we ensure that the states pass the contrast accessibility test.
The same way the grey colors were defined, by adding increments of 10% black opacity over white color.
We took Material Design type system as a starting point and then, modified it when tested with the typeface and in different scenarios.
The different states of the button are represented below. Three types of buttons are available; primary, secondary, and tertiary.
Also with the latest Figma update, we were able to reduce the number of variants, defining attributes like the icons on the left and the right as booleans, instead of having to create different variants for each case.
Four different types of cards were defined, that could fit different usage cases: event card, product card, social media post card, and profile card. The cards were built as light and dark themes, then vertical and horizontal to fit as many different use cases as possible.
More than building the design system, the most crucial, time-consuming part is been how deciding how to proceed at each step, define processes and reach consensus.
Isaac Vigil © 2023