Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

Ami Shiratori
October 18, 2024

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

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

Ami Shiratori

October 18, 2024
Tweet

More Decks by Ami Shiratori

Other Decks in Design

Transcript

  1. シームレスな連携を実現するデザイントークンの設計と構築 デザイントークン • 小さく、再利用可能なデザイン決定を表す名前と値のペア • 色、フォントスタイル、スペーシング、サイズなど分解不可な最小の単位 • 目的 • 一貫性の確保:同じデザイン決定をプロジェクト全体で一貫して使用できるようにする

    • 効率的な更新:デザインの変更が必要な場合、値を変更するだけで、 関連する全てのUI要素に自動的に反映される • 開発とデザインの連携:デザイナーと開発者が共通の言語を持つことで、 コミュニケーションを円滑にする 4
  2. シームレスな連携を実現するデザイントークンの設計と構築 デザイントークン • 世界中で広く採用されている手法で、各社デザインシステムでそれぞれの取り組みが公開されている (ex. Salesforce, Atlassian, Adobe, GitHub…) •

    デザイントークンのW3Cコミュニティーグループがあり、デザイントークンの標準化と普及を目指した 活動をしている • 標準仕様の策定を進めており、仕様ドラフトを公開している • プラグインやライブラリなどのメジャーな関連ツールの関係者が積極的に活動している • メジャーな関連ツール(ライブラリやFigmaのプラグインなど)もコミュニティグループの仕様ドラフト に則るように改善されている • 具体的なメソッドや取り組みは常に進化しているが、根底の部分は標準化の動きが進んでいる 5
  3. シームレスな連携を実現するデザイントークンの設計と構築 共通言語としての信頼性(Single Source of Truth) 14 • Figmaプラグイン「Tokens Studio」を使用し、トークンを追加・編集 •

    JSONファイルを吐き出し、GitHubで管理( Single Source of Truth ) • デザイナーもデベロッパーもこのファイルを元にトークンを利用する • デザイントークン専用エディタのような役割 • デザイントークンコミュニティグループの仕様ドラフトに則ったデータが作られる