Tokens Studio(Figma Tokens) で小さくはじめるデザインシステム

📝 はじめに

こんにちは犬です。
デザインシステムをはじめる上で、 Figma の神プラグインを見つけたので共有します！

わたしが携わっているプロジェクトでは、エンジニアとデザイナーの双方向のコミュニケーションツールとして Figma Tokens を採用しています。

📝 Figma本体 だけでは実現が難しい色の管理手法

Figma と フロントエンド実装時の色の管理については以下のように取り決めました。

# 色の定義と利用方法

1. Primitive colors を定義
ここで定義した色をサイト全体で使用する。
※ 定義はするものの、全ての色をサイト全体で利用するとは限らない。

基本色（赤、黄、青、、、など）からアルファ値や彩度、明度を機械的に算出して全カラーパレットを作成。機械的に出した色に微妙なものがあった場合は微調整する

Primitive colors の例

red.100    orange.100    blue.100   orange.100   green.100
red.200    orange.200    blue.200
red.300

2. 1で変数として切り出せる / 意味を持つ色は Semantic colors として別途定義する
例: primary、 secondary、 text、 border、 success、 error、 warning、 danger

→ UI コンポーネントの色情報は Primitive colors と Semantic colors から構成する

このようにすることで Primitive colors の red.100 が #f00 から #e00 に変更になったとしても、値を参照している Semantic colors は修正する必要がありません。^[1]

しかし、色同士を Alias として参照し紐付けるような色の管理は、デフォルトの Figma 本体の機能だけでは実現できません。

これを解決するのが Figma Tokens でした。

-> 修正: Local variables の機能で実現可能となりました。
@see: https://help.figma.com/hc/ja/articles/15145852043927-バリアブルの作成と管理

📝 Figma Tokens とは？

• Figma の plugin
• 色、タイポグラフィ、間隔、大きさなど、デザイントークンを定義して使用できる
  • トークンの定義時、値に ✕ や ÷ のような演算子を使用できるため値を動的に算出可
    • fontSizes.h1 = {FontSizes.h2} *2
  • 他のトークンを参照して、セマンティックデザイントークンを作成可
    • colors.primary = {color.red.500}
• デザイントークンは JSON ベースで吐き出される
• ボタンひとつでデザイントークン（JSON）を 指定 GitHub リポジトリに push し
  Pull Request まで持っていける（ここが神だよ、 Figma Tokens ✨

デザイントークンとは？
デザインシステムにおいて最小単位のスタイルを定義するものです。
この記事中では、色情報やタイポグラフィ、角丸の大きさなど、デザイン要素としての細かなルールセットを指します。

📝 Figma Tokens で出来ること

1. デザイントークンの管理

サービス内で利用している color や font、 radius などのデザイントークンは、
Figma Tokens プラグインに登録することで、確認、編集、デザインデータに反映することが出来ます。

トークンの定義	一覧の確認、使用

現在の version 110 で利用可能なトークングループは以下の通りです。

グループ名	用途 / 説明
Sizing	指定の大きさを定義・適用できる > 部分適用可能プロパティ（右クリック）: width, height
Spacing	Auto layout の space (gap, padding) 定義・適用できる > 部分適用可能プロパティ（右クリック）: Gap, All, Top, Ritgh, Bottom, Left</span>
Color	色を定義適用できる > 部分適用可能プロパティ（右クリック）: Fill, border
Border Radius	角丸を定義・適用できる > 部分適用可能プロパティ（右クリック）: All, Top Left, Top Right, Bottom Right, Bottom Left
Border Width	境界線を定義・適用できる > 部分適用可能プロパティ（右クリック）:無し ※ 公式の Figma プラグイン API が border の部分適用をサポートしていないため、Figma Tokens プラグイン側も未対応。 （そのうちアップデートで対応されるハズ。）
Opacity	半透明効果を定義・適用できる
Box Shadow	シャドウ効果を定義・適用できる
Typography	タイポグラフィセット（Font family, FontSize, Font weight, Lineheight...等 ）をまとめて定義・適用できる
Font Family	フォントの種類を定義・適用できる
Font Weight	フォントの太さを定義・適用できる
Line Height	行間を定義・適用できる
Font Size	フォントの大きさを定義・適用できる
Letter Spacing	文字間の幅を定義・適用できる
Paragraph Spacing	段落と段落の幅間を定義・適用できる
Composition	有料機能なので分からない ＼(^o^)／
Other	上記以外の項目を自由に設定して定義・適用できる

refs: https://docs.tokens.studio/tokens/available-tokens

2. Figma のかゆい部分に手が届く

figma 本体だけでは、 border-radius のようなプロパティの場合、値を毎回入力してデザインデータに適用する必要があります。このような少し手間な作業も、デザイントークンとして登録しておけばワンクリックで自由自在に適用できます。

デザイン経験の無いエンジニアさんも、Figma Tokens に登録されているスタイルセットを適用してしまえば良いので、シンプルなデザインの修正なんかは問題なく行えます。
また、普段 Figma を使用しているデザイナーさんも、よりスピードを出しつつ一貫性のあるデザインを実現することが可能です。

3. document 機能

Figma Tokens に登録したデザイントークンには、名前と値、その説明を記入することができます。
これらのプラグイン上で登録/編集した情報は、 Figma のデザインに反映でき、自動更新されるドキュメントとして使用することが可能です。

https://docs.tokens.studio/tokens/documentation-tokens

ドキュメント機能は、一つ一つの要素が値にリンクするように一度登録する必要があり手間ではありますが、登録さえしてしまえば 後は勝手にプラグインの値に同期して更新されます。
そのため、ドキュメントと JSON が乖離することはありません。

4. デザイントークン（JSON）を sync する

編集/更新したデザイントークンを GitHub のような指定リポジトリに push , pull し、
更に Pull Request を作成することも可能です。

Pull Request での変更内容をデザイナーとエンジニア双方で確認するフローを作れば、
エンジニア側も常に最新のデザイントークンをキャッチアップすることが可能です。

👩‍💻 Figma Tokens と GitHub リポジトリを連携する

チームで作業する場合は、GitHub のような共有リポジトリをリモート環境に用意して、
そこにデザイントークン JSON を push / pull し合うことで、全員が同じデザインアセットを共有した状態で作業することが可能です。
※ Figma Tokens は GitHub だけではなく GitLab のようなリポジトリもサポートしています。

https://docs.tokens.studio/sync/sync

1. GitHub から Personal Access Token を取得する

https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token#creating-a-token
Figma Tokens 上から GitHub の指定リポジトリに push / pull できるようにするため、
GitHub から Personal Access Token を取得しましょう。
ここで取得したトークンは手順2 で使用するため、コピーして保管しておいてください。

以下は設定例

• トークン名: design-tokens
• Expiration: おまかせ （ 会社のルールに合わせて設定してください ）
• Select scopes: repo

Generate token ボタンをおすとトークンが生成されるため、大事に保管しておきましょう。

2. Figma Tokens 側の設定

1. Figma > （右クリック） > Plugins > Figma Tokens
2. Settings > GitHub > Add new credentials

Personal Access Token の値には、手順1 で取得したトークンを貼り付けましょう。
上記例のように記入できたら Save ボタンをクリックしましょう。
エラーが出ず画面が切り替わったら連携完了です！

3. GitHub に Pull Request を出す

1. プラグイン上でトークンの追加/更新を行う
2. 画面左下の上矢印に青丸のバッヂがついている部分をクリック
3. コミットメッセージと push したいブランチ名を指定して Push ボタンをクリック
4. Create Pull Request を押すと ブラウザで GitHub の Pull Request ページが開くのでそのまま Pull Request を提出

※ main(master) ブランチに 直 push した場合は Pull Request は作成できません。

📝 Figma Tokens を使う上での注意点

Figma Tokens を使うと、デザイントークンを一元管理することが可能ですが、Figma 本体にも同じ style 情報 （Color Styles, Text Styles, Effect Styles など...） が同時に存在していると、デザインや実装する上で 「どちらが正なのか？」 が、分からなくなってしまいます。

色の管理は Figma Tokens 使おう！ と決めたら Figma 本体の Color Styles は削除するなどして、Style 管理がカオスにならないよう注意しましょう。（中途半端にどちらも使わないこと！）

📝 JSON ファイルを フロントエンド環境で使える形にする

Figma Tokens で生成されたデザイントークンの JSON ファイルは、最終的に Style Dictionary のようなサービスを通すことで、FE開発でそのまま使える形に変換することが可能です。
Figma のデザイントークンからシステムにそのまま取り込める形にすることで、よりデザインシステムとしても強固なものになっていきます。

Ubie さんの記事が参考になると思いますので貼っておきます！
https://zenn.dev/ubie/articles/7a6413af237eae#style-dictionary

📝 さいごに

今回は、Figma Tokens プラグインについて、何ができるのか？どんなメリットがあるのか？を中心に解説しました。この記事をベースにデザインシステム実現の一歩になると幸いです。

ありがとうございました。
　　　　2022年もよろしくお願いいたします！ （）

📝 参考 ( special thx )

• Figma Tokens Plugin Docs
  https://docs.tokens.studio/
• Ubie さん
  https://zenn.dev/ubie/articles/7a6413af237eae#style-dictionary

脚注

1. Primitive colors と Semantic colors の命名と管理手法については Ubie さんをめちゃくちゃ参考にさせていただきました！ありがとうございます。