Figmaの基本とデザイントークンについて
本記事は、フロントエンジニアを対象としています。
- デザイナーがFigmaを用いて、どのようにデザインを構成するのか
- Figmaで生成したデザイントークンをどのように共有するか
という内容を荒く理解し、連携/協業の仕組みを模索することに役立てます
Figmaでの「コンポーネント」の基本
フレーム状態 [1]
オートレイアウトを適用した [2]
コンポーネント化された [3]
バリアントが追加されたコンポーネント
インタラクションが追加されたコンポーネント [4]
インスタンス化されたコンポーネント [5]
プレビュー（プロトタイプ）
コンポーネントは、ボタンやアイコンなど、繰り返し使用するデザイン要素の定義です。インスタンスは、そのコンポーネントから生成された実体です。
バリアブル
↓ CSSに記述する値(hex, px, rem ...etc)で指定している
プリミティブな指定
バリアブルの定義と利用
バリアブル(=変数)として定義すると、一貫性が高まります
バリアブルの定義 [6]
バリアブルでの指定
構造化されたバリアブル
デザイントークンとしての実際の運用を考慮して構造化する
デザイントークンは、ウェブサイトやアプリのデザインシステムにおいて、色、余白、フォントサイズなど、デザインの基本要素を定義し、名前をつけて管理する仕組みのことです。
意図や目的は上記のとおりですが、その具体的な手段としてDesign Tokens Format Module (草稿)(JSON)が提起されています。
Design Tokens Format Module に従い、例ではcolor/(colors/のほうがいいかも)階層を持っています
定石としては、プリミティブな指定と、意味的(セマンティック)な指定に分けるコンセプトがあります。
例としてプリミティブ→token、セマンティック→semanticTokenとしています
プリミティブな値を格納するバリアブルtoken
セマンティックな指定を行うためのバリアブルsemanticTokentokenを参照する
semanticTokenを指定して利用する
デザイントークンの書き出し
Figmaで定義したバリアブル(=デザイントークン)を、フロントエンドで利用できるJSON形式で書き出します。
例えば Panda CSS では Design Tokens Format をプリセットやテーマとしてそのまま組み込めます [7]。
プラグイン : Export Filterd Valiables
See : Export Filterd Valiables
プラグイン : Export Filterd Valiables の例
プラグイン : Token Studio for Figma
まとめ
- デザイナーがどのようにコンポーネントを作成するかを学びました
- Figmaにおけるデザインに関するプロパティ (=バリアブル=デザイントークン) の定義方法を学びました
- デザイントークンとしての共有方法を学びました
Discussion