#Building a design system
"Steal like an artist", where you can. There are lots of open design systems out there that we can borrow from. Additionally, there are lots of good tools that we can use.
Even things like Bootstrap can be useful to steal from - we can find common patterns that many web-apps use and build reusable components to build them out for our companies.
We can't know where we are going until we know where we are and where we have been. Before starting, get an idea of where you are, what pages you have, what components they use, and what makes sense to abstract into a design system.
A design system is a living breathing collaboration between designers and developers. As such, it can and should grow and evolve - which means getting started and letting it change/evolve.
Some ideas of sections:
Once the audit is done, begin to build out a component library. For each component, include documentation and standards. Remember that when not to use a component is just as important as when you should use it.
Our design system offers [kit scope] released as __[kit outputs] and documented at [kit doc site] produced by [people] in order to serve [products] products and experiences.
As the design system grows and evolves it enables us to work in interesting and new ways.
One great thing about a design system is that it can live out in the open. It's a great way to represent your Product/Engineering brand and give back to the community.
DesignOps (also called div-ops!), much like DevOps, is a fast-growing field. A design system is the first step in implementing a DesignOps team.
When you’re creating a bespoke Design System for a specific product, you have the opportunity to not just group common UI elements together, but to actually represent your core product concepts at many levels. I call this a Full Stack Design System. [Link]
Get something built sooner, rather than later.
GitHub’s design system, Primer, was being revamped internally and privately. Doing so, Diana said, was in part because her team faced Imposter Syndrome comparing Primer to the systems of matured and larger organizations like AirBnb’s DLS, Shopify’s Polaris, and the US Web Design System. Primer felt unpolished in comparison. Many components were deprecated. [Link]
The web is massive and diverse - it is no longer enough to build webpages. Instead, we need to think about responsive and adaptive design made up of components.
We can't build a design system in a day, a sprint, or a quarter. Even starting with just a sketch file that makes the creation of new features and pages consistent is a good base.
Avoid "quick and dirty", you'll only bite yourself later. Make sure people know what is happening and get input from everyone that might touch the system. The worst possible timeline is some people using the design system and others not using it.
Have a sharable Sketch library and component library that everyone uses while working on the design system.