Introduction
At a high level a design system is a collection of principles, code, guidance, and community. It’s a living product that helps teams build websites and apps faster, ensure a baseline of quality, share knowledge, offer help.
Design systems help teams focus on important problems specific to their team and their user’s needs, rather than figuring out how to reinvent a mobile menu or an accordion.
What a design system is
Section titled “What a design system is”Design systems come in different shapes and sizes, but they all essentially contain the following:
- Principles. The “why” in this entire effort. It’s your north star for your roadmap and all future decisions.
- Guidance. What it is and when/how to use the design system.
- Tokens, Components, and Patterns. Something you can use to build some thing.
- A design library or kit. For designers to adopt and use to create without needing to compile code.
- A community (eventually). Where you’ll support and others can contribute ideas, research, code, and guidance. This is where you’ll also support other teams and grow your design system.
You can grow your design system organically and start where your strengths lie, like a style guide, component library, or a design file. But if you want to evolve to a design system, you need to prioritize the other items before launch. Even if they’re just basic implementations.
What a design system isn’t
Section titled “What a design system isn’t”- A collection of colors and fonts. That’s a styleguide and while it is important for maintaining consistency, it serves as more of a theming layer.
- A design file. This can be a good starting point, but a design system is a sum of parts. It’s the same issue as if you only shipped code. No one outside of devs would be able to see or use it.
- Component libraries. While useful and ensure some form of consistency, there’s no guidance on when or when not to use components.
Systems-level thinking
Section titled “Systems-level thinking”Since a design system is a collection of parts, to be successful you’ll need systems-level thinking. This means that with your work you’ll have to think about how all of the pieces are connected.
TK
Aligning goals
Section titled “Aligning goals”Aligning design system goals to company/agency and audience.
Value of a design system
Section titled “Value of a design system”TK
Layers of a design system
Section titled “Layers of a design system”TK
Pace of a design system
Section titled “Pace of a design system”TK
Principles
Section titled “Principles”TK
Further reading
Section titled “Further reading”TK