%% generate tags start %% #software-engineering/react %% generate tags end %% #software-engineering #design #software-engineering/react/design-system ## What is a Design System? A design system is a collection of reusable components and guidelines used to design and build digital products, like websites or apps. It ensures consistency and efficiency in design by providing a common language and standards for developers and designers to follow. > [!info] read more > 1. [Course: Introduction to design systems – Figma Learn - Help Center](https://help.figma.com/hc/en-us/sections/14548397990423-Course-Introduction-to-design-systems) ## What is a Good Design System ✅ least effort to start using ✅ more examples ✅ very compatible with each other ✅ very easy to style and change [Design System Checklist](https://www.designsystemchecklist.com/) ## Examples of Design System see [[react UI components library]] ## How to Build a Design System The truth is, building a design system from scratch is very difficult. To understand the basic element of a design system, you can check out [[Everything I Know About Style Guides, Design Systems, and Component Libraries#What is a Design System?]]. ![[Everything I Know About Style Guides, Design Systems, and Component Libraries#What is a Design System?]] ## How to use a design system > The short answer is that basically we don’t build our own design system. The thing that we should do is that we found a design system that we trust and build around it. Therefore we need to learn [[how to use a design system]]. ## Design system resources