https://zenn.dev/ubie/articles/7a6413af237eae

こんにちは、Ubie株式会社でデザインエンジニアをやっているtakanoripです。

Ubieではデザインのクオリティと生産性向上のためデザイン生産基盤の整備に力を入れています。 今回その一環として開発したデザイントークンをnpmパッケージとして公開しました。（現在はColorのみ。）

開発経緯

Ubie Design Tokens開発以前からデザイントークンのようなものは存在しており、CSS Variablesとして実装されていました。しかしユースケースを想定せず作った変数があったり定義が細かすぎたりしたことで「どの変数をどういう場面で使用すれは良いかわからない」という問題が発生していました。

そこで変数の定義を見直し、より実際のデザインに即したデザイントークンを策定するとともに、プロダクトごとの実装差異をなくすためのライブラリの開発に着手しました。

Colorの定義

Ubie Design TokensではPrimitive ColorsとSemantic Colorsの2種類を定義しています。

Primitive Colorsは色に機械的に名前を付けたもので、ベースになる色セットです。

Semantic Colorsでは色のユースケースごとに名前を付け、Primitive Colorsで定義された色を参照しています。名前だけで利用用途がわかるよう命名しています。

Primitive ColorsとSemantic Colorsを分離することで、色の利用用途を明確にできるだけでなく、変更も容易になりメンテナンス性が向上すると考えています。 例えばテキストの黒色のみを変更したい場合、Primitive Colorsのみ定義していた場合はテキストの色として使われている黒を検索して置き換えなければなりませんが、Semantic Colorsも定義されていれば参照先の色を変更するだけで完了します。

実際のCSSの定義は次のようになります。

:root {
  --ubie-blue-700: #263f94;
  --ubie-blue-500: #3959cc;
  --color-primary: var(--ubie-blue-500);
  --color-primary-darken: var(--ubie-blue-700);
}

技術構成

Ubie Design Tokensの技術構成は次のとおりです。