Design Systems
intermediateTopic 5 of 10 in UI/UX Design
What it is
A design system is a collection of reusable components, patterns, and guidelines that keep a product's design consistent. It includes a component library, colour tokens, typography scales, spacing rules, and documentation.
Why ui/ux design developers need it
Without a design system, every new screen looks slightly different. Design systems save time, ensure consistency, make handoff to developers smoother, and scale design across large teams.
What to learn
Design tokens: colours, spacing, typography, shadows
Component architecture: atoms, molecules, organisms
Building a component library in Figma
Naming conventions and documentation
Theming: light/dark mode support
Handoff to developers: specs, assets, code mapping
Maintaining and evolving a design system
Practice project
Mini Design System
Create a design system in Figma: define a colour palette, a type scale, a spacing scale, and build ten reusable components (button, input, card, modal, avatar, badge, dropdown, toast, tooltip, pagination) with variants.