Queuing is perhaps the most well-known and admired British system. If there is more than one person looking to use the service you want to use, everyone knows to wait behind the person who had the good sense to arrive at the service before you did. It’s universally understood that once the first user in the queue accesses the first touch point, all users in the queue then move forwards and so on and so forth. 

We understand this system so well that when we encounter a queue jumper, it doesn’t take long before all users in the queue put this person back in their place (metaphorically and sometimes, literally). What this system does is foster communication between strangers (even if it’s silent) and helps everyone complete their journey to meet their goal. 

This principle also applies in digital product design where implementing design systems helps to foster better communication between the different functions in the development process, ultimately building better products. But how?

You say tomato, I say tomato

A design system, according to InVision, is ‘a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.’ The reusable components that make up the system allow products to be built in a more structured and guided way because they allow designers and developers to speak in the same language. 

Usually, developers speak in components, whereas designers speak in colour, typography and form. Today, software is often built  using Single Page Applications which is almost always designed around a library of reusable components. This can prove problematic when designers are explaining their work to developers and vice versa. 

A design system however provides a means through which designers and developers can use the language of components in a context which both developers and designers understand. For example, when a developer is building out a ‘multi-select’ component, designers and developers can both view the design output for that distinct component, in one specific place.

Please leave your feedback in the form provided

A design system also facilitates a more continuous model for design feedback once the work has been drafted by developers. The industry as a whole is moving further away from design handoffs. We’ve come to understand that there should never be a point in the process where a designer completely steps away from the project. 

Clear design documentation however is still essential and a slew of new tools are aimed at encouraging this. As the most popular of this new breed, Figma & Invision now integrate design systems at their core, and allow for seamless collaboration on designs in progress. Developers are also able to pull meaningful information out of design files to implement into their work such as spacing, fonts and images.

An example of the process of using design systems in product development

Consistency, consistency, consistency

The additional integration of design systems within these tools doesn’t just show you what each element looks like, but also how it functions both individually and as part of the whole product. For example a design system within Figma or InVision, can show you how a component is composed and where it lives on the app. This level of detail and organisation helps enforce consistency across your product.

So what's the catch?

These silver bullets don't come without a cost, or at least without a change. 

For developers to get the most out of these tools, designers have to ensure their design files are well structured. This means smart naming of layers and components, laying out everything precisely, and leveraging the library functions of the design tool. As well as being a significant shift for many designers who cut their teeth supplying flat designs from Photoshop, this way of working could also be seen as reducing creativity from the process. 

Designers are now thinking about specifications and documentation earlier in the process than they used to be. Previously, flat designs would be created and then specified and documented later, now these processes are integrated. However, despite the initial shift in mindset, the efficiency benefits later down the line far outweigh the initial extra effort.

Coming soon

We could talk for hours about how design systems can help designers and developers live happily ever after (and we'd love to chat to you about it). But for now we're really interested to see how the industry moves in following directions:

• Automated testing: How can we test our design systems to match what's being produced in code? Additionally, once components from the design system have been implemented, how can we automatically ensure they stay functioning correctly? Visual regression testing tools such as Percy already exist, but we can’t wait to see whether this technology can be combined with design systems, to not only test visual design, but user experience too.
• More than just visual: We expect new tools will be released that interpret design systems as more than a collection of visual assets. On the developer side, tools like Storybook already allow interaction/UX specifications to sit alongside component code. We’re looking forward to seeing similar tools aimed at designers emerge.
• Direct to code design systems: As more and more designers start to think systematically, are there opportunities to create a direct link between design files and code? Will we see a function system where design system updates create code changes? There are many startups working to make this happen right now such as Avocode, Anima, Supernova.

We're really excited about the future of design systems and how they can foster communication between product development functions. Do you have a project that might benefit from closing the communication gap between designers and developers ? Get in touch to learn more about how design systems can lead to better outcomes when delivering digital products.

Have an idea you want to discuss? Call us for a free consultation

get in touch