Building a Design System: What, How, and Why?

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:

  1. Robust: All design elements should contemplate different states, edge cases, and possible variations to be applied;
  2. Accessible: Design for everyone. All design elements must perform against good accessibility practices (e.g., enough contrast is a must, WCAG guidelines...).
  3. 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:

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.

Claudio Santos
Product Designer