4 Popular Approaches for Structuring Design Systems
2018 was the year of design systems, there was not a single day without news and not a single month without several new tools that are related to design systems. This trend is mainly pushed by Sketch which is becoming more and more popular and is widely known now. Even among bigger companies who are usually slower when it comes to adopting new software.
And we at mediaman think that this trend will turn into normality sooner or later. Design systems will be a basic part of a company’s portfolio of online tools — like an image library, a pool of marketing/brand assets or similar internal tools. How exactly might design systems affect us in the future. Britta Weiland explored this question in her article Why Design Systems are Going to Shape the Internet.
Why is it important to find the right structure for a design system?
It is worth taking some time to think about structure before you start creating your design system. Now that you know how important design systems are, let’s take a deeper look at which contents are in there and where they belong. This article won’t tell you how to slice your components. Instead it’s about the information architecture of the website where you present your design system.
There is not only one solution that fits every company, because each company has their own needs — it always depends on many factors. Not only can the types of content differ across companies, but also the number of components varies a lot. And each team works together in a different way as a group. Also, each team member (read: user of the design system) has a different focus on the content within the design system.
You can experience this variety by browsing countless examples on styleguides.io.
How to find the right approach for your design system?
To help you with this, we will discuss the following questions in this article:
- What do you need to consider when you structure a design system?
- What are the benefits and restrictions of Atomic Design?
- What are other approaches to structure a design system?
- How are most design systems structured (best practices)?
In the next step we will dive deeper into all these questions.
What do you need to consider when you structure a design system?
From our perspective there are 3 main topics to consider:
- For which target groups should you optimize your design system (i.e. everybody in your company or only UX Designers and FE Developer)?
- How many different content types do you want to integrate (design, code, guidelines, best practice, rollout plan, etc.)?
- How many components does your design system contain?
Answering these questions will give you an idea about the amount of content to incorporate. Also, you can prioritize and sort these contents better when you understand how your users look at them.
What are the benefits and restrictions of Atomic Design?
Atomic Design is the first systemic approach that one stumbles upon when planning a design system. It’s a methodology invented by Brad Frost for creating design systems with five distinct complexity levels.
But it might not necessarily be the best way to sort your design system.
Benefits:
- It’s a widely known concept.
- If you have many components, the Atomic Design structure provides a better overview within each category.
Restrictions:
- If you only have few components, it might be too complicated to have 3 different categories (i.e. with 2 or 3 components each).
- It’s hard to assign each component to one category and hard to find them later on (is a button with an icon and a link an atom or already a molecule?).
Atomic design is a great analogy for thinking in modules of increasing complexity levels. But it can lead to misunderstandings and frustration when trying to find components in the wrong category.
What are other approaches to structure a design system?
Apart from Atomic Design, we have found 3 ways that seem to be frequently used to sort components.
- by purpose, i.e. components for „navigation“, „show USP“, „increase trust“, etc.
- by objects, i.e. for Facebook: Friend, Post, Message, Event, Page, Group or for Airbnb: Listing, Host, Guest, Trip, Experience (source)
- by alphabet: list all components in alphabetic order in one category
Structuring by purpose or object makes more sense for bigger components. But it is much more difficult for smaller components which should be reusable for all kinds of purposes or objects.
Structuring by alphabet can be a good start, but if there are too many components it might get too confusing or complex.
How are most design systems structured (best practices)?
We took a look at 32 publicly available design systems and analyzed their structure — thanks to Daniel Banks from the design system slack channel who shared this spreadsheet.
The following chart shows how often each strcuture was used:
Only 1 design system was exactly structured according to Atomic Design and another one only used “atoms” and “molecules” but not “organisms” (read here why). Others used multiple different “component”-categories.
But the majority (22) actually didn’t have a special structure for their components — they just listed them all in one category called „components“ (in alphabetic order).
Other Findings:
- „Guidelines“ (5x), „Guides“ (2x) and „Design Guidelines“ (2x) are often used for more general information.
- „Resources“ usually contains Downloads (i.e. Sketch-Library) but also FAQs and Documentation (10x).
- „Getting started“ explains users how to use the design system (6x).
You can already see that there are some strong patterns, the 3 main categories used in those design systems were “Components”, “Guidelines” and “Resources”. This seems to become industry standard — but our sample size could also be too small to tell the whole story.
Figma also published a big survey about the State of Design Systems 2018 and Dan Mall did another interesting analysis of various design systems and what kind of component they contain in his article Distinct Design Systems.
Conclusion
As we outlined in the beginning and saw in our analysis, there is no such thing as the one perfect structure for all design systems. At first it was a big surprise that Atomic Design was not used as often as expected for structuring design systems. Most design systems use a different approach where all components are grouped in one single category.
If you consider our tips and answer the questions above for your company (and listen to your target group!), you will be able to build a meaningful structure for your design system. If you are unsure, just follow the general agile approach: start small, learn and adjust!
What’s your opinion about the structure of design systems?
What’s next?
We will go one step further and take a deeper look at the content and functionalities within a design system. Therefore we set up a very short survey and would highly appreciate all your input and feedback on this — it only takes 2 minutes, promised!
