Getting Started with Design Systems Checklist

When I first started working on design systems, I didn't know where to start. Googling "what is a design system" only got me so far!

While I wish I could just download all of the information in my brain into yours, I can't (yet). Until then, this checklist is designed to guide your research.

This checklist contains a lot of information. I know it can feel overwhelming. Don't worry if some of the items on the list don't make sense yet. You should expect to work through this checklist over the course of months and years––not days.

I've bolded keywords to make topics easier to search. I've also linked to resources I've found helpful or written over the years. I have italicized topics you don't need to address immediately.

Decide if a design system is the right tool for the job

Find out if your company will invest in a design system

Convince the designers to invest in a design system

Convince the developers to invest in a design system

Decide how people will contribute to your design system

Learn about the 5 layers of a design system and decide which layers you need to support

Research accessibility

What is the scope of your component library (how many components will you build, what types of components will you create)?

What is your component library's source of truth?

How opinionated is your design system?

Pick a design tool (Figma, Sketch)

Research WCAG compliance and select which level your library will support (aim for at least level AA)

Pick the first few components you will build together

Invest in building a repeatable project management process to move work through the system

Decide if you'll be building from scratch or if you can leverage an open-source component library (Reakit, Reach UI)

Pick your language (JavaScript, React with Flow, TypeScript)

Pick your JavaScript library (React, Angular, Vue, Web Components)

Pick your approach to CSS (Vanilla CSS, SCSS, CSS Modules, Styled-Components, Emotion, Tailwind)

Decide if you want to configure your design tokens from scratch, or if you want to use a tool like Theme UI

Choose whether to store your components in a monorepo or a multi-repo

Decide if you need to publish your components to a registry

Learn about semantic versioning

Decide what registry to publish your components to (npm, artifactory)

Add a changelog

Automate versioning and publishing of new changes in your CI pipeline

Work with designers to agree on design tokens

Align with designers on language to describe the layers of your design system

Make sure designers and developers are calling the same component the same name

Implement design tokens

Build elements (Button, Link, Tab, RadioButton, Grid)

Build patterns (Form, TabList, RadioList)

Write useful scripts to make it easier to bootstrap new components

Decide on a testing strategy and what tools you'll use (jest, enzyme, testing-library, cypress, snapshot testing)

Manually test for accessibility

Cross-browser testing

Configure CI, and automatically run tests, type-checking, and versioning on every build

Propose and adopt a release schedule and branching strategy

Communicate with your stakeholders about how you'll be releasing changes

Create a slack channel to answer questions

Configure and deploy Storybook

Write documentation for each component

Hold office hours

Give internal talks about design system concepts

I hope this checklist has been helpful. If you've found anything confusing about this subject, send me a DM on Twitter @MCapoz and I'll do my best to answer your question!

Getting Started with Design Systems Checklist

Organizational Direction

Philosophical / Critical Knowledge

Working With Designers

Choosing Tools

Versioning and Publishing

Building Components

Enforcing Quality

Encouraging Adoption