Humans tend to be uneasy with chaos and change. And having well-documented Systems standardizes decisions while bringing order.
You might be thinking… “Quite an agnostic point to start with!” Indeed it is. But, systems are used daily — shopping shelves, transportation, etc. Adding that to the exponential growth of the digital world, Design is more relevant than ever. The demand for meaningful experiences and well-crafted products puts pressure on designers across the globe.
And that's why Design Systems are part of our core strategy to build top-digital products. They work as a framework with a high impact on increasing the consistency and speed of software development. Let's see why and how Pixelmatters uses it.
What’s a Design System?
A Design System is a language created for digital products that support all teams to build consistent experiences throughout — a collection of rules, principles, constraints, and best practices. A system is a framework, a rule book that defines how everything will work together.
Define a plan and document it upfront
Planning and documenting are underrated steps in creating Design Systems. A living document that evangelizes designers is easily shareable and constantly evolving. It also allows us to set the mote and rules while being aligned with principles:
- Robust: All design elements should contemplate different states, edge cases, and possible variations to be applied;
- Accessible: Design for everyone. All design elements must perform against good accessibility practices (e.g., enough contrast is a must, WCAG guidelines...).
- Flexible: All design elements should be flexible to scale for different situations or design patterns.
Based on that, we understood how we could build the foundations and components of our smart Design System prepared to make top-digital products:
- Design Tokens are the visual design atoms of the design system — the smallest pieces. These design variables describe color, grid, spacing, typography, radius, shadows, etc. These tokens aim to reflect the core elements that impact the whole design and define the rules from which the project should live.
- Foundations are the lowest level of a Design System — composed of Design Tokens, and they should always be followed when designing the project.
- Components consist of atoms put together that create molecules, organisms, and pages. If we combine an icon with text, we might create a tab. Aggregating tabs on the background make a bottom navigation component. Components are the bulk of our Design System, generally composed of Buttons, Inputs, Cards, Navigation, etc.
Why do Pixelmatters need a Design System?
Quality above all. Committing to a Design System process increases consistency, speed, and efficiency, thus creating excellent products and experiences.
It's not just for designers! Engineering Teams are also impacted positively by it — they don't have to repeatedly build specific code for each component, state, or page. When a decision is made to change a specific part of the design system, it will directly impact all the subsequent elements.
As a Digital Product Studio, Pixelmatters has different projects with specific challenges and business areas. While Design Systems allow us to follow consistency and accessibility, it provides us with enough means to customize and create distinguishable yet reliable products.
How do Pixelmatters use it?
When we switched from Sketch to Figma, it was also the perfect timing to revamp our Design System Template. It follows a simple, ready-to-iterate file that guides us through Tokens, Components, and “Glue” — all meaningful rules for the Engineering Team.
All states are specified and categorized on the file, living side-by-side with components. Imagine a simple button with a flexible width (24px padding) and a fixed height. The most relevant information immediately increases the alignment with the Engineering Team and the product’s consistency.
While revamping our Design System Template, we also created supporting documentation on Notion for the template itself. Besides ensuring every detail can be accessed and seen on the Design System Template, this documentation gathers precise information on how Pixelmatters specifies each component.
Imagine a checkbox. A button. Or a dropdown. On Notion, we can see all its different states, a short description, and even examples. All helpful information focused on scalability.
Creating and implementing, and using this Template has been a game-changer. And to take the motto “Sharing is caring” to the next level, we recently created a Goodies page where anyone… Yes, anyone can access a selection of our homemade Pixelmatters files. Take a look at our Design System Template and start using it in your projects.
Design a system that works for you
Having a set of well-documented principles and rules brings order to chaos and consistency over artistry. And there’s no right or wrong way to craft a Design System. It takes time, effort, and context. It may seem counterproductive, but it enhances creativity, scalability, and togetherness given enough time, all of which you should consider when working on a Design System that works for you and your project.
