Want to learn more about design systems? Here are the most common questions!
What is a design system?
At its simplest, a design system is a core library of UI elements, that are then reflected in the code of components using the respective library.
To put it another way, a design system is a shared library that all digital elements of a company’s brand - such as the website or app - can directly pull from.
What are design systems for?
Design systems are used to ensure consistent design patterns and language, as well as reduce coding time.
They can be used on one singular product, such as a growing website, or across a company’s entire brand. Where companies have to typically choose between scale and consistency, a design system is the best answer for both.
What are the benefits of a design system?
There are many benefits of a design system. For developers, it enables faster turn around, as code for all UI elements can be pulled directly from the pattern library. For designers, it establishes what is known as a “single source of truth” and avoids the creation of accidental variations that can lead to brand inconsistencies.
For the company as a whole, it ensures a better user experience, as every part of the company has the same UI and UX that users subconsciously come to expect. All of which makes it easier for users to navigate and engage with.
What’s in a design system?
At the heart of any design system is a library of UI components. This is where you will store any elements, which designers and developers will then use to build larger pages and assets.
However, this is also supported by additional design rules and style guides. These will determine the use of colors, spacing, and more - ensuring that, not only will your brand use the same components, they will be consistently applied as well.
What are the design system’s key components?
Most design systems follow the atomic design methodology, as created by Brad Frost. This process separates elements into atoms, molecules, and organisms, with atoms being the most essential components.
Atoms are the most basic components, such as icons, buttons, and text boxes. When used with established design guidelines, these can be collected into larger organisms; for example, a simple form uses text fields (title), input boxes, and a button, all of which are atoms.
Such molecules can then be grouped into organisms, to represent larger factors, such as navigation menus, larger forms, and other elements. From here, you’re well on your way to creating a full-page or template, all built from atoms.
What is the design thinking process?
When working with a design system, it’s important for both designers and developers alike to adopt a non-linear approach to thinking.
The design thinking process aims to consider many factors at the start, namely emphasizing (understanding user needs and desires), defining problems, and ideating solutions based on the former factors. After this, the design process can go through various iterations of prototyping and testing to determine the final solution. However, if the current approach isn’t working, or new problems arise, it’s important to go back to some earlier steps in the process.
How do you create a design system?
The first step in creating any design system is to create a shared library that will store your assets. While tools such as photoshop and sketch are great for creating such visual elements, they can’t be updated and accessed via coding. As such, you should use something more advanced, such as a storybook.
This is also a good step to evaluate your overall UI and design, making key changes before uploading to the library. Alongside these assets, you should also include key design rules, such as typography, spacing, and the color palette.
The hardest part of any design system, however, is then taking this new library of resources and updating existing pages and applications to draw from this resource. However, the key benefit of this is that once updated, they are easy to maintain and update again at scale, while new pages can be created and turned around with ease.
How do you document a design system?
Documentation is essential to any design system. In addition to tools like Sketch or Figma, you also need a location to store key rulings and decisions.
There are numerous tools available to provide this documentation, but it's important to find one that is compatible with your shared library. In some cases, a custom-built solution is often the best way; it’s essential to ensure that any changes to the documentation are automatically updated with individual atoms in the central library.
What’s the difference between a design system and a style guide or pattern library?
There are many discussions regarding style guides or pattern libraries, but it's important to note that these are not design systems.
The most distinctive benefit of a design system is that its a shared and centralized collection of digital assets that developers can call upon. A pattern library is a specific part of this, where molecules and organisms are stored. While useful, this is not helpful on its own without the singular atoms that make up these larger features.
Style guides, on the other hand, can be used to inform your design system. A style guide can determine tone, branding, and other design factors that your designers and developers can use when growing, adapting, and using their design system.
A design system, then, covers all of the above. It includes the atoms, typography, grid rules, and other essential building blocks, as well as the pattern library, templates, and more advanced design guidelines.
What are some examples of popular design systems?
There are many design systems to choose from, but there are few that are very well known. These include:
The similarly named Design System from Sage
If you look at these design systems, you can see atoms, rules, and guidelines designed to meet the needs of each respective company. Material Design, for example, is quite broad and general, with a focus on accessibility and clear UI, while Polaris is custom-designed for Shopify’s e-commerce focus.
What design systems tools are available?
There are many design system tools on the market. Storybook, for example, is very popular for managing the frontend UI and visual aspects, while Figma achieves similar results and is great for prototyping.
What’s important, however, is to find tools that are compatible with your existing architecture and backend technology. This is one reason why its important to trust experienced design system specialists, who can create custom compatibility modules, if required, to get the best results and user experiences. Check the best design system tools in another article.
