I have been using design systems throughout my career, but it wasn’t until I joined a startup as a founding product designer that I had to fully embrace their importance and how they’re made. If you want to read about my journey building a design system from 0 to 1, click here.
I’m currently working at Intuit on the Intuit Design System, which caters to 12 teams and four cornerstone products: Mailchimp, QuickBooks, Credit Karma, and Turbotax. Because our system serves so many products and, in return, customers, it‘s full of complexities and intricacies. Even with my experience, I’m constantly on my toes, learning new things and returning to the basics of design systems and how they operate.
We also just brought on design and engineering interns who have the unique opportunity of working on our team throughout the summer. Working with them has helped me to think about how someone might get started in the world of design systems. It’s been so long since I first dove into working on my first one, but I remember it being daunting and intimidating. Hopefully, my advice makes it a simple and familiar experience for those starting their journey. 
ONE — Understand Atomic Design
Atomic design is a methodology for creating design systems developed by Brad Frost, a designer and web developer. He conceived the concept after observing the need for a more systematic and modular approach to design as web-based projects grew increasingly complex and diverse.
Atomic design by Brad Frost
In a nutshell, it breaks down systems into scientific terms that reflect the composition of matter.
Atoms — foundational elements at the core of design like typography, colour, and spacing.
Molecules — components such as buttons, checkboxes, switches, etc. They are composed of Atoms.
Organisms — patterns such as modals, Towsers, Card layouts, etc. Patterns can exist at different levels of abstraction within a design system, ranging from individual UI elements to entire layouts. They are composed of components (molecules).
We then move away from the matter references and into more obvious web design terminology but still following the structure.
Templates — Foundational structures for organizing and arranging various components and patterns to create consistent and cohesive layouts across different pages.
Pages — Represent specific examples of how components, patterns, and templates come together to form actual interfaces. They serve as manifestations of a design system’s principles, guidelines, and patterns, showcasing how various elements interact to fulfill specific user tasks or goals.
Atomic design is at the heart of virtually every design system, and understanding the basic anatomy of design systems is step one. The concept is simple yet highly effective in building scalable and efficient systems.
TWO — Know Your Products and Customers
Some say design systems are products. I believe they’re so much more complex than that, but I understand where this notion comes from. Like products, design systems serve customers who have needs, wants, and pain points. The design system’s job is to address these by delivering tools and experiences that satisfy customer needs. Whether the goal may be to make workflows faster, produce delightful UI, or reduce tech debt, you need to treat it like you would building any other product and apply data and design driven methodologies.
Being both customer and data-driven in your approach to design systems will help immensely in selling its value to stakeholders and higher-ups. Often, part of undertaking a design system is to get buy-in and investment, and the best way to do this is by presenting customer insights and data to back up your rationale.
Double Diamond Design Process
Building design systems goes far beyond creating components and patterns. Design systems are not UI kits and contain many elements, from documentation, tokens, principals, accessibility, contribution models, and tooling, to name a few. All of these require dedicated attention and thorough implementation. The double-diamond design process works beautifully here. Let’s walkthrough how we might apply this to building a design system.
Discover
We need to start by discovering the current gaps and problems through user research and reviewing available data. Let’s begin by talking with developers to understand their experience implementing UI through the deliverables designers gave them. Then, we’ll move to interviewing designers to learn how they build UIs in Figma. What’s the biggest gripe they’re having at the moment? Next we could examine the workflow of design handoff and how this process could be improved. We can also review readily available metrics like bugs, customer NPS, and accessibility scores to determine the quality of the current UI.
Define
We then define what we are trying to achieve in the given time and scope of work. Whether it be building a brand new design system MVP within three months or creating a new tokens system, you need to define your aim clearly. Utilizing problem statements will provide a North Star to help you stay aligned with the mission as you move forward. Having a product manager to assist with creating roadmaps, RICE scores, and scrum practices will also really help with staying organized and within scope. If you don’t have product management resources, there’s another hat for you to wear! Just kidding, sometimes a simple roadmap can be all you need.
Develop
When it comes to develop, this is where, as product builders, we do what they do best. Ideating on solutions is a familiar task for many, particularly designers, and it’s certainly something you’ll do when building on a design system. You’ll work with cross-functional partners such as developers, content designers, product managers, and marketing to bring solutions to life.
Deliver
Lastly, when delivering your design system, you’ll need to identify how you’ll track success. What metrics will you need to monitor? How will you follow up with your customers? What contingency plans should you have if things don’t go as planned? An essential aspect of shipping your design system is thinking about how you’ll evolve it. Knowing how to prepare for future features and additions will contribute to building a scalable and living system.
THREE — Learn From The Best
There are tons of excellent examples of design systems that are robust, organized, and work to create beautiful products. It’s important to note that reviewing these systems is great for inspiration, but you should never try to retrofit another design system as your own. As I covered, design systems should be tailored to your unique products and customers, which is why straight-up copying what another product is doing will set you up for failure, as other design systems are tailored to their customer’s needs.
Reviewing popular systems allows you to take note of how the majority operates. It’s tough to gauge what makes that particular design system successful without knowing its goals, success metrics, and customer feedback. However, you can observe how they’re structured and the kind of investments they make. You can review how they document their principles and elements, such as components and patterns. You’ll quickly notice specific standards and what most systems include, such as naming conventions, how they handle particular cases, such as catering to different brands/themes, and how they create culture around their design systems to increase their importance and engagement.
Competitive analysis or Benchmarking
Benchmarking is a powerful tool when building any product or feature, and this is yet another example of using a familiar tool to learn about design systems. You’ll quickly form opinions and be able to draw inspiration as you embark on your journey.
Summary
Diving into the world of design systems doesn’t need to be scary. If you’re a designer or developer, you’ll already have experience building products and working on teams to craft the right solutions to problems, and that also applies here. Going back to basics is the best thing you can do when things get fuzzy or overwhelming. Use methodologies you’re familiar with, like design thinking. Staying customer-driven is at the core of building the right products.
It’s also okay to take it one step at a time. Design systems take time to build and gain traction. All the big design systems had to start from somewhere, and that somewhere was likely small. To get to where they are today required shipping, learning, and iterating.
A bonus point of advice is to lean into design system communities and resources. Many people (like me!) dedicate their careers to design systems and constantly share their knowledge. You’ll find many resources like Slack channels, blogs, forums, and podcasts devoted to design system knowledge and culture. You don’t have to be alone in this journey, even if you’re a one-person show on your design systems team.
