デザイントークンのW3Cコミュニティグループと仕様ドラフト、関連ツールの利用について
今回はデザイントークンのコミュニティグループ、仕様ドラフトの動きと、その中で説明されているデザイントークンの役割に焦点を当てて紹介します。そしてデザイントークンをより効果的に活用するための便利なツールについても紹介します。
Design Tokens Community Group
デザイントークンは色やスペースなどデザインと実装においてそれ以上分解できない核のような存在です。このデザイントークンを利用するために仕様策定をするコミュニティがDesign Tokens Community Groupです。
Design Tokens Community GroupはW3CのCommunity Groupに2020年頃に設立されました。W3CのCommunity Groupはオープンに議論をしていくことを目的とし、W3C COMMUNITY CONTRIBUTOR LICENSE AGREEMENTに同意した人であれば参加が可能です。このDesign Tokens Community Groupはデザイントークンの仕様についてさまざまな人が議論する場として設けられています。
W3Cのコミュニティグループ
GitHub
Webサイト
このDesign Tokens Community Groupの活動メンバーにはGoogle,Salesforce,Atlassianをはじめ、FigmaやSketchなどのツールに関わる人たちが含まれています。
Design Tokens Community Groupの活動意義や範囲については次のリンクで参照できます。
主に次の3つについて活動していくことを定めています。
- Enabling sharing color palettes or themes between multiple design tools
- Allowing design system tooling to share a common language with other parts of the design process
- Lowering the bar for design and development teams to deploy design tokens in their workflows
*翻訳
- 複数のデザインツール間でカラーパレットやテーマの共有が可能にする
- デザインシステム・ツールがデザインプロセスの他の部分と共通言語を共有できるようにする
- デザインチームや開発チームがワークフローにデザイントークンを導入するハードルを下げること
デザイントークンはいろんな部分で参照されるので、デザインツールや実装間でも共有できるようにしたいという意図があります。先述した活動メンバーにツールに関わる人たちが入っているのもこれらが大きな理由になってきます。
Design Tokens Community Groupが策定している仕様ドラフト
Design Tokens Community Groupによって仕様ドラフトが策定されており、現在(2023年3月)も更新され、フィードバックを集めています。
先述したとおり、Design Tokens Community GroupはW3C Community Groupの位置付けなので、HTMLやCSSのような正式なW3C Standardではありません。しかし、ここからフィードバックなどのプロセスを得て、標準化する可能性があり、さまざまなツールがこの仕様に合わせてツールを開発している、もしくは開発を準備しています。
仕様ドラフトでは次のようにデザイントークンを位置付けています。
Design tokens are a methodology for expressing design decisions in a platform-agnostic way so that they can be shared across different disciplines, tools, and technologies. They help establish a common vocabulary across organisations.
*翻訳
デザイントークンは、異なる分野、ツール、技術間で共有できるように、プラットフォームにとらわれない方法でデザインの意思決定を表現するための方法論である。また、組織間で共通の語彙を確立するのに役立ちます。
Design Tokens Community Groupのウェブサイトには用語集があり、次のように書かれています。
The single source of truth to name and store a design decision, distributed so teams can use it across design tools and coding languages.
*翻訳
デザインの決定事項に名前を付けて保存するための単一の真実の情報源で、チームがデザインツールやコーディング言語を超えて使用できるように分散されています。
デザイントークンはデザインや開発、どちらだけのためのものではなく、デザインと開発の両方で使える必要があると述べられています。
デザイントークンはname/ valueのペアで表現するようになっています。
color-text-primary: #000000;
font-size-heading-level-1: 44px;
参照元：https://tr.designtokens.org/format/#design-token
これらを実現するためにDesign tokenはJSONに準拠したファイルになり、Media typeやFile extensionsの推奨は次のようになります。
- Media type
application/design-tokens+json- 参照元：https://tr.designtokens.org/format/#media-type-mime-type
- File extensions
- .tokens
- .tokens.json
- 参照元：https://tr.designtokens.org/format/#file-extensions
そのほかにもColorなどがどのようにデザイントークンのJSONで表現されるべきなのか詳細が載っているので一読してみると面白いです。
最近のアップデートはデザイントークンでfont-weightやNumber、pxやremの単位を定義するDimensionなどが追加されており、各種ツールもこれらに沿ったフォーマットのアップデートが想定されます。
デザイントークンの関連ツール
デザイントークンの仕様ドラフト周りを把握すると関連ツールについても理解が深まります。ここからはデザイントークンを便利に扱うことができる関連ツールを紹介します。筆者がFigmaを普段使っているのでFigmaが中心です。
Tokens Studio for Figma(Figma Tokens)
Tokens StudioはFigmaのプラグインです。Figma上でデザイントークンをいじる際に便利な機能を提供してくれています。
このプラグインはGUIでデザイントークンを管理し、最終的にはDesign Tokens Community Groupのドラフト仕様に近いJSONを吐き出すまでの役割を果たしてくれます。また、GitHubの同期も可能なので、FigmaからJSONを吐き出し、GitHubへPRの作成を行うこともできます。有料プランに入らずともかなり便利なものになっています。
詳しい使用方法は、次の記事が参考になると思います。
GitHubの同期やGUIでの管理が便利なポイントですが、プラグインを管理する必要があり、関わる人全員のFigmaにインストールされている必要があります。しかし手書きやFigma APIでも最終的な成果物がTokens Studioが吐き出すようなJSONであれば、開発に使用する形式することは可能です。
次のようにTokens Studioはドラフト仕様の追加に追いついていない点もあります。
最終的に吐き出されるJSONはドラフト仕様を参照しているので、このJSONさえあればツールを移行できるのが安心ポイントです。
Style Dictionary
Style DictionaryはデザイントークンのJSONを読み込んでSass、CSS、iOSやAndroidなどの各プラットフォーム使えるような形式にしてくれるものです。実はまだ次のようにDesign Tokens Community Groupのドラフト仕様に準拠したJSONの読み込みと吐き出しに対応していません。v4で追加が検討されており、今後ドラフト仕様に合わせた読み込みと吐き出しに対応されることが予想されます。Tokens Studioが吐き出すJSONは一定のものを読み込めるので、もし不具合にあたったら思い出す程度でよいです。
Style Dictionaryの扱いについてはこちらの記事が参考になると思います。
Storybookプラグイン
デザイントークンのCSSを読み込んでStorybookに一覧化してくれるプラグインです。
こちらでも仕様ドラフトどおりのJSONを読み込み、Storybookで表示するIssueがあります。
そのほか
上記のような有料ツールもあります。Figmaと連携して、デザイントークンの一覧、ドキュメント、Style Dictionaryのように各プラットフォームへの変換を担ってくれるようです。
有料なのでまだ使用したことがないので、使用したことある人の話を聞いてみたいです...。
まとめ
Design Tokens Community Groupによるドラフト仕様の策定は進んでいるが、まだ周辺ツールの動きは完全に追従されていません。しかし、デザイントークンを使用してツールを利用する際に覚えておくと、さまざまな情報を拾うことができ、今後ドラフト仕様が標準仕様になることで、さらにツールが登場することもあると思うので、デザイントークンを扱う際に覚えておくといいと思います。
また、Figma APIや手動でデザイントークンのJSONを用意するときも、ドラフト仕様に近いものになっていると、ツールを使用するときにスムーズに移行できる未来がくると思うので、覚えておくといいでしょう。
Discussion