Designs systems are an incredible tool for creating reusable, systemized, and cohesive designs for any application. Companies like Airbnb, Uber, and IBM have drastically revitalized the way they design products by utilizing the collection of reusable components and designs standards that change the pace of innovation and creation.
While many companies have brand guidelines and other documents that they consider “Design Systems”, these small collections of components or code snippets, they’re missing many of the elements that make Design Systems so powerful.
What is a design system
A design system is a collection of reusable UI components, code snippets, design guidelines, philosophies, and other digital assets guided by clear standards that help companies design and build products.
It’s a massive knowledge base that’s part UI and part documentation to help designers and developers become familiar with a companies digital design language.
Like a collection of lego blocks, a design system contains all the components necessary to put together an infinite number of UI designs. However, it’s more than just building blocks, it’s also the “why” of these UI elements that make this system such a fantastic tool.
Why have a design system?
Design systems are the culmination of the entire product team. Engineers, designers, product managers, and execs all work together to come to a consensus on how things ought to be designed.
A design system serves as a single source of truth for the entire product team on not just how things look, but how things are integrated and work together. Design systems help ensure products are consistent, modular, testable, and maintainable.
In practice, design systems help programmers use more modular and reusable component structures. Designers can whip up landing pages faster by reusing pre-designed UI components. Marketers have a source of reference for which images and fonts should be used.
Broken down, you can get a few key benefits from design systems:
- Consistency — With a design system, it’s easier to create more consistent designs. Instead of thinking as a page as a new design, it can be visualized as a set of components.
- Higher Quality — More consistent designs are higher quality. It’s also easier to independently snapshot test component libraries, and QA testers can easily monitor components as they’re built and changed.
- Better Designer to Developer Communication — When design is a single source of truth, the vocabulary to talk about designs is already predefined. A button isn’t just a “purple button”, it’s the “Default medium primary button”. More exact language makes it easier for the team to talk about pages among each other.
- Faster Design Process — With a design system built out, designers will have standards and components already defined for building new products, they can just be implemented.
- Higher UX Focus — By not having to worry about all the details of designing and implemneting components and instead just reusing assets, designers and developers can focus more on the UX aspects of the product.
Examples of Design Systems
Thankfully, many large companies have their design systems publically available for anyone to look at. This means you can see some best practices of large companies in their designs.
- Material Design — First designed by Google, Material Design is one of the oldest and most popular design systems out there.
- Atlassian Design System — A great complete design system used by Atlassian for their products.
- Polaris — Shopify’s design system.
- Carbon —IBM’s design systeem
- Human Interface Guidelines — The design system used by all of Apples products
- Nachos —Trellos design system.
- Grommet — HP’s design system.
Creating a Design System
People often create design systems at two stages, either when they first start a project or when they’re working with an existing product. Either way, the process is quite similar but I’ll provide some pointers for both.
For new projects you’ll first want to look at some visual samples. These can be initial UI elements, mockups, or other designs that you’re taking inspiration from. Using these assets, you can start preparing the actual design system.
With these visuals in mind, use the Atomic Design Principles to begin work. Start with particles like colors, fonts, and shapes, them move to atoms like buttons, checkboxes, inputs, radio buttons, etc. Finally, compose some molecules like search boxes or date pickers, then organisms like navigation sidebars or menus.
Keep in mind a design system shouldn’t just encapsulate what an element looks like visually or in code, it should also be a description of why components are designed how they are.
For existing products, make an inventory of all existing UI elements. You’ll probably catch some that can be combined into variants, such as different types of buttons, to reduce the total number of components out there. Then, ensure all these elements are visually consistent and well-documented.
Building a design system can be a large investment, but it’s one that pays massive divdends down the road in increasing the quality and speed of products your team builds.
If you’ve built your design system, I’d love to see it! Feel free to leave it in the comments or drop me a link :)
Keep in Touch
There’s a lot of content out there and I appreciate you reading mine. I’m an undergraduate student at UC Berkeley in the MET program, a software developer at Playground, and a young entrepreneur. I write about software development, startups, and failure (something I’m quite adept at).