Design System Fundamentals

Design systems create a bridge between designers and developers. They describe the rules, constraints, and principles of your company’s design language. Design systems aren’t exactly new. If you’ve ever visited New York City, there’s a good chance you’ve benefited from the subway design system to navigate around—officially named the New York Transit Authority graphic standards manual, designed by the infamous Massimo Vignelli. Design systems don’t just provide brand guidelines, they provide a way to consistently implement functional design. In today’s incarnation of design systems, it’s expected that they provide one source of truth for code, along with documentation and design resources. For teams building digital products, design systems can improve workflow efficiency and enable teams to deliver a better experience to customers. With so many examples of design systems out there, it can be hard to know where to start or know what is right for your company. If you work on digital products, even if you don’t work on design systems, taking a systems thinking approach to design and UI development can help you build a good foundation for team collaboration and scaling your product.

1. Picking pilot projects

   Once you’ve started building and designing your system, it’s important to test all the parts before shipping your first release. Pilots are a good way to test if you’ve met the goals of your design system, such as making it easier for developers to implement designs, and providing a unified design language. Using a set of criteria to determine a project’s potential will help you find great pilot candidates.

2. Everything is a component

   Thinking in components helps you to see every part of the UI as an interoperable system. Design systems should be highly composable, providing many small reusable components that can be mixed and matched and used together to create new components.

3. Designing your design system

   It can be daunting to know where to begin with designing your design system, and who you should collaborate with to design it. Typography, spacing, and color each have their own rules and constraints, and every piece should be designed to work in harmony with other parts of the system. Breaking the work down into small manageable chunks will help you find the right model and add the right pieces and be on your way to creating a successful design system.

4. When and how much?

   It takes time and resources to build and maintain design systems. When your team is small, investing in design systems might seem like a luxury you can’t afford. Many companies don’t dedicate full time resources until they start feeling the pains of not having one. When you do start working on design systems, it can be difficult to figure out what to prioritize and how to time to spend on them.

5. What are design systems, really?

   You may have heard of terms such as style guides, pattern libraries, design languages, and components. There are tons of terms and definitions being thrown around which makes it difficult for everyone to come to the same understanding about what design systems are, and what problems they solve. Understanding what they are, or should be in the context of your company is important to establish early on.