Building a
Scalable Design System
AREA
Design System
responsibilities
- Delivery of the Design System
- Project documentation
- Work with developers
year
2023-2024
Tools
Figma, Storybook
Challenges
In the complex scenario of digital product development, ensuring consistency and efficiency in delivery is crucial. To tackle this challenge and start your product off on the right foot, ZeroZ has chosen to create a comprehensive Design System.
🏁
Start from absolute zero
ZeroZ was in its early stages of creation, at the beginning of developing its product for monitoring solutions.
👨🏻💻
Ensure quality and usability
Not only provide a visually appealing experience, but also have an accessible and user-friendly Design System.
🎨
Visual identity for the product
Establish a visual identity for the Design System, with a special focus on scalability for a white label model.
📝
Documentation for consistency
Create comprehensive documentation to enable future teams to use the library consistently and error-free.
Results
28
color styles created to bring life and harmony to the system
+40
components developed for the Design System library
152
primitive tokens to ensure scalability and consistency
Tests, drafts, and a lot of exploration
We work through references, research, and sketches, conducting color tests to ensure functionality and accessibility.
We also analyze the components to ensure harmony within the library, all of this to apply quality and consistency in design.
Tokens as the foundation of the entire project
The essential basis of the design system lies in the tokens, which serve as basic building blocks. These tokens start with the primitives, which are essentially the base values.
The primitive tokens are used to feed the semantic tokens. In this way, the semantic tokens play the role of feeding the Design System components, providing meaning and consistency.
See next to how the tokens work, forming the basis of the system, facilitating the creation and maintenance of the components over time.
Figma components library
Each component created in Figma has been carefully developed with a focus on scalability and fidelity, including detailed considerations for states, variations, and individual types.
The library has been designed in a simple and practical way, reflecting the central idea of being easily accessible and usable by anyone.
Accessibility in components
All components have been designed to be accessible through the keyboard, using the focus mode of CSS itself.
The colors have been carefully chosen to ensure they meet the minimum contrast criteria in all usage scenarios. For example, text follows a contrast ratio between foreground and background of at least 4.5:1 (AA).
In addition, the size of interactive areas, whether by click or touch, has been set to be at least 24x24 pixels in spacing (AA), promoting a streamlined user experience.
Building flexible components with 'slots'
By employing 'slot components' in all elements that can and should be replaced, such as tables and columns, we ensure that it is not necessary to resort to the common 'detach' in the components.
This approach preserves fidelity in all instances, providing flexibility in the replacement process, without compromising the integrity of the elements.
Aiming for scalability
The Design System was built to integrate and adapt to various themes and modes. Initially, the light and dark modes were developed as standard configurations, but they can be easily customized.
As for the theme, the project was structured to support future expansions, such as the introduction of a new brand.
This flexibility becomes particularly valuable for ZeroZ, anticipating possible growth scenarios, including the transition to a whitelabel model. This ensures efficient adaptability and prepares the system for evolutions in the brand's identity.
Components ready for prototypes
All components were prototyped with built-in animations in their states.
With this initial setup, creating high-fidelity prototypes becomes easier and more agile, as the foundation is ready, contributing to speed and efficiency in development.
Complete documentation for developers and designers
It is crucial to recognize that, to establish an efficient organization, documentation plays a fundamental role. Without it, all the effort invested in creating the Design System can be compromised.
In this sense, all components and tokens have been added in Figma and also in Storybook, including their variations, types, states, and other specifications. This measure not only preserves the integrity of the Design System, but also provides a comprehensive reference for the team, ensuring consistency and full understanding of each element.
Templates
as patterns
Specific templates were created to speed up the construction of applications and serve as consistent standards.
They encompass examples of pages, layouts, empty states, and more, providing a consistent and efficient foundation.
Retrospective
Building a Design System, the "product" of the product, is not easy at all and requires a lot of collaboration, between design and code and among people.
Certainly, this was the project to which I dedicated myself the most to learn and understand about the development area. This is extremely important for me to be able to continue working at a high level.
As next steps, I will continue to be committed to ensuring the correct implementation of the components. I will also continue to work together with the development team to further improve the project documentation.
Other projects
Check it out too
Let's talk 🙃
If you want to talk about a potential project or just say hi, send me an email.
© 2024 · Augusto Metz