03.3.6 · Skill in UI design

Design systems

Reusable components and rules that keep an interface consistent.

A design system collects tokens, components and usage guidelines in one place. It speeds up building and keeps the product coherent as it grows. Engineers usually maintain the code side of it, so they shape how well it works.

Your status · Design systems

Not startedLearningComfortable

Saved in this browser only. It colours this skill's tile on your map.

Resources

bookGo deeper
Atomic design ↗
Brad Frost · 2016 · free online book
The book that shaped how teams build design systems, free to read online.

Tools

ToolOpen source
Storybook
storybook.js.org ↗
Open-source workshop for building, documenting and testing UI components in isolation.
ToolFreemium
Figma
figma.com ↗
Collaborative interface design and prototyping in the browser, the industry default.