WHAT IS IT?
A design system is a continuously evolving single source of truth for the whole team that’s working on a project or product. It combines a UI kit, behavior and scale rules, code, and a brand book. It is a collection of reusable components, guided by clear standards, that can be assembled to build any number of applications.
HOW TO USE IT?
You can use a design system to:
- Align the foundations of a brand’s design language.
- Streamline UX processes.
- Create a scalable UI language.
- Ensure design consistency.
- Empower your team and your employees.
Once again, if you want to learn more and are interested in creating a design system, I invite you to read my article about it here.
Design Systems Checklist
- Is the design system the right tool for your use case?
- Will your company invest in design? Think about time + money investment + opportunity costs.
- How will people contribute? Define the process.
- If your company needs the design system. Make sure designers and developers are on board and aware of the design system benefits.
- Research about accessibility
- Implement WCAG Guidelines
- Automated test: Lighthouse,WAVE Web Accessibility Evaluation Tool
- Can you afford starting from scratch?
- You can choose open-source library: Reakit, Reach UI
- CSS: Vanilla CSS, CSS Modules, Emotion, …
- Design tokens template: Theme UI
- How will you name your layers? Naming should be simple.
- Decide about your design tokens.
- Make sure new components are easily repeatable
- Test every component (+ every build)
- Write documentation for every component
- Add description where to use each component
- What is the scope of our current component library?
- What is the scope of our design systems library?
- What types of components will we create?
- Where will our library live (be continuously updated and available to everyone in the company)
- Which design tool?
- Think about the most repeatable tasks and optimize it
- Who will be responsible for communication between designers and developers?
- Share useful “optimization hacks” for using design system