背景
デザインシステムの勉強中。
デザインtokenをgithubで管理したい。
パッケージ化してプロダクト側で使えるようにしたい。
やること
- Figma Tokensを使ってデザインtokenの作成
- Figma TokensからGithubのリポジトリにtokenのJSONファイルをpushする
事前準備
- design-tokenを管理するリポジトリの作成
- 必要なものをインストール
- Figma Tokens（Figmaのプラグイン）
Figma Tokensを使ってデザインtokenの作成
Figma Tokensとはデザインシステムの最小単位のスタイルを定義するためのツール。
できること
- デザイントークンの管理
サービス内で利用しているcolorやfont、radiusなどのデザイントークンを一覧で確認、編集、デザインデータに反映することがでる - ドキュメント機能
Figma Tokensに登録したデザイントークンには、名前と値、その説明を記入することができ、これらの情報はFigmaのデザインに反映され、自動更新されるドキュメントとして使用することが可能 - Githubとの連携
デザイントークン（JSON）を指定のGitHubリポジトリにpushし、Pull Requestまで作成することができる。
Githubのリポジトリにtokenをpushする
GithubでアクセスTokenを生成する
Figma TokensとGithubを連携
Github credentialの登録
Figma Tokens > Settings > Add New > Github
以下の項目を入力
- 名前
- アクセスToken
- リポジトリ
- ブランチ
- pushするファイルパス（tokens.json）
Githubにpush
変更したら、Push to GitHubボタンをクリックする
コミットメッセージを追加して、「Push Changes」ボタンをクリック
→ All done!が表示される