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

Start here

• 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.

Accessibility

• Research about accessibility
• Implement WCAG Guidelines
• Automated test: Lighthouse,WAVE Web Accessibility Evaluation Tool

Tools

• Can you afford starting from scratch?
• You can choose open-source library: Reakit, Reach UI
• Language: JavaScript, React, TypeScript, …
• Javascript library: React, Angular, Vue, …
• CSS: Vanilla CSS, CSS Modules, Emotion, …
• Design tokens template: Theme UI

Components:

• 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

Working together

• 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