Design System
A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.
Our template is based on Tailwind, which means that the name of styles and the components are defined as they are in Tailwind, and whenever we don’t define something, devs will apply the default styling of Tailwind framework.
What will you find in this template?
- Style definitions that can be easily changed
- The most used components and the states that we need to define
- Some tips in the doc
How to use it
Base grid: By default, the base grid is 4px or 8px. (How to update nudge in Figma). If your design requires a different grid base, please specify the spacing in the Grids & Spacing tab of the template and notify the developers.
- Duplicate the Figma file into the project folder that you will work
- Export the library so you can use it in different files
- Import in your design files
- Update styles
- Update components. Some of the components have a “.base” component. This component is not published in the library because it has a dot before the name. We only use it to make the edition of paddings across multiple variables easier.
FAQ’s
When should I start working on the Design system?
This is up to you. Each designer has their process. From our experience, we should only move to building this when you have made some explorations and have a more clear idea of the styles.
Will my designs all look the same?
That’s up to you, not to the template and the design system. This is only a tool to help you and guide you, and the intention is not to limit your designs but to help improve the workflow so you can spend more time with the important stuff.
Why do we need it?
- Scalability It will allow the team to create new designs using pre-made components and elements quicker.
- Focus It will allow the team to focus more on problem-solving and on flows than creating visual elements.
- Organization For design team and for frontend developers
- Consistency By using design systems with all the components defined it will be easier to keep consistency across designs
What should be there?
- Frontend guidelines. Components and ui elements
- Content guidelines (if applicable). Ton of voice and language recommendations
- Branding guidelines. Typography, colors, logos
- Animations. Specify time and type of animations