A Design System unites product teams around a
common visual language. It acts as a living system of guidelines and a source of truth, including rules about how to use, design and code design assets.
“Design systems bring order and consistency to digital products. They help to protect the brand, elevate the user experience, and increase the speed and efficiency of how we design and build products.”
In this first phase, we will review existing designs and codebases.
We will identify inconsistencies and understand team workflows and pain points.
Here, we will establish important design decisions like colors, typography, spacing, grid, shadows, etc. We will also set accessibility standards and responsive behavior rules, and align on tone and visual language.
Based on Foundations, we will create create reusable components like buttons, inputs, cards, etc.). We will ensure flexibility and scalability of each component and make them easily usable by your team. We will combined them to create more complex components until defining full design templates.
Building a living documentation site (e.g., in Figma, Zeroheight, Notion or Figmayo) will be crucial to create adoption. This will include usage guidelines, do’s/don’ts, and code snippets if needed. This will make it easy for both designers and developers to adopt your system.
A design system is a living product and needs to be shared and loved by your team. We will help you get adoption and train you in order to give you the necessary knowledge and tools to own you system
A design system always starts with a Figma Library. We developed a design system starter kit called Core that is constantly evolving and where we put all our past experiences with design system best practices and including the last Figma features.