BLOG

Fundamentals of a Design System You Cannot Ignore

A design system will touch every aspect of your product, but there is no single tool that covers it all. For it to benefit your company and your brand, implement the fundamentals of it, at the very least.

Harpreet Sidhu
Aug 12, 2021
·
6 min read
business
technology
⭠ Back to postsBlog cover image

A design system will touch every aspect of your product, but there's no single tool that covers it all. In order to reap the benefits to your company and your brand, you'll need to choose and implement at the very least these four essential parts of any design system’s lifecycle, each of which has its own purpose and benefit.

A stakeholder-facing design guide tells your story clearly

It may seem like putting the cart before the horse, but as you are working on your design system, it is worth keeping in mind that you have an audience: your users, your partners, your employees, your potential hires, and more. Every design system should ultimately be expressed confidently and purposefully in a website available to be browsed and borrowed from, though whether it is public or selective depends on your company’s needs.

Material Design Image

A good version of this is Google's Material Design, which made its debut in 2014 just as the modern approach to design systems — pioneered by Brad Frost's "Atomic Design" - was building steam.

The stakeholder-facing website explains the justification for their choices alongside examples. For Google, they have the opportunity to explain that their system is "inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink."

Atlassian's design system is carefully integrated with its overall brand, emphasizing clarity and boldness as well as the importance of accessibility and inclusion. Introductions to its icons and type explain clearly why they were chosen and where the reader can find out more.

What will your design story be? Your designers and developers will express it implicitly through the product, but the public design guide lets them speak directly to their users and partners to make it clear that the design system is more than a set of pixel dimensions and colour schemes.

Figma lets designers play productively and collaborate

Figma has quickly grown from hot startup to industry standard since its launch in 2015, becoming the premier web design collaboration platform.

Figma, Adobe XD and Sketch Logos

What you'll find in Figma is a method for organizing all the bits and pieces of a design system, arranged and documented in such a way that they're accessible to the whole team and integrated with other tools in creation, coding, and productivity. Figma is where a designer can find the exact icons, buttons, spacing, tokens, and all other elements needed whether they’re modernizing the login flow or making an account settings panel ADA-compliant.

As a non-destructive, fundamentally collaborative design platform, Figma lets your design team do the kind of brainstorming and whiteboarding that produces new ideas, but with no commits, no code checks, no meetings. Because they're using production assets, even superimposing them over the live site, designers can experiment freely but also put together entire refreshes or rethinks with minimal friction.

Figma libraries are also easily shared for simple collaboration and standard setting. Shopify's Polaris design system is broken down helpfully into dozens of categories and interactive elements that might normally only have been available in a PDF. Partners and other designers can inspect, download and test these elements for any purpose. Other tools like Sketch and Adobe's creative suite are also widely used. 

Build a component library and share progress across teams

One of the benefits of a working design system is preventing duplicated efforts. A component library is an important part of that, providing a central repository for all the bits and pieces of a design system along with their documentation for developers to work with.

Action List Image from Design Systems

It can be easy for two parallel projects, such as a web app and marketing page, to individually pursue and develop similar — but not identical — versions of settings pages, common icons, and workflows. A component library ensures that every team is working with the same exact pieces, which have been designed and developed to work together seamlessly.

There are lots of off-the-shelf component libraries that a company could use or base their own library on, and competing frameworks as well. One such is Bootstrap, which provides pretty much all the pieces necessary to build a basic user-facing website, and has grown popular as a way to go from idea to implementation in as short a time as possible.

Altassian Design System Image

Larger companies like the aforementioned Shopify and Atlassian make their component libraries available as well. Like their public Figma, however, these may be best thought of as pinboard material rather than something to be borrowed whole or piecemeal.

Companies building their own design systems will want to have their own component library and decide early on what frontend to use between React, Vue, and Angular. Once the framework is chosen, designers and developers can start both filling it and drawing from it. If a component has been made, it will be in the library, and any team or partner will be able to easily find it, use it, and support it. If it doesn't exist, they can start a documented effort to fill the gap so that the next person to need it will be able to follow the same process in complete harmony.

In Storybook, developers can develop instead of talk about developing

With prototypes in Figma made from pixel-perfect components maintained in a shared library, developers have all the tools they need to put together the product — but at this phase they often spend as much time in meetings, resolving issues and sharing updates, as they do developing.

Storybook is a sort of pre-production environment that lets developers play with live code collaboratively while simultaneously finding, tracking, and implementing changes to comply with guidelines and governance.

Storybook's Build bulletproof UI components faster image

The tool lets the team get incredibly precise with things like soft design guidelines (don't use this colour next to this one) and hard accessibility rules (every image must have alt-text), all of which are presented live next to an interactive canvas that lets developers make changes instantly.

With Storybook, an issue with accessibility goes from being a multi-step process involving emails, calls, and proposals to just another coding problem that developers can tackle on their own, knowing they are doing so safely and within the established bounds of the design system and implementation rules. Components can be pulled automatically from the library, simplifying and de-risking improvisation and collaboration.

Work with experts to get it right the first time

As intuitive as these tools and processes are, it’s not a trivial task to put a design system together. Because they operate as parts of a whole and not a simple checklist, each aspect needs to be explored and executed with the others in mind. For that reason, it’s advisable to work with an expert facilitator like Quantum Mob when building yours.

The first step is to identify the target scope and complexity of your new design system, a process that can’t be left to trial and error. Instead, a few exploratory sessions can put you on the right track from day one, and a pilot project guided by experts can familiarize your teams with best practices.

Of course, to get the most out of any collaboration you’ll need to identify your company’s unique needs, which is the subject of our next piece.

You might also like