デザイナーとFigmaで協業するエンジニアの事始め

# 概要

フロントエンドエンジニアとしてUIデザイナーと協業することは多くあると思います。その際にただ仕様書や口頭でのすり合わせで終わらせたり、Figmaを使用していたとしてもただFigmaのURLを連携してデザインやfont-size、colorなどを確認しながらhtmlやcssを実装していませんか？ それでも実際にできるものがデザイナーが想定したものとズレてしまうことも少なくないのではないでしょうか？ 
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/9f963970-6d3a-c784-fb1f-36e88ffcfd52.png" width=400 />

この記事では、Figmaでもっと効率的にUIデザイナーと協業し開発効率をUPするプロジェクトを作成するための最初の第一歩について紹介します。ここでは主にFigmaで使用するFigma TokensとStorybook connectのplugin導入とReactを用いたプロジェクトの作成方法について記しています。

# 前準備
## Reactのプロジェクトを準備する
プロジェクトはReactとします。 VueやSvelteでも可能かと思いますので、他のライブラリを使用されている方は[StorybookのDocs](https://storybook.js.org/docs/react/get-started/introduction)等で導入方法を探してみてください。

chromauiが用意してくれているStorybookが導入済みのReactプロジェクトがあるのでそれをクローンしてプロジェクトを作成します。
後述するStorybook connectを利用するためStorybookが必要です。

```sh
# Clone the template
$ npx degit chromaui/intro-storybook-react-template taskbox
$ cd taskbox
```

プロジェクトのルートに移動するとnode_modulesをインストールしていきます。
```sh
# Install dependencies
$ yarn
```

パッケージのインストール後 `yarn start` で起動して以下のように `localhost:3000`にブラウザからアクセスすると以下のようにReactのロゴが表示されればOKです。
```
$ yarn start
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/ffea8b90-394f-4c24-eba9-5bb35551a55d.png" width=400 />


ここまでで一旦前準備は完了です。
次にFigmaで使用されるスタイルをインポートするためのFigma　Tokenについて紹介と導入をしていきます。

# Figma Tokensとは？
Figmaのpluginで、サイズ、色、フォント、スペースなどを定義してエイリアスを作ることができます。
この定義に基づいた独自のトークンをJSONとして生成として生成でき、スタイルの作成・更新が可能です。
GitHubとの連携も可能でデザイントークン自体をGitHubで管理することもできます。

https://www.figma.com/community/plugin/843461159747178978/Tokens-Studio-for-Figma-(Figma-Tokens)


## Figma Tokensを導入する
プロジェクト用のFigmaのファイルを開きます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/8800dd35-2311-d10b-e9bb-b52630d7685a.png" width=600 />

ここでプラグインを検索するためのアイコンがあるのでクリックし、SearchフォームでFigma Tokensを検索し`Run`を押して導入していきます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/bd7b8da9-7a78-daa3-d1b0-8b281ca7aeca.png" width=600 />


例として、Colorだけ定義しています。
| エイリアス | カラーコード |
|:--:|:--:|
| primary-color | #05CEFA |
| secondary-color | #FEFEFE |

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/7db5979f-5cd1-8d77-51fb-90062e8644d5.png" width=500 />

ExportしてToken用のJSONファイルを作成していきます。 `Include parent key`にチェックを入れてExportボタンを押すとtokens.jsonが作成されると思います。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/7700c7b5-2442-5146-d833-6f86d3113a8c.png" width=500 />

次にこのデザイントークンを利用するためにReactプロジェクトを改修していきます。

## Reactでデザイントークンを利用する
### tokens.jsonのフォーマット整形
作成した`tokens.json`からスタイルシートを作成するためにパッケージをインストールします。

```sh
$ yarn add --dev style-dictionary
$ yarn add --dev token-transformer
```

次に `style-dictinary`用のディレクトリを作成し、そのディレクトリ配下にFigma Tokensで作成したtokens.jsonを配置します。
```sh
$ mkdir .style-dictionary
.style-dictionaryにFigma Tokensで作成した tokens.jsonを移動
```

インストールした`token-transformer`で`style-dictonary`がスタイルシートを生成できるようにtokens.jsonのフォーマットを修正します。特に手動で変更する必要はなく、以下のコマンドで生成します。
※ ここでは元のtokens.jsonが不要なので上書きする形でファイル名を同じにしています。元ファイルが必要な場合は別ファイルとしてフォーマットすると良いです。
```sh
$ npx token-transformer .style-dictionary/tokens.json .style-dictionary/tokens.json
```

フォーマット整形完了後は以下のような内容になっていると思います。
```.style-dictionary/tokens.json
{
  "primary-color": {
    "value": "#472183",
    "type": "color"
  },
  "secondary-color": {
    "value": "#4B56D2",
    "type": "color"
  },
  "default": {
    "value": 10,
    "type": "sizing"
  }
}
```

### style-dictionaryでスタイルシートを生成
インストールした`style-dictionary`パッケージでスタイルシートを作成していきますが、その前に設定ようのconfig.jsonが必要です。
config.jsonを作成し、以下の内容に編集してください。

```config.json
{
  "source": [".style-dictionary/*.json"],
  "platforms": {
    "scss": {
      "transformGroup": "scss",
      "buildPath": "style-dict/scss/",
      "files": [{
        "destination": "_variables.scss",
        "format": "scss/variables"
      }]
    }
  }
}
```

この内容は `npx style-dictionary init basic`で生成されたconfig.jsonから必要なものを抽出し改変した内容です。
詳しくは以下を参照してください。

https://amzn.github.io/style-dictionary/#/quick_start


style-dictionaryコマンドでscssファイルを生成します。
```sh
$ npx style-dictionary build --config ./config.json                                

scss
✔︎ build/scss/_variables.scss
```

生成できたscssファイルの内容です。このファイルをプロジェクトのスタイルシートでimportすることでFigmaで定義しているデザインを利用することができます。
```style-dictionary/scss/_variables.scss
// Do not edit directly
// Generated on Fri, 16 Dec 2022 17:25:58 GMT

$primary-color: #05CEFA;
$secondary-color: #FEFEFE;
```

# Storybook connectとは？
StorybookをFigmaコンポーネントにリンクできるようにするFigmaのpluginです。リンクするとFigmaから離れることなくデザインワークスペースで実装されたコンポーネントを確認することができます。
このpluginを使用するにはchromaticにStorybookをデプロイする必要があります。

https://www.chromatic.com/docs/figma


## ReactプロジェクトでStorybookを確認する
chromaticにデプロイする前に一度ローカルでStorybookを起動してみましょう。 `package.json`にscriptsが用意されており、以下のコマンドで起動できます。
```sh
$ yarn storybook
```

`localhost:6006` で起動します。ブラウザでアクセスすると以下のようにStorybookが立ち上がっており、Storybookが表示されるようになると思います。
![スクリーンショット 2022-12-16 23.52.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/df4f8e7a-330d-072b-1b7b-b72de458ebc4.png)


## chromaticにStorybookをデプロイする

次にchromaticにStorybookをデプロイしていきます。GitHubに上記で作成したプロジェクトをpushしておくとGitHub連携ですぐにデプロイが可能です。

https://www.chromatic.com/

chromaticでアカウントを作成する必要があります。無料でもStorybookは無限に作成できるし、スナップショットや共有等も可能で開発者に優しいサービスです。素晴らしいですね。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/3acc83ee-31d6-63ed-30f4-365cc4c92a85.png" width=600 />

デプロイする手順の途中で出てきますが、chromaticのライブラリをインストールしてデプロイコマンドを叩く必要があります。

```sh
$ yarn add --dev chromatic
$ npx chromatic --project-token=<token> 
```

chromaticにデプロイが終わると、以下のようにchromaticのサービス上で自分が作成したStorybookの内容が見れるようになります。ここまででchromaticへのデプロイは完了です！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/6a0cb53e-1307-9100-4f90-afa5601a4c17.png" width=600 />



# FigmaにStorybookの連携

ここでプラグインを検索するためのアイコンがあるのでクリックし、SearchフォームでStorybook Connectを検索し`Run`を押して導入していきます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/701e387e-9ce0-3fb3-e130-a2be6090b52f.png" width=600 />


Sign in with Chromaticボタンを押して、Chromaticに接続します。
![スクリーンショット 2022-12-17 0.06.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/0b0975f6-34bd-c3f9-b0bf-c639a95fd0ae.png)


ここまできたら準備は完了です。
`cmd + /` 等でStorybook connectが開けます。
![スクリーンショット 2022-12-17 0.59.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/1061edb0-3f8f-db2c-c240-6d13d5a1384a.png)

ここに対応するコンポーネントのchromaticのURLを入れてあげると...
以下のように実際に実装したコンポーネントとFigmaでデザインされたコンポーネントが横並びで閲覧でき、デザインのズレがわかるようになりました。
![スクリーンショット 2022-12-17 0.59.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/ac2e509a-03c7-4f1e-2242-e3a5f00918f6.png)

Storybook connectの導入は非常に簡単ですね。これを導入することによって、以下のようにコンポーネント選択時にデザイナーが実際の実装をすぐに確認ができるPluginリンクも作成されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/aa08fc64-8b9a-a4c4-ca43-87430c537d10.png" width=300 />


# 最後に
この記事ではFigmaを利用しているプロジェクトでUIデザイナーと効率よく協業するためのplugin紹介とReactプロジェクトへの導入について紹介してきました。
これらのpluginを利用することで、Figmaで作成されたデザインがより精密に効率よく実装できるようになると思います。実際の実装についてもデザイナーがFigmaで完結して確認できるためプロダクトチェックの助けにもなるかもしれません。いやぁFigmaは便利ですね〜。


# 参考（リンクまとめ）

https://www.figma.com/community/plugin/843461159747178978/Tokens-Studio-for-Figma-(Figma-Tokens)

https://amzn.github.io/style-dictionary/#/quick_start

https://www.chromatic.com/docs/figma

https://storybook.js.org/docs/react/get-started/introduction