A simple UI kit is no longer sufficient to meet all the demands of the current digital delivery process.
Over the last decade, the need for a standardised approach to product design has given rise to the design system. It has also spawned a whole new field in its own right within the digital design industry. A design system is often thought of simply as a set of reusable components that designers can use to build out user journeys quickly.
In this article, we’ll outline why it is so much more.
Design systems are often little more than an afterthought when product managers are planning a project. Even if they’ve accounted for the extra work involved in creating a design system, it’s often dismissed simply as a step within the design phase in which designers create a reusable component library for product designers to use. They tend to overlook the real implications and use cases of implementing a good design system.
For a start, a design system is not just for designers — it’s for everyone. It should be built around the needs and standards of a product’s delivery system, the business/brand that represents it and the contributing sectors or teams that directly affect it and use it.
Design systems should represent a single source of truth, uniting many contributing factors under one roof.
These can include (but are not limited to):
- Developer-based info (code: snippets, CSS, HTML)
- Brand guidelines
- Design standards/principles
- Accessibility rules
- Product specs
- Interaction patterns
- Usability standards
- Design processes/checklists
- Style guides (Text styles, colours, grids, columns, layouts)
Here’s a definition from NNGroup that we like to reference:
“A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.”
Design systems within the larger design ecosystem
A typical misconception is that a design system is solely made by designers for designs. This is not true: A good design system depends on more than just design, and other design system types can also be considered as part of a greater design system ecosystem.
A design-based design system
A design-based design system is used as a single source of truth for all initial standards, components, style guides, layouts, use case documentation and interaction specs. This is the foundational starting point that will direct all following design system types.
It’s typically owned by designers, but it should also be a place for collaboration and communication with other stakeholders and teams connected with the project.
At NearForm, we help companies create better design systems, and our favourite app for creating design-based design systems is Figma. Other products you can use include Adobe XD, Sketch and Invision.
Dev-based component library design system
When the design system is developer-based, it stores all previously defined information in a retrievable library of code. Developers reference the system that the designers have created to build out their library, based on the specifications and guidelines provided by designers in the design-based system.
The goal of this library is to streamline dev production by eliminating unnecessary dev work and inconsistencies.
A common app NearForm uses for dev-based design systems is Storybook.
Design system portal
A design-system portal displays all high-level design, dev and brand specifications and documentation so that it can be easily digested by a wider audience.
It is often an online platform or website that is open to the public or privately accessible to company teams for displaying officially approved design-related specifics.
These portals usually provide more detail on branding, marketing, goals and principles, as well as displaying the collected findings from both design- and dev-based design systems phases that preceded them.
A classic example of this kind of design system is Material Design.
When it comes to handovers from one system to another, a sequenced approach is the logical flow when describing how design information transitions from phase to phase.
Getting things wrong in the design phase can have serious consequences down the line and increase delivery times and costs. To avoid these problems, here are some important factors to get right from the beginning:
Make sure there is some code basis available for your developers to start with — even if it’s simple CSS values such as colour, font weights and spacing. Inspect features in Figma or Invision allow you to do this.
Consulting with branding and marketing
To avoid conflict with brand and marketing teams, it’s important to ensure your designs align with their basic brand guidelines or marketing rhetoric. It’s a good idea to get these teams on board from an early stage to avoid unnecessary change requests in the future.
Baked-in accessibility standards
Adhering to accessibility standards is now an imperative for companies, and failing to do so can have serious legal repercussions in several countries. To ensure you are compliant, you should bake accessibility standards into your design system from an early stage by providing documented standards and implementing various plugins and practices during both the design and development phases.
Documenting functional and interactive specs
When you are handing designs over to your developers, you will need to give them access to certain basic information. Whether they do this through a design system or via user stories that product owners have created using your design system, it’s important that specifications such as how a button or a dropdown menu should work are clearly documented in the design system during the design phase.
Design systems in a nutshell
Essentially, design systems are comprehensive systems that can communicate much more than UI design specifications to an audience that extends far beyond the designers within a company. Ultimately, they provide a single vision to bring many teams and disciplines together and consolidate better ways of collaborating. To see how design systems can transform ways of working, check out how the design team at Spotify used Figma to move to a more interconnected and participatory way of working.
It’s important to remember that, although almost everything in a design system starts in the design phase, it certainly doesn’t end there.