A quick guide on creating a design system

Learn the basics of creating a design system in 6 minutes

Andrew Coyle
Jun 9, 2020 · 6 min read

I published the design system I created to illustrate concepts in this article. Feel free to use it in your work.

  1. Understanding design systems (what are they and when to create one)
  2. Creating a design system (creation process and activities involved)
  3. 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.

I created the start of a basic design system to illustrate concepts in this article. Feel free to download/duplicate the NextUX file, Sketch file, Figma file and use it however you like.

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.

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

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 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

  1. 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.
  2. Use presentation software like Google Slides to organize your screenshots or consider printing out each screenshot and pin them on foam-core boards.
  3. Review each category to observe inconsistencies and note areas for improvement with your team.
Consider collecting all your product’s design components and documenting it in a slide deck. It’s usually a very eye-opening process that shows the necessity of creating a design system.

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.

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.

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.

Basic design elements are combined to create essential UI components.

Components to consider including:

  • Forms
  • Buttons
  • Tabs
  • Icons
  • Alerts
  • Etc.
The example above shows examples of design components categories including buttons, forms, and tabs.

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?

After you define your design elements and components, you can combine them to create views.

Design elements and components come together to create views. The example above shows a signup form that includes tabs, form inputs, buttons, and typography.

Examples:

  • Dashboard
  • Signup forms
  • Overviews
  • Details
  • Etc.
The example above shows how design elements and components combine to create a signup view.

Design patterns consist of common user flows and interactions.

Examples include:

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

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.

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.

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!

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.

For more:

NextUX

The future of iteration

Sign up for NextUX

By NextUX

Our latest articles on design and product development Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Andrew Coyle

Written by

Building @nextuxdesign (YC S19) • Formerly @Flexport @Google @Intuit • Interested in platforms

NextUX

NextUX

https://nextuxdesign.com/

Andrew Coyle

Written by

Building @nextuxdesign (YC S19) • Formerly @Flexport @Google @Intuit • Interested in platforms

NextUX

NextUX

https://nextuxdesign.com/

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store