[For Designer] FigmaTokensのセットアップ
とりあえずFigmaTokensというもののセットアップをしていきます。その前に、なぜやるか・何に使うのかがわからないとあれなので、デザイントークン周りから説明していきたいと思います。
こちらのデザイントークンって何？という記事がとても参考になります。抜粋すると、デザイントークンとは 「色、スペーシング、タイポグラフィのスケールなど、デザインシステムを構成する不可分なピースのこと」 と記載されています。
ズバリ言うと 「一貫性のあるUIを作る基礎」 になります。カラーやスペース等がきちんと定義されていることで、適当な値が使われることが防げたりします。
FigmaTokensというプラグインを導入することで、Figma上でデザイントークンを管理することができます。またGitHubを活用することで、Figma上で管理しているデザイントークンをコード側へそのまま移すことができます。 これによって、Figma上でデザイントークンの追加や変更があったときでも、すぐにコード側に新しいトークンを渡すことができ、スムーズに開発を進めることができます。
https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens
↑こちらのページの右上の Install ボタンを押すだけです
Figma Tokens を起動したいページで 「 ctrl + / 」 をするとモーダルが出るので、そこで 「Figma Tokens」 と入力します。
Enter で起動します。
適当に説明は流し読みしてください。右下で画面サイズは変更できます。
以下のような画面になったら、上部の 「Setting」タブをクリックします。
Settingタブに移動したら、 Token Storage を GitHub に変更します。
上のような画面になったら、 Add new credentials をクリックします。 以下のような画面になると思うので、それぞれの欄に入力していきます。
- Name: 2022-HP
- Personal Access Token: 後で記載
- Repository: suzuka-kosen-festa/2022-HP
- Default branch: figma
- File Path: data/tokens.json
Personal Access Token はこのページから取得します。
https://github.com/settings/tokens
Generate new token をクリックして、以下のように設定してください。
- Note: 2022-HP
- Expiration: 90 days
- Select scopes: repo にチェック
Generate token をクリックすると、トークンが生成されるので忘れずコピーしましょう！ コピーしたものを Figma Tokens の Personal access token の欄にペーストします。
この状態で Save を押します。
(Repositoryの部分、正しくは suzuka-kosen-festa/2022-HP です)