A developer’s intro to Design Systems
.jpeg?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&q=50&rect=0%2C0%2C800%2C800&w=48&h=48)
A Design System at its very core is a way of designing an application in reusable components with clear standards. They consist of tools for designers & developers, patterns, components and brand guidelines.
Why your company probably needs one
A Design System offers your company a few valuable things:
- Efficiency: duplicating work cost money real money with a solid Design System designers and developers can reuse components which can greatly increase efficiency
- Consistency: Consistency is the key principle of great user experience. A great user experience creates confidence in your brand and makes your applications more intuitive to the user. Keeping a consistent brand while many developers are working together is also difficult, by keeping your brand guidelines within components designs and developers can be aligned.
- Scale faster: scaling is tough but by combining efficiency and consistency it becomes a much easier task to scale. Once you have a good set of reusable components making new pages becomes simple which allows you to spend time on solving problems rather than duplicating old ones.
- Save money: At first, this might not seem intuitive, build a project to build projects, but if develop correctly this can greatly speed up problem-solving, save duplicated effort (as we briefly touched on in scaling faster).
Design Systems empower designers and developers to collaborate more efficiently and build applications more quickly. Learning how to look at a design, and break it down into a system, is just as important as the tools and workflow needed to enable the system’s success.
Design has always been largely about systems, and how to create products in a scalable and repeatable way… These systems enable us to manage the chaos and create better products… A unified design system is essential to building better and faster; better because a cohesive experience is more easily understood by our users, and faster because it gives us a common language to work with.
– Airbnb
How to break a design into something reusable
To break a problem into a collection of reusable components we use a system called atomic design. Atomic design compares these design elements to the periodic table of the elements where the smallest components are atoms which make up molecules, then organisms, then templates and then pages (okay it stops sounds sciencey after organisms). Rather than summarising Brad Frost great article on atomic design linked here. We will focus on atoms and molecules which will be the most reusable pieces in your Design System. Atoms are the basic building blocks, these will be style versions of basic HTML elements. Molecules are where we start to see the reuse.
As an example let's take the Shortcut story card.
As atoms, you have the header, text, buttons (separately as they all have separate functionality and style), the colored left card adornment and then the outer card itself. To become something functional, they are combined as a molecule. Molecules can be complex but they are relatively simple combinations of atoms built for reuse.
Things to consider when developing a Design System
- When you have your components built as reusable pieces you need to do give them some important documentation to stop it becoming a fruitless effort.
- Document the component’s name and describe what it is.
- Give examples showing variations, states, and other dimensions. This works best with real samples or rendered code. You can then make your documentation interactive.
- It is recommended to have guidelines when to use, do’s and don’ts. If possible you should include guidelines for interactions or any noteworthy tips on usage.
- For ease of reuse your code reference detailing the code’s API (such as Props) and it’s usually helpful to have raw code samples so developers can copy/paste a working sample into their code.
For developers, tools like Storybook are a great way to quickly start and document your component libraries. It works with React, Angular and Vue which means no matter your creed, you should be able to build something very scalable with very little effort.
The screenshot is taken from Wix’s Storybook
The really nice thing is Storybook can be exported as a static website so your whole organization can see the components you have built. this will become a documentation hub for developers and help designers when they're looking to see what the developers are currently using.
Other useful libraries (and alternatives to Storybook) to help when considering a Design System:
In my next post, I will show you how to get started with Storybook so check back soon!
Build what’s next
