Skip to Razor content
Razor Insights

How a design system can assist development

Written by Aidan Minton
Published on
Razor Designer Aidan Minton discusses how a design system can assist development

When starting a new project, one of the key things for our designers is to understand the business and clients’ needs, gaining an understanding of the client’s external positioning - including brand - early on helps us see what can be used, adapted, and improved upon. This normally means following the client’s brand guidelines before the project starts.

We like to think this same methodology should be passed as a digital baton to the development team too - this is where design systems come in.

What’s a design system?

The Design System, in short, provides a high-level set of patterns that stands as a firm foundation for most projects.

A design system is a range of components that creates a user experience that can exceed people's expectations and ensure that quality and consistency is created across various solutions. Design systems enable teams to manage design at scale.

We introduce design systems to gain consistency within projects while also improving the time spent creating components. It also helps to align development and design through sharing the same patterns and practices.

To compile a 'main repository' of design patterns, guided by clear and thoughtful processes, a design pattern can represent a multitude of things - it could be a UX pattern we follow, a component, or simply a page layout!

 Once we have assembled our design patterns, our process doesn't end there. Each design pattern will be comprehensively updated in line with our passion for continual improvement, this helps us adapt to the ever-changing world of technology and web accessibility.

Check out Martin’s blog on iteration.

In essence, a design system and brand guidelines share more than a few similarities:

  • They both share best practices and guidance on how to keep everything consistent
  • Between them, they share the same design principles for anyone to be able to pick up and utilise.
  • They are maintained and expanded by multiple disciplines

So why use a design system?

We’ve all been there as developers - we pick up a design and start working on it, only to be told that’s an old font, or we haven’t used that colour since the 90s. Sure enough, the Brand Guidelines were last updated in the 90s. Design systems are living documents and that’s why they are so powerful.

Where a design system stands out is how quickly it can be iterated upon, because all designs are governed by the design system. If Company X’s Primary brand colour changes from orange to pink, we can make a 5-second change and publish this across the board.

Img

Every designer wants to hand over something creative, innovative, and something that makes the user’s life easier right? I know I do. But what happens when you want that impact with a limited budget for that critical thinking? Using a design system, once you have a component you can adapt it to suit the project, leaving more time to spend on critical thinking and less time creating a standard form input for the 5th time that week.

Happy Designer, happy Client.

How can this help streamline development?

Gone are the days when we used to rely on flat designs to interpret an interaction or task in development. Design systems contain many different ways of accessing and understanding components’ core structure. Being able to dive into a component’s padding, font size, font family, etc, and exporting it to the codebase saves a lot of time and back and forth looking at design.

A component in the design system may include variants, the same way you might have in a development project.More often than not, you will have multiple instances of one component and this marries up in the design system.

The design system not only gives you granular detail for each component, it also gives you the project’s overall variables. This is useful when exporting into a file that you can hand over to the developers to work with. Another great feature of a digital design system is the interactive elements, being able to prototype functionality to give an indication of how the design was supposed to be interpreted. This helps the developers see all the micro-interactions within a design, whether that's a hover state on a button or a slide interaction on a carousel all these things aid in the development piece

How much extra time will it take up on a project?

At this point you’re probably thinking, this all sounds great, but who has time to build a design system, right?

This is a question I get asked a lot and it’s really simple. Most of the heavy lifting is already done, the design system consumes the brand guidelines, you already know what to include...typography, colours, etc. Most brands can create a design system already and with minimal effort.

After the initial set-up, each designer has a responsibility to maintain the design system as they progress through projects. We understood that adapting to this process saves a lot of time for minimal upfront input. Ideally, design systems are managed by each member of the team, we realised the importance of having collaboration and iteration through our design systems. With our design team recently doubling in size, this remains high up on every designer’s priority list.

How we create a Design System?

For design systems at Razor, we use Figma and have spent time creating and iterating through our own design system. In doing this we found a way to expand on it for each project. We manage this by duplicating the main design system, which contains all our set standards, that have been thought about carefully from accessibility and a user-first mindset. We then adapt these to match your brand, the benefits from this two-fold, it saves time creating them from scratch and allows us to use our time spent in the creative thinking space.