Design System Roadmap
roadmap.sh's step-by-step map of what goes into a design system: the design language, tokens, core components, tooling and documentation. Useful for designers and developers deciding what their own system needs and what it can skip.
Roadmap
Web Development
roadmap.sh
Intermediate
Free
What it is
The Design System roadmap on roadmap.sh is a free, interactive diagram of the work involved in creating and running a design system. It walks through the decisions a team makes, from terminology and the visual language, through design tokens and core components, to tooling, documentation and how the system is maintained. Each node opens a short explanation with links for further reading.
Who it is for
It suits two groups. Product designers who have built components in Figma and want to understand how a full system fits together, and frontend developers who are turning a design into a shared component library. It is intermediate: it assumes you already know what components, colour and typography are.
How to use it
A design system is easy to over-build. Use the roadmap as a menu, not a to-do list:
- Read it end to end once to see the full scope.
- Mark the parts your product actually needs now: usually tokens for colour, type and spacing, a handful of components and a page of documentation for each.
- Leave the rest, such as multi-brand theming or a dedicated governance process, until a real need appears.
Pair it with a real system to study, such as Material Design 3 or the GOV.UK Design System, so the abstract nodes turn into concrete examples.
Is it worth it?
As a free planning aid, yes. It gives you vocabulary and a checklist that many teams only learn after years of mistakes. It will not teach you to design components or write CSS; for that, use Figma's own courses and a CSS course.
Free or paid?
Free to view. Signing in lets you track progress. Check roadmap.sh for any extra features and their current terms.
What you can do after
Explain the parts of a design system to a team, choose a sensible first scope, and plan tokens, components and documentation in an order that makes sense.
Common questions
Do small teams need a design system? They need consistency, which can start as a few tokens and components. The roadmap helps you pick that small start.
Is this for designers or developers? Both. The best systems are built by designers and developers together, sharing one set of tokens.
Ready to start?
Opens on roadmap.sh in a new tab.
Stuck on something specific?
Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.
Follow along
New writing, resources and project ideas land here first.