Wait… isn't my design system a shared library in Figma?
What is a Design System?
My take on some commonly asked questions
A design system is the sum of connections we build to craft products together. By honing this collection of methodologies a team can design, test, and deliver applications with efficiency and scale.
A design system is not a feature in an application or a file sitting on a server.
Four Elements of Design Systems
When I look at most successfully implemented design systems I see some combo of these four ingredients. The first being the "who" and the last three being the "how".
A group of people with different functional expertise working toward a common goal. It may include people from all levels of design, engineering, product management, etc.
A collection of reusable design elements (components) used to assemble component based designs. Also known as a component library or pattern library.
Component Based Development
Building designs out of pre-made elements (components), which are produced segments to be used as building blocks for your application.
A collection of information and resources that covers all aspects of your product design. Documentation usually includes all essential implementation details and design decisions that your team and stakeholders have agreed on.
Coders & Designers First
A design system must serve two core roles before all others; product designers and developers. These two collaborate to develop…
a shared visual language (UIKit)
a shared process for translating that visual language into code (Documentation)
Think of a UIKit as an approved set of patterns held in design software. It's the visual contract between the designs and code. Documentation explains how to use and translate the UIKit.
Then Cross-Functional Teams
Once the two core roles establish their contract it can extend to roles like product management, marketing, business development, etc. As more of the organization speaks the same language they can also communicate and create new patterns for the UIKit, the documentation, and other processes.
Cross-platform consistency and brand consistency are synonymous.
The more inconsistency there is with your design, the more inconsistency there will be with your underlying code. With every different version of page elements or templates, there’s a higher likelihood of unnecessary code loading to render the design elements.
By minimizing unnecessary excess, you’ll be better optimized for usability while gaining performance benefits through faster rendering of content.
The less you have to start from scratch every time you start a new design, the more efficient you will be able to design, build, and launch features quickly.
It will be far faster and easier to get approvals if your designs are aligned with existing standards.
Single Source of Truth
A centralized reference point to account for the most up-to-date standards. This resource is easy for EVERYONE to find, comprehend quickly, and put to use.
It’s the place where you find up to date guidelines and resources.
UX Gets Surfaced
I took an immersive UX course and I learned how to research and generate some great artifacts but, you know… startups. Artifacts often disappear into a Wiki or shared archive.
A good design system includes UX artifacts within the documentation itself.
Product Management Wins
Poor user experience → Low user satisfaction, product adoption & loyalty. It's the PMs job to guard against these problems and to sharpen designers through feedback. A good design system makes it easy for PMs to deliver feedback.
I don't know
I can't tell anyone how to run their business but there's some questions that I think about when making the decision.
Is my team increasing size dramatically?
Do we have rebrands or theme changes coming up?
Are we building new features or products with speed, brand consistency, and resource management as concerns?
I feel like answering "yes" to these questions makes any team a good candidate for some sort of product design system.
Shoot me a question!
Click the Contact button and send me any questions or concerns you may have. 😀