Design Systems have been a pretty hot topic in recent years and they are still gaining traction in the industry and throughout organizations. That’s awesome, because when done well and utilized properly, they add so much value across many areas of the product and business, including engineering.
A Simplified Definition
This post is intended to help explain what a design system is in a non-technical/non-design fashion. A simple culinary metaphor that I have been using has been resonating well with a variety of people, including designers.
“A Design System is like a Cake Recipe”
Yep, it’s as simple as that, but it encompasses a lot of complexities that a “recipe” supports.
A cake recipe usually provides the following:
- Ingredient list
- Preparation instructions
- Cooking instructions
- Sometimes substitution options
These are very similar to the aspects found in a design system.
TL;DR
Technical Definitions
Many definitions of a Design System are similar to this pulled from this article on Medium:
“A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product”
That is a good explanation from a technical perspective.
The “Cake Recipe” metaphor…
Allow me to explain…
Ingredients are like a UI Component Kit
If you want to bake a cake, you first need some basic ingredients. Most people are probably aware that you likely need some flour, butter, eggs, milk, mix it all up and put them in an oven to bake. Sounds easy enough, so you grab all those ingredients and put them in a basket ready to bake.
Similar with software, if you want to build a software product you will probably need some buttons, icons, form inputs, some tables, text elements, etc. You will likely use a platform/framework and it may likely provide you with a set of components (component library/UI kit), which is like a basket of ingredients for a cake.
Now What?
You have all of these ingredients and you’re ready to mix and bake that cake. Well, at this point you’re not sure how many eggs you need. When to add the butter. How to mix it all. What type of dish to put it in or the required temperature and time to bake it. That’s where the “recipe” comes in.
The Recipe is like the System Guidelines
A “recipe” is very similar to a “design system.” Where the ingredients are part of the recipe, but the recipe tells you the quantities, how to use them together, the dish-ware, temperature and time to bake. The recipe may even tell you what other ingredients you may use as substitutions if necessary.
That’s where the “design system” comes in. A true “system” should not only tell you which components you can use from a UI kit/component library, but also how and when to use them. Possibly even how to make a substitution with a button for another component based on certain scenarios.
Summary
I realize this is an oversimplified explanation of a design system, but it has been very helpful explaining what a design system is to various other individuals in other roles and disciplines that may not be familiar with some esoteric design terminology. It helped explain my role to some of my non-technical family.😉