シームレスな連携を実現するデザイントークンの設計と構築

Figma JapanのDeveloper community meetupにて「シームレスな連携を実現するデザイントークンの設計と構築」という題で発表した際に使用した資料です。
https://developercommunitymeetupjapan.splashthat.com/

1. シームレスな連携を実現する デザイントークンの 設計と構築 2024.10.17 1
2. シームレスな連携を実現するデザイントークンの設計と構築 2 白鳥亜美（Ami） サイボウズ株式会社 Design Technologist kintone Design System Lead K-POPとファッションが好き 自己紹介 @__amishiratori
3. デザイントークン 3
4. シームレスな連携を実現するデザイントークンの設計と構築 デザイントークン • 小さく、再利用可能なデザイン決定を表す名前と値のペア • 色、フォントスタイル、スペーシング、サイズなど分解不可な最小の単位 • 目的 • 一貫性の確保：同じデザイン決定をプロジェクト全体で一貫して使用できるようにする • 効率的な更新：デザインの変更が必要な場合、値を変更するだけで、 関連する全てのUI要素に自動的に反映される • 開発とデザインの連携：デザイナーと開発者が共通の言語を持つことで、 コミュニケーションを円滑にする 4
5. シームレスな連携を実現するデザイントークンの設計と構築 デザイントークン • 世界中で広く採用されている手法で、各社デザインシステムでそれぞれの取り組みが公開されている （ex. Salesforce, Atlassian, Adobe, GitHub…) • デザイントークンのW3Cコミュニティーグループがあり、デザイントークンの標準化と普及を目指した 活動をしている • 標準仕様の策定を進めており、仕様ドラフトを公開している • プラグインやライブラリなどのメジャーな関連ツールの関係者が積極的に活動している • メジャーな関連ツール（ライブラリやFigmaのプラグインなど）もコミュニティグループの仕様ドラフト に則るように改善されている • 具体的なメソッドや取り組みは常に進化しているが、根底の部分は標準化の動きが進んでいる 5
6. 「デザインの決定を 開発チーム全体に伝える方法論」 6
7. シームレスな連携を実現するデザイントークンの設計と構築 デザインの決定を開発チーム全体に伝える方法論 7 • デザイントークンの目的は、デザインを整理した結果を開発プロセス全体に伝えること • デザインを整理せずに、単に同じ色や同じサイズをトークンとしてまとめあげても、あまり意味がない • 意図と異なる箇所で使われても、意味がなくなってしまうのでわかりやすい概念に整理する note
8. シームレスな連携を実現するデザイントークンの設計と構築 デザインの決定を開発チーム全体に伝える方法論 8 デザイナーとデベロッパーの共通言語として、日々のデザインや開発業務で頻繁に使われる デザイントークンが開発のストレスになる状態は避けたい • デザインの変更や拡張に強い設計 • 信頼性が高く、使いやすいシステムの構築
9. デザインの変更や拡張に強い設計 9
10. シームレスな連携を実現するデザイントークンの設計と構築 変更や拡張に強い 10 • Global TokensとSemantic Tokensの2階層にする • Semantic Tokensをデザインを一緒に変更したい箇所ごとに用意する note
11. シームレスな連携を実現するデザイントークンの設計と構築 変更や拡張に強い 11 • Global TokensとSemantic Tokensの2階層にする • Semantic Tokensをデザインを一緒に変更したい箇所ごとに用意する note
12. 信頼性が高く、使いやすいシステムの構築 12
13. シームレスな連携を実現するデザイントークンの設計と構築 信頼性が高く、使いやすいシステムの構築 13 • 共通言語としての信頼性（Single Source of Truth） • デザイン業務で使いやすい • 開発業務で使いやすい
14. シームレスな連携を実現するデザイントークンの設計と構築 共通言語としての信頼性（Single Source of Truth） 14 • Figmaプラグイン「Tokens Studio」を使用し、トークンを追加・編集 • JSONファイルを吐き出し、GitHubで管理（ Single Source of Truth ） • デザイナーもデベロッパーもこのファイルを元にトークンを利用する • デザイントークン専用エディタのような役割 • デザイントークンコミュニティグループの仕様ドラフトに則ったデータが作られる
15. シームレスな連携を実現するデザイントークンの設計と構築 デザイン業務で使いやすい 15 • Token Studioプラグインからデザインプロトにデザイントークンを適用することもできるが課題が多い • 起動が遅い、常にダイアログを開いておく必要がある • ツールの学習コスト • Token StudioからFigma Variablesにトークンを書き出し、利用する • デザインプロトを開発チームに渡す際にはVariablesを通してトークンを適用する
16. シームレスな連携を実現するデザイントークンの設計と構築 開発業務で使いやすい 16 • Figmaのデザインプロトで適用されている色やサイズなどのトークンと全く同じ名前のものが使える • デザイン変更などでトークンの値が変わっても追従する • JSONファイルを「Style Dictionary」で加工 • 開発チームが複数あり、技術選定も異なる • CSS custom propertiesやTypeScript、xmlなど使いやすい形に加工して開発チームに提供 • JSONファイルに変更が検知された時に自動で再生成する
17. シームレスな連携を実現する設計と構築 17
18. シームレスな連携を実現するデザイントークンの設計と構築 シームレスな連携を実現する設計と構築 18 • 変更や拡張に強い設計（階層構造） • 信頼性が高く、使いやすい構築（Tokens Studio, Style Dictionary, Figma Variables）
19. ©️ Cybozu, Inc. 19