Skip to content
This repository has been archived by the owner on Feb 4, 2023. It is now read-only.

[For Designer] FigmaTokensのセットアップ

Shoma Kobayashi edited this page Jun 19, 2022 · 3 revisions

FigmaTokensのセットアップ

とりあえずFigmaTokensというもののセットアップをしていきます。その前に、なぜやるか・何に使うのかがわからないとあれなので、デザイントークン周りから説明していきたいと思います。

デザイントークンとは?

こちらのデザイントークンって何?という記事がとても参考になります。抜粋すると、デザイントークンとは 「色、スペーシング、タイポグラフィのスケールなど、デザインシステムを構成する不可分なピースのこと」 と記載されています。

デザイントークンがあると何が嬉しい?

ズバリ言うと 「一貫性のあるUIを作る基礎」 になります。カラーやスペース等がきちんと定義されていることで、適当な値が使われることが防げたりします。

なぜFigmaTokens?

FigmaTokensというプラグインを導入することで、Figma上でデザイントークンを管理することができます。またGitHubを活用することで、Figma上で管理しているデザイントークンをコード側へそのまま移すことができます。 これによって、Figma上でデザイントークンの追加や変更があったときでも、すぐにコード側に新しいトークンを渡すことができ、スムーズに開発を進めることができます。

実際にセットアップ

Figma Tokens のインストール

https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens

↑こちらのページの右上の Install ボタンを押すだけです

Figma上で起動

Figma Tokens を起動したいページで 「 ctrl + / 」 をするとモーダルが出るので、そこで 「Figma Tokens」 と入力します。

image

Enter で起動します。

image

適当に説明は流し読みしてください。右下で画面サイズは変更できます。

以下のような画面になったら、上部の 「Setting」タブをクリックします。

image

Settingタブに移動したら、 Token Storage を GitHub に変更します。

image

上のような画面になったら、 Add new credentials をクリックします。 以下のような画面になると思うので、それぞれの欄に入力していきます。

  • Name: 2022-HP
  • Personal Access Token: 後で記載
  • Repository: suzuka-kosen-festa/2022-HP
  • Default branch: figma
  • File Path: data/tokens.json

image

Personal Access Token はこのページから取得します。

https://github.com/settings/tokens

Generate new token をクリックして、以下のように設定してください。

  • Note: 2022-HP
  • Expiration: 90 days
  • Select scopes: repo にチェック

image

Generate token をクリックすると、トークンが生成されるので忘れずコピーしましょう! コピーしたものを Figma Tokens の Personal access token の欄にペーストします。

この状態で Save を押します。

image

(Repositoryの部分、正しくは suzuka-kosen-festa/2022-HP です)