Material Design 3 要点まとめ #4 Design tokens

Material Design 3 ガイドラインの要点をまとめたものです。
第4回はDesign tokensの章。M3の目立った新概念のひとつ。スタイル指定の構造化が大きく進みました。

MDが初めて提唱した概念ではありません。Salesforceがオリジネイターという噂です。

Design tokens – Material Design 3

要点

・デザイントークン：スタイルの「値」を共通化する
・現在トークンが使えるのはカラーとタイポグラフィー
・複数のプロダクトをまたいで一貫性を保つことができる

デザイントークン：スタイルの「値」を共通化する

• ハードコードされた「値」の代わりにデザイントークンでスタイルを定義する、という概念。

• デザインシステムによるプロダクトの構築、メンテナンス、スケーリングなどの作業を効率化できる。

• コードのような名前（例：md.ref.palette.secondary90）に値（例：#E8DEF8）が関連付けられている構成。値の内容は色、書体、数値、別のトークンなど。

現在トークンが使えるのはカラーとタイポグラフィー

• MDでは現在、「カラー」と「タイポグラフィ」のトークンが実用化されている。

• コンポーネント、高度（elevation）、サイズのためのトークンは開発中。

複数のプロダクトをまたいで一貫性を保つことができる

• トークン自体はプラットフォーム（OSなど）に依存しないフォーマットだが、プラットフォーム固有のコードで使用することができる。つまり、例えばOSが異なる別のプロダクトに共通のトークンを適用することができる。

• スタイルの更新をプロダクト全体や、複数のプロダクト群に一貫して伝搬させることができる。

• MDのコンポーネントも、トークンを軸に統一できるようになった（今まではプラットフォーム固有のコンポーネントライブラリが提供されていた）。