A quick guide on creating a design system
Learn the basics of creating a design system in 6 minutes
I published the design system I created to illustrate concepts in this article. Feel free to use it in your work.
This article consists of 3 parts:
- Understanding design systems (what are they and when to create one)
- Creating a design system (creation process and activities involved)
- Additional considerations (other concepts and references to consider)
*I use the term “product” throughout this article as an umbrella term to describe a website, application, online service, etc.
Understanding design systems
A design system is a unified language that helps a team solve problems consistently. Pieces of a design system can include guiding principles, brand elements, voice and tone guidelines, code standards, and a UI library.
Why create a design system?
A design system unifies product development and helps prevent technical debt. Building a design system might slow you down at first, but it will pay dividends as you scale your team and product.
Benefits of a design system:
- Single source of truth
- Increased consistency
- Cost/time savings
When should you create a design system?
I like to wait until the product and team have had time to develop before creating a design system. However, other people like to start with a design system in place.
There is no right answer, but if you go too long without one, inconsistency and inefficiencies will compound, destroying productivity and morale. If you start to notice this happening, it might be time to get the team together to define a system.
The necessity of collaboration
The best way to gain adoption is through inclusion. Make sure to involve all product stakeholders in the process. Not everyone needs to be an active contributor, but everyone must have a voice.
Design system creation process
Conduct a design audit
- Organize your team to take screenshots of the components of your current product. Make sure to look at all the properties of your product like the help site, internal tools, different apps, etc.
- Use presentation software like Google Slides to organize your screenshots or consider printing out each screenshot and pin them on foam-core boards.
- Review each category to observe inconsistencies and note areas for improvement with your team.
Organize screenshots into categories like:
- Buttons
- Navigation
- Forms
- Tables
- Charts
- Lists
- Cards
- Icons
- Color
- Typography
- Etc.
Taking inventory of your product’s UI often illuminates embarrassing inconsistencies. It is very eye-opening to see how many different button styles and text sizes get implemented over the life of a product.
Define basic design elements
Design elements are the basic building blocks of a user interface. The first step in creating a comprehensive design system is to define its base level elements. These elements combine to determine the components of your product.
Elements to consider including:
- Color
- Typography
- Sizing
- Spacing
- Grids
- etc.
Define design components
Design components are functional pieces of a user interface. Components are created from design elements and come together in various ways to create a composition.
Components to consider including:
- Forms
- Buttons
- Tabs
- Icons
- Alerts
- Etc.
Don’t forget to include different states of each component. For example, what does an input look like when a user clicks/taps into it?
Define views (screens, pages, compositions)
After you define your design elements and components, you can combine them to create views.
Examples:
- Dashboard
- Signup forms
- Overviews
- Details
- Etc.
Include design patterns
Design patterns consist of common user flows and interactions.
Examples include:
- Filtering
- Creation flow
- Progressive disclosure
- Continuous scrolling
- Onboarding walkthroughs
- Etc.
Create documentation
As you build your design system, it is essential to document your thinking and best practices for elements, components, views, and patterns. Documentation can also include your guiding principles and code snippets.
Pieces to consider including:
- The rationale behind design choices
- Implementation guidelines
- Dos and don’t
- Code snippets
Additional considerations and references
Great design systems evolve
Your design system must adapt and evolve with your product and team. Think of it as a living organism. It will never be perfect, its always growing, and it needs love.
Eventually, you might need to dedicate a team to it
If your company grows big enough, it might be necessary to dedicate a team to its maintenance and further development.
At first, the design system is maintained by a few individuals on a part-time basis. Later, someone is assigned to it full-time. Eventually, a whole team consisting of designers, engineers, and product managers own it.
When your company is small — like a few people small — your team might not need a design system. It might even hold you back as you iterate and pivot your way to product-market-fit.
Once the team grows and is working on various parts of the product, the need for some type of system becomes apparent. When your company has many teams and departments working on different initiatives, a design system is a must.
Don’t let perfection stop you
Creating a design system doesn’t need to be a massive undertaking. Don’t let its complexity and time commitment lead to procrastination. Define the base and let the rest evolve as your product grows. When things get a little crazy, dedicate time to refine it. The hardest part is getting started!
Great design system examples to reference:
Great articles on design systems:
It takes hours of research and attention to create content like this article. Please give it a few claps to motivate me to keep writing. It’s free for you but means a lot to me.
Want to build better UI?
Get the free design system I’m building.
