Design System Best Practices: How to Build a Scalable & Effective System

Design Systems are gaining widespread popularity among businesses as they endeavour to enhance product design efficiency, promote team collaboration, and expedite time-to-market. This short guide delves into the fundamental aspects of a Design System, outlines the advantages of incorporating one, and recommends a process for developing a tailored to the specific needs of your organisation.

What is a Design System?

Design Systems are a collection of guidelines, components, and tools that define the visual and interactive elements of a product or brand. They provide shared reusable components and a set of rules that enable designers and developers to create consistent and cohesive experiences across all touchpoints in digital products. They can include everything from colour palettes, typography, and iconography to UI patterns, accessibility guidelines, and code snippets. They are essential for maintaining brand consistency, improving efficiency and collaboration, and ensuring a high level of quality and usability in digital products.

The Anatomy of a Successful Design System

Design Systems are often made up of three key parts:

• The Design System File(s)
  Usually in Figma or Sketch, this outlines all the UI assets in order to feed and sync with front end development.

• The style guide
  This is a guide that outlines the design principles, typography, colour palette and other styles for the system.

• The component library (codebase)
  This includes the HTML, CSS and JavaScript that make up the components. This is a collection of all the reusable components that make up the system.

Design Systems can be used to build web applications, mobile apps or even physical products.

What are the main benefits of Design Systems?

Design Systems enable design and development teams to work faster and more efficiently by eliminating the need to start from scratch for every new project.

A DS can provide the architecture for achieving more efficient DesignOps, pathing the way for faster growth and better craft and quality. They help to create consistency across an organisation’s products and can be used to speed up the design and development process.

Integrating a Design System successfully is a significant undertaking that demands careful thought about its seamless integration within your organisation.

When is the right time to adopt one and how do you get started? These Top 10 considerations will help move you forward to ensure your teams spend more time on innovating and less on reinventing the UI wheel.

Top 10 Considerations for Creating a Design System

1. Discovery
   We always recommend a thorough audit of the design / UI inventory when embarking on a Design System process. The audit includes the current tech stack, ways of working, business goals and capabilities. The reason for this? Sometimes a bespoke design system is not actually needed. Although proprietary design systems are more valuable, it’s possible (or even preferable) to begin with a prefabricated design system (such as Ant, Material Design or Tailwind). These all have front end design systems that are theme-able, which negates having to build from scratch. Taking it even further, start-ups might not even need a design system at all. If product market fit is not yet established, there is no point in creating one. Creating a bespoke DS is only the right approach if the audit reveals it will benefit the current setup, which will also change over time.

2. Firstly, do you have the right team in place to create a Design System?
   There should be at least one representative from the Product team and one Front End Developer ready to work on this, otherwise some BAU time should be dedicated to this. Architecting a Design System starts with a small design and development team and then soon warrants expanding team members depending on the vastness of the UI & Experience Language. Figma and Storybook skills are an absolute must at these beginning stages but a centralised team should be developed over time to work solely on this.

3. Design Systems should be treated as a Product
   Design Systems tend to fail if they don’t get implemented fully into working code. Small teams will struggle to create features alongside implementation; it can hard for teams to balance the day with the ‘systems thinking’ that is need to build and maintain a UI library. We recommend treating them as a separate product and planning and resourcing accordingly.

4. Design Systems don’t just live in Figma or Sketch
   We often see Design Systems end up in Figma, but not make it to front-end code. This is not a Design System (well it is, but only half of it!). We recommend that time is taken to build relationships with the front end development team and start getting into living code. Ideally, separate DS teams should be created to support squads.

5. Over communicate about Design Systems with the whole Product team & beyond
   There’s a reason why Design Systems are in vogue right now. Those who can invest in creating one will see better ways of working and save future UI and Front End Development time. Product teams should start small, prove business value and continually communicate the wins of efficiency, freeing up more time to innovate.

6. Create a shared language between Design & Development Using ‘Design Tokens’
   Design tokens are labels for identifying the elements that make up a Design System, such as colours, type, shadows, corner radius and so on. Design tokens create a simple language that everyone (especially Design and Development teams) can understand and use in the intended ways. This language of design tokens can be kept in sync with tools such as SuperNova and Specify, which help manage tokens between design files and working code in GIT. By creating a set of design tokens, teams can easily update the entire system by changing a few key values.

7. Once the Design System is mature, start a plan for Documentation & Governance
   Using tools like Storybook & Zero Height, teams should create rules and guidance around components and patterns to retain consistency for new starters or third parties to understand. Taking the time to document and explain usage, as opposed to elements left unexplained in Figma, will pay off in the long run. One individual should be responsible for governance and policing of the Design System.

8. Work on the IA of Design Files before realising UI
   Teams should take care to plan the structure of Design System Files in Figma, separating out Foundations and Components into separate libraries to help compartmentalise UI and avoid any errors.  Preparation should allow for multiple platforms e.g. mobile, desktop, web, native etc and time should be invested in versioning and sandboxing of those environments. This can help delineate, what is work in progress vs actual finalised design work.

9. Focus on the Outcomes. Show the ROI
   To maximise the effectiveness of a Design System, they need to be measured and shared with the rest of the business. It is often only when organisations are able to measure and share ROI successes that they can spread like wild fire. This fosters better collaboration with everyone working working together to champion the advantages a Design System brings to the business.

10. Be comfortable with a ‘Chicken and Egg’ approach to creating a Design System
    There are lots of articles about creating design components first and then using them to realise screens and UI, however, in our 20 years of experience, it doesn’t always work out like that – especially when trying to create innovate digital products and services. Be comfortable with realising and shaping some UI screens, patterns and flows and then dissecting them into the Design System.We should all be working towards accessible systems, whether enterprise software or a B2C website. When creating a Design System, accessibility considerations should be baked in from the very start to ensure that products and platforms are as inclusive as possible.

All of the above is working towards a mode of assembly versus creation. Creating a Design System helps enable other members of product teams with assembly.

For further guidance on setting up a design system for your enterprise software business, request a free, confidential and no obligation call.