Design systems: everything you need to know

Anyone working within digital design is bound to have heard the term 'design systems' by now; you might not be sure what it means, though. In which case, we're here to help. 

In this article, we'll define exactly what a design system is, the reasons for using one, how to create one and what tools you'll find useful. On page 2, you'll find a deep dive into the history of the web to find out where design systems came from. 

• The best design style guides, to inspire you

What is a design system?

A design system is a single source of truth that designers and developers create, reference and develop together. It’s a matrix of rules comprised of a library of symbols – fonts, icons, colours, shapes, grids, animations, tone of voice or more – that carry different meanings, determined by their function and hierarchical relevance. 

It’s essentially a living organism made of elements that evolve from fulfilling pre-existing requirements to newly defined ones as the product grows in complexity. These elements are translated into development-ready components that can be picked up and used immediately in a live environment.

Who defines a design system?

Designers and developers work closely together with an agile approach to establish the rules of a design system. Designers define all aspects of visual communication – UI, branding and user experience – while working with developers to transform those properties into coded components, by iterating them consistently until they perform technically and stylistically in a self-contained manner.

Why have a design system?

Though a design system is a foundational requirement for any digital products that scale, at its core are principles that apply to any design work. The most important aspect is to put in place a set of rules that, when repeated over and over again, will consistently return the same principles. 

In the same way responsive web design is considered a modular approach in terms of how blocks of content behave on a web page in different viewports, a design system follows an atomic approach by addressing each particular element that defines the properties of a component.

The purpose of setting up a system is having a library of tried and tested components that can be reused consistently and expected to perform each time on all product dimensions – style, branding, behaviour, function and delivery. The biggest advantage of a design system is to be able to prototype efficiently and iterate both design and code symbiotically in a journey towards a high-quality product.

How do I develop a design system?

Now let's take a look at the steps you might take to put together a design system for a digital product project. 

01. Establish a clear product vision

First, you need to have a clear idea of the product you are developing. Here are a few essential questions to consider:

What does it do?

• What is the purpose of your product?
• What are the requirements for this product? 
• What sort of functionality will the product need in order to perform? 

Who is it for?

• Who is the audience for this product? 
• Does the user have any quirks that might affect how the product is received? 
• Why will the user engage with this product? What makes it unique? 
• Is the user familiar with similar products? 
• Is the product responding to an identified need or creating a new one? 
• Does it address accessibility?

Where will it live?

• Is this product a website? A web app? An app? Something else?
• Is it device agnostic?

Should it deliver the same experience cross-platform or focus on particular micro-experiences within specific contexts?

The purpose of a design system is to reduce complexity in development, by addressing known concerns as well as identifying new ones during the conception stage. It’s important to define the product mapping early on in the process, as it will help recognise potential hold-ups that can be avoided at the prototyping stage.

02. Work out your plan of attack

Secondly, you’ll need to assess the best approach. If you’re working on a new product, you’ll likely start with an MVP (minimum viable product), where the attention will be on validating functionality and learning users’ feedback. In those cases, it makes sense to use existing UI kits from established platforms, such as Google’s Material UI or Apple’s UI kit. 

If you’re past the MVP stage or creating a whole design system from scratch, your product mapping – which should include key aspects such as information architecture, a sitemap and user journeys – will inform you which basic functionality needs to be addressed first. 

For example, if your product is an ecommerce app, what elements do you need to have throughout the user journey to perform a purchase – from the homepage through to product page, checkout and order confirmation? Is it vertical or horizontal navigation? What do CTAs look like: are they icons, text only, have a coloured background? What image ratios are you considering: portrait, square, landscape? 

By addressing each element’s properties by hierarchical functionality, you’ll be able to lay solid foundations for progressive UI releases, thus building a consistently reliable system.

03. Choose the right tools

Thirdly, developing a product should always be an inclusive process that depends on all parties involved: designers, developers, product owner, client and users. Together, these individuals create an ecosystem, a testing ground that will shape the design system throughout the journey to the end product delivery.

As progress needs to be shared and, sometimes, worked on in real time, it’s important to choose the tools that best fit your workflow. Thankfully, we’re fairly spoilt for choice when it comes to design and prototyping tools.

Developing a design system is a collaborative approach that relies on principles of teamwork and transparency. It’s a commitment between teams willing to make mistakes and learn from them, discover new ways of doing things, innovate together and, all-in-all, just get a kick for a job well done because the product works and exceeds expectations. Which is the best feeling in the world. 

Next page: the history of design systems