Tutorial約 10 分2026-08-21

Design systems from zero: variables, components, docs — in what order

Building components before variables is why most teams redo the work. Correct order: tokens, variables, components, docs.

Tokens before anything else

Fix colours, spacing and type sizes as named tokens first, then let everything reference them. Changing a theme stops meaning changing components.

Variables answer 'what changes in dark mode'. Components answer 'what does this look like here'. Mix the two and batch changes become impossible.

Put usage notes and do-not-use cases in the component description. It gets read far more often than a separate docs site.

A component library with no deprecation markers becomes something nobody dares delete from two years later.

実際の導入過程に基づく記事です。仕様が変わっている場合はご連絡ください。