実装時に役立つFigmaのデータ作りのポイント

## これは何

Figmaは直感的に触れるUIデザインのためのツールで、細かな知識がなくてもUIのデザインをすることができます。

しかし、実装時に役立つ機能がたくさんあり、それらを活用するのとしないのでは、同じ見た目でもデザインデータの情報量が全く変わってきます。

そこで、この記事ではFigmaを使い始めたばかりというデザイナーやデザイナーからFigmaのデータを渡されたけど何が見れるのかよく分からないというエンジニア向けに、実装時に役立つFigmaのデータ作りのポイントをまとめていいます。

:::note warn
※ この記事では以下を前提に書いています

- Web UIのデザインデータの作成
- デザインデータを作成する人にマークアップとスタイリングの知識がある
- Figmaの言語設定は英語
:::

## Figmaのデータ作りでどれだけ情報量が変わるのか

以下のFigmaデータには、ピクセルレベルで全く同じ見た目のUIが2つあります。

<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FBeqhpvk7BxQ423t3Twr3zG%2FUntitled%3Ftype%3Ddesign%26node-id%3D0%253A1%26mode%3Ddev" allowfullscreen></iframe>

しかし、実際にFigmaの「Dev mode」でデータを見ていくと実は全く違うデータの作りをしています。
（Dev modeとはFigmaの開発者向けモードで、CSSのプロパティなどコーディング時に役立つ情報を見ることが出来ます）

以下はそれぞれのUIをDev modeで見ている時の表示です。
パッと見ただけでも情報量が全く違うのがわかると思います。

左のデータでは要素ごとに設定されている`padding`や`gap`の値がデフォルトで表示されますが、右のデータではそうした情報が表示されません。

左のFigmaデータ|右のFigmaデータ
-|-
![Figmaのスクリーンショット。選択している要素のpaddingやgapの値がFigma上に表示される](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/7058bbcf-1db3-7f38-0100-12f242de7355.png)|![Figmaのスクリーンショット。選択している要素のpaddingやgapの情報が表示されない](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/ae6942a1-8086-738d-b9f7-5ee56bc24bf0.png)


レイヤー構造も全然違います。

左のデータは実際にマークアップする時と近い構造になっていますが、右のデータは順番もマークアップと揃っていないし階層構造もありません。

また、左のデータはレイヤー名から要素の役割を読み取れますが、右のデータからは読み取れません。

![サンプルのマークアップとFimgaのデータのレイヤー構造のスクリーンショットを並べた画像。左のデータはマークアップと情報の並びと親子構造が同じだが、右のデータは順番がバラバラで親子構造もない。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/35ef73d9-67d9-4a8c-65ef-11ca40e6c0c9.png)

言語やデバイスのサイズが変わった時はどうでしょうか。

左のデータは中身の大きさや親要素のサイズに応じて要素が可変しますが、右のデータは位置やサイズが変わらないので表示が崩れてしまいます。

つまり、左のデータはレスポンシブ時の挙動を情報として持っていますが、右のデータは持っていません。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/2d829db6-eee2-f110-099a-e51b3bf20565.png)

この小さなUIでも、Figmaのデータ作りでこんなに情報量の差が出ます。

もっと大きな開発になってくると、デザインシステムを作ることで開発の効率が大きく変わってきます。

FigmaではVariablesやStylesといった機能を使ってタイポグラフィや色を管理することができます。

Figmaとコードでカラーパレットやタイポグラフィを揃えて定義しておくことで、「コードとFigmaでフォントサイズやカラーコードが微妙に違う」、「Figmaで場所によって数値がバラバラでコードと揃っていない」などということが起きにくくなります。

```css
    :root {
        --color-gray-0: #FFFFFF;
        --color-gray-50: #9C9E9E;
        --color-gray-100: #2F3232;
```

![Figmaのスクリーンショット。All variablesというタブの中にcolor/grayというセクションがある。セクションの中には0とFFFFFF、50と9C9E9E、100と2F3232が並んだテーブルがある。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/9787ba1a-ab09-6893-739d-a51afe49ac10.png)

また、Figmaには`Component`というUIパーツを再利用するための機能があります。

ボタンやヘッダーなどのよく使うパーツを`Component`にしておくと同じ要素を使い回せるので、「似たようなUIなのに微妙にスタイルが違くて、都度実装しないといけない」のようなことを防ぐことが出来ます。

:::note
Componentになっている要素は、Figma上でFrameが紫の枠線で表示されます
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/ab38c64b-50a9-9120-ccd8-e981ce737189.png)
:::

また、`Component`には`Variants`というパターン違いを作ることが出来ます。
この機能を使うと、例えばボタンの`hover`や`disabled`など、ステートごとの違いを定義できます。

こちらはチェックボックスのVariantsの例です。
チェックの状態とフォーカスなどの状態を定義しています。

![Figmaのスクリーンショット。スタイルが一部違うチェックボックスのUIが縦に3行、横に4列で12個並んでいる。チェックボックスのリストは紫の点線で囲まれており、左上に「Checkbox」と表示されている](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/c45329e3-7a78-b1e2-3512-758d557a740a.png)

Dev modeで表示すると、選択しているComponentの状態が「Props」の箇所に表示されます。

![Figmaのスクリーンショット。キャンバス上ではラベルに「春」と書かれたチェックボックスのCompnentを選択している。右サイドバーでは「Props」のセクションに「Selected Unslected」「Focus Default」「Label 春」と表示されている](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/582ee417-1d03-50cb-ab2c-1bfd7322e520.png)

こうして一度定義してしまえば毎回全てのStateを網羅しなくてもComponentを使えばどの状態の時にどんなUIになるのかが分かるようになりますし、状態違いを一つの場所にまとめられるのでデザインデータも整理しやすくなります。

このように、実装時を意識したFigmaのデータ作りをすると、たくさんの情報をFigmaから読み取れるようになります。

## 実装時に役立つFigmaデータを作るには

ここからは具体的に実装時に役立つFigmaのデータ作りのポイントを紹介していきます。
簡単にできそうなものから順番に書いているので、最初から全部やるというよりは上から少しずつ反映していくのが良いと思います！

### Auto layoutで作れるものは全部Auto layoutで作る

Auto layoutを使うと`padding`の値や、Flexboxやグリッドコンテナーでどんなプロパティを指定すれば良いかをFigma上で表現できます。

Auto layoutが指定されている要素は、右サイドバーの「Auto layout」のセクションでレイアウトの向きや折り返しの有無、子要素間の余白や上下左右の余白を指定することが出来ます。
これらはそのまま`flex-direction`, `flex-wrap`, `gap`, `padding`などの値として利用できます。

![Figmaのスクリーンショット。キャンバスでは春夏秋冬の4つのアイテムのチェックリストを選択している。右側のサイドバーの「Auto layout」のセクションでは折り返しや揃え位置、gapやpaddingの値が設定されている。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/ba692f4e-d56e-001c-f8f7-4c8dde0ce5b0.png)

実際にDev modeでCSSを確認してみると、以下のようなコードが出力されます。

```CSS:Figmaで生成されるCSS
display: flex;
align-items: center;
align-content: center;
gap: 8px 16px;
align-self: stretch;
flex-wrap: wrap;
```

Auto layoutの詳細は以下の公式ヘルプをご覧ください。

https://help.figma.com/hc/ja/articles/5731482952599-%E3%82%AA%E3%83%BC%E3%83%88%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AE%E4%BD%BF%E7%94%A8

`Auto layout`を使うと自然とレイヤー構造も整理されていきます。

### `Fill`・`Fixed`・`Hug`を使い分ける

`Auto layout`の子要素はwidthやheightに`Fill`・`Fixed`・`Hug`の3つの値を選ぶことが出来ます。

![Figmaのスクリーンショット。右側のサイドバーの「Frame」のセクションにW184 Fill H60 Hugと表示されている。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/3cb988fd-a767-808f-f17e-0d5f91e173b7.png)

`Fill`は親要素に合わせて可変、`Fixed`は親や小要素に関わらず固定、`Hug`は子要素に合わせて可変になります。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/e52ed45f-8397-0ec0-f87c-976b3d918409.png)

要素ごとにこれらの値を設定しておくことで、デバイスサイズやラベルの内容などのデータが変わったときにも崩れにくいデザインにすることが出来ます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/99cf53ea-c6eb-5694-540a-575eec2f5808.png)

### Frame名をちゃんとつける

以外と大切なのがFrame名をちゃんとつけることだと思います。
Frame名をちゃんとつけるとレイヤー構造から情報構造が読み取りやすくなりますし、CSSの命名にも役立ちます。

また、意味のないFrameに気づきやすくなるので、不要なFrameが増えてデータが見づらくなることを避けられます。
### 再利用するパーツはComponentにする

Componentを使うことで、繰り返し使う要素のUIを統一できるほか、どの要素が共通のパーツなのかも把握しやすくなります。

Componentにしたい要素を選択した状態で「Commanf + Option + K」でComponentを作成できます。

作成したComponentは、全体の親になる「Master component」になります。
「Master component」をコピーすることで、子である「Instance」を作成できます。

「Master component」に変更を加えると、Instanceに変更が反映されます。
デザインを作成するときは基本的にInstanceを利用します。

Master componentは💠菱形マーク、Instanceは♢ダイヤマークで表示されます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/a30af800-4e0d-8020-14d7-b9c3b7f86f92.png)

Componentの詳細は以下の公式ヘルプをご覧ください。

https://help.figma.com/hc/ja/articles/360038662654-Figma%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E3%82%AC%E3%82%A4%E3%83%89

### 状態によって変わるUIをVariantsで定義する

Variaantsを使うことでComponentのバージョン違いを定義でき、StateによるUIの違いなどを表現することが出来ます。

Componentを選択した状態で、画面上部のメニューバーの♢ダイヤに+マークのアイコンをクリックすると、Variantを追加できます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/3db5ce17-ba3e-8efb-6965-ed3c320d63c3.png)

Variantのプロパティは複数作成でき、名前をつけることが出来ます。

Variantsの詳細は以下の公式ヘルプをご覧ください。

https://help.figma.com/hc/ja/articles/360056440594-%E3%83%90%E3%83%AA%E3%82%A2%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%A8%E4%BD%BF%E7%94%A8

### StylesやVariablesを活用する

StylesやVariablesを定義しておくことで、「場所によって微妙にフォントサイズやカラーコードが違う」といったことを防いだり、実装時の変数と名前を揃えることで分かりやすくすることが出来ます。

Stylesはテキストやオブジェクトを選択した状態で、TextやFillに表示される点4つのアイコンをクリックして出てくるドロップダウンから作成できます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/0d31edd1-331d-e986-fafa-25fe90295fb8.png)
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/03aff0e1-a0f2-e27c-e85e-02196d819a32.png)

Variablesはキャンバスで何も選択していない状態で、右サイドバーに表示される「Local variables」のタブから作成できます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/cda22bbf-e36f-cdd4-47b4-0275bb29fec1.png)

Stylesの詳細は以下の公式ヘルプをご覧ください。

https://help.figma.com/hc/en-us/articles/360039238753-Styles-in-Figma

Variablesの詳細は以下の公式ヘルプをご覧ください。

https://help.figma.com/hc/ja/articles/15145852043927-%E3%83%90%E3%83%AA%E3%82%A2%E3%83%96%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%A8%E7%AE%A1%E7%90%86