Introduction to Design Systems

Estimated Time: 90 minutes

Design systems are a regularly updated library of reusable components (buttons, typescales, forms, inputs, etc) standards, guidelines, interactions, etc that help effectively and efficiently design and build usable and aesthetically pleasing products. Design systems vary from company to company. The maturity of a design system correlates directly to the maturity of a company and the importance it places on design.

Design System Pros

There are many benefits of a well implemented design system. The benefits include:

• Increasing design and development speed - Because design systems are made up of reusable components, designers and developers no longer need to worry so much about inconsistencies. They’re able to use the same components over and over again as they add to/iterate on products without worrying about components, patterns, interactions, etc not matching up with a previous/live version of the product. This allows designers and developers to design, test, iterate and build much quicker than if they needed to design and build individual components everytime they work on something new. This is especially true for companies which have many digital products and want to ensure that they maintain a consistent language/theme across them all (e.g Google with their search, docs, sheets, meet, calendar, etc).

• More time to spend on complex problems - With the increase in design and development speed, designers and developers have more time to focus on more impactful parts of a products’ user experience such as user journeys, information architecture, new features, etc.

• Consistent language across companies products - As mentioned above, companies with many products can leverage design systems to maintain consistent language and themes across their suite of products. This makes it easy for different design and development teams, working on different products, under one company, to work in parallel and not produce completely different products.

• Reference point and educational piece for new and existing designers, developers and content creators - design systems provide guidelines that help new designers, developers, content creators, etc quickly get up to speed with design and development at a company. They also provide a reference point for existing designers, developers and other members of cross functional teams within companies.

Design System Cons

Based on the section above, you may be thinking, “design systems are great, I can’t see any reason why designers and developers shouldn’t create/use design systems”. Well, like most things in life, design systems also have disadvantages. The disadvantages are:

• Creating and maintaining design systems requires a lot of resources - Like the design process itself, design systems don't have a final deliverable which can be completed, handed off, then left alone to move onto other tasks. They constantly evolve based on feedback from the teams that use them and therefore need dedicated resources to monitor, gather feedback and update them.

• Getting team members familiar with design systems can be difficult - Team members making use of a design system will need good instructions and time to understand it. Even existing team members who have been introduced to a new version of a design system they’ve been working with need to understand the updates and how these updates affect the design of the product going forward.

In your early days as a designer you may not work with mature design systems, you may not even work with design systems at all. This is because smaller companies don’t have the time and resources to build good design systems. To combat this, some experienced designers have their own personal design systems which they’ve developed over time. These personal design systems can be really helpful when working with companies or teams that don’t have one.

The article below is a comprehensive guide to design systems and will explain everything you need to know about design systems at this stage. Please make sure you go through it and watch the videos linked in the article.