Figma Tokensを使って色をGitHubで管理する

Figma

モチベーション

色の管理の一元化を考えてたら Figma Tokens にたどり着いたので使ってみる。

Figma Tokensをインストール

www.figmatokens.com

Figma Tokensで色を設定

Figma上で右クリックするとプラグインのメニューが表示される

Figma Tokensに色を設定 (1)

Figma Tokensに色を設定 (2)

GitHubの個人アクセストークンを生成

個人アクセストークンを使用する - GitHub Docs を参考に個人アクセストークンを生成。

Figma TokensでGitHubとの連携設定

「Add new credentials」からGitHubの連携設定を行う

GitHubとの連携設定を記入

進めていくと指定したGitHubリポジトリにJSONファイルがcommitされる。

github.com

{
  "global": {
    "Primary": {
      "value": "#003F4D",
      "type": "color",
      "description": "主となるテーマ"
    }
  },
  "$themes": []
}

このJSONファイルをAndroid, iOSなどで共通で利用すれば色の観点でSingle Source of Truthなるものが実現できそう。

参考