【Figma】デザインパネルを活用してレイアウトをデザインしよう

この記事は、【__PharmaXアドベントカレンダー__】7日目の記事です！

https://qiita.com/advent-calendar/2023/pharma-x

こんにちは、エンジニアの下村です。
主にフロントエンドの担当をしています。

### 記事の対象者
- デザインツールにFigmaを使ってる
- 意図した形にフレーム作成はできる
- 右のメニューを全く使っていない
- Figma上でレスポンシブデザインを設計したいと思っている

### 動作環境
Figma Desktop Appバージョン116.8.5
### 目次
[1.はじめに](#はじめに)
[2.Auto layoutで子要素のレイアウトを編集](#auto-layoutで子要素のレイアウトを編集)
[3.Frameの大きさの編集](#frameの大きさの編集)
[4.Constraintsで子要素のリサイズや配置を設定](#constraintsで子要素のリサイズや配置を設定)
[5.Inspectで自動生成されたcss確認](#inspectで自動生成されたcss確認)
[6.おわりに](#おわりに)

# はじめに
本記事ではFigmaの画面の右メニューにある、【__デザインパネル__】を用いてレイアウトを設定を行うべき理由と、実際の実装方法について紹介していきます。

![スクリーンショット 2023-11-28 9.16.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/d2bf6403-15a0-e18c-7371-2fb2b47719d6.png)

まず利点について簡単な例を挙げますと、ここにフレームの真ん中にボタンがある画面が２つあります。

![スクリーンショット 2023-10-31 7.46.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/7494fae5-dd63-1903-6431-6d9df0d87645.png)

一見これら２つに見た目上の違いはありません。
しかし、実はこのフレーム逹には

・　左のフレームは、**手動でフレームにボタンを配置したもの**
・　右のフレームは、**デザインパネルを編集してボタンを配置したもの**

という違いがあります。

これはどういうことかと言うと

まず前者の
1. **手動でフレームを置いている**
これはFigmaのスナップ機能に従えば綺麗にフレームの中心にボタンを置くことができるので、手動でボタンを動かしフレームの中心にボタンを配置しています。

![スクリーンショット 2023-10-31 8.10.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/ca054ad0-44de-c516-8ac4-60dcddf318be.png)

対して
2. **デザインパネルでフレーム位置を設定している**
こちらでは、フレームの位置を手動ではなく
【デザインパネル】の中にある【Auto layout】の項目からフレーム内の子要素をセンタリングするよう設定しています。

![スクリーンショット 2023-10-31 8.07.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/75268818-d7bf-f495-bd8c-45bac6309573.png)


これらの方法は、どちらも綺麗にフレームの中心にボタンを配置することが出来ます。

それだけ聞くと、完成品が同じなら手動で置けるほうが直感的でいいじゃん！
と思われるかも知れませんが

**手動でフレームを置いている**
この方法では、フレームの大きさが変わってしまった場合、ボタンの位置は絶対位置で設定されているため、ボタンの配置はフレームの中心ではなくなってしまいます。

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/58b550c0-e809-9192-cb8c-7d25953cb85e.gif)

一方
**デザインパネルでフレーム位置を設定している**
この場合は、フレームで設定した子要素の配置方法を参照してボタンの位置が決定されているため、フレームの大きさが変わってもボタンの配置は中心を維持したままになるのです。

![3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/777f704b-45d4-c5fd-a3d6-4cf241be6ae8.gif)

このように、【デザインパネル】の設定を上手く活用することで、フレームの大きさを変更することになっても、子要素の位置関係を崩すことなく、デザインの変更に対応することができるようになるのです。

このように設定を行うことで要素の配置や大きさなどフレキシブルに変えられるようになる方法について紹介していこうと思います。

# Auto layoutで子要素のレイアウトを編集
`Auto layout`はフレーム内の子要素のレイアウトを設定できる項目です。

この項目で子要素の**スペーシングと配置の制御**を設定することで、フレームのサイズが変更されたときに子要素が自動的に調整されるようになり、
異なる画面サイズやデバイスに対応したデザインを簡単に作成することが出来るようになります。

![スクリーンショット 2023-10-31 8.28.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/b7bd475b-055b-168b-6108-3f0a43a6d612.png)

### alignment
`alignment`機能ではフレーム内の子要素の配置を設定することが出来ます。

![スクリーンショット 2023-10-31 9.02.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/3811c4a1-3254-434b-4e35-ff53f762e27b.png)

![7.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/8b79bb10-b317-b4d4-a8f8-114fd99c2f44.gif)

このように、子要素を配置したい場所にアイコンを選択するだけで、左詰めやセンタリングなど子要素の配置を設定することが出来ます。

### layout
`layout`機能ではフレーム内の要素をどう並べるかについて設定することが出来ます。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/28b938e9-8f1d-ca00-a866-65e662d01608.png)

#### ① Vertical layout
要素を縦に並べる
#### ② Horizontal layout
要素を横に並べる
#### ③ Warp
要素を縦に並べた上で、要素がフレームをはみ出した際は要素を折り返す

![4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/25290650-42eb-4c83-873b-9322724eae73.gif)

### between items
`between items`機能ではフレーム内の要素の間隔を設定することが出来ます。

![スクリーンショット 2023-10-31 9.02.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/5b43f020-f0c6-971a-6196-ad5af66b6b4d.png)

`between items`では、pixel数を指定するかAutoで間隔を広げるか項目右にあるDropDownメニューを押すことで選択することが出来ます。

![スクリーンショット 2023-10-31 9.05.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/cdfa8299-09fa-5c63-4f61-72b73ae9593a.png)

#### pixel数を指定
要素の間隔同士をpixel数を指定して設定することが出来ます。

![5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/25a060b7-0399-b3ad-0418-fec9ed6db86a.gif)

#### Auto
フレームの全体のサイズに応じて子要素の間隔が調整されます。

![6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/c8ed2805-e329-8b91-b0e6-42e18a2d6718.gif)

### padding
`padding`機能ではフレームの余白を設定することが出来ます。

![スクリーンショット 2023-10-31 9.02.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/faa9b394-72e8-cf98-d38b-d22ca9d7e652.png)

また、項目右にあるアイコンを押すことで上下左右の設定することも可能です。

![8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/e612c561-80a3-d79e-133c-298581f983e2.gif)

# Frameの大きさの編集
こちらでは、`Frame`の項目の`resizing`機能を用いて子要素の大きさに応じて親フレームの大きさを自動でrisizeすることが出来ます。

フレームの大きさが絶対値ではなく、子要素の数や大きさによって変更される設計の場合はこちらを編集します。

![スクリーンショット 2023-10-31 9.43.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/62c2808d-7116-26a8-1d71-1e129b517e5f.png)

#### Fixed
`Fixed`はフレームの大きさは設定されたHeight,Widthの固定値にします。
子要素はフレームからはみ出した際に見切れるようになります。

![9.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/2294aac4-6056-d772-8f6e-2196540ff455.gif)

#### Hug contents
`Hug contents`は子要素の大きさや配置、`Auto layout`で設定したpaddingによって自動でフレームをrisizeします。

![10.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/9fb5f86a-7f43-683c-699a-4d92adcb8ac2.gif)

# Constraintsで子要素のリサイズや配置を設定
`Constraints`は親フレームの変更に対して、子要素の配置及びリサイズを設定出来る機能です。

![スクリーンショット 2023-11-01 9.48.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/f76bd4df-c1ae-c02c-8b57-27cfc96fc5ed.png)

パッと説明を聞いて`Auto layout`と何が違うだ？と思われたかもしれませんが
主な違いは

・　`Auto layout`は親要素が子要素に対して配置を設定出来る
・　`Constraints`は子要素が親要素の変更に対して配置を設定できる
です。

どちらも子要素の振る舞いを設定するための機能ではあるのですが
それを設定するのが「親要素」から設定するか「子要素」から設定するかの違いになります。

ですので、`Auto layout`ではなく`Constraints`を使う例を挙げると

子要素の配置を一意のレイアウトで設定するのではなく
サイドバーやフッターなどの**固定位置に当たる要素を設定したい**場合は`Constraints`を用いて子要素のレイアウトを設定します。

:::note warn
注意
`Auto layout`と`Constraints`は同じ要素に対して異なるアプローチでレイアウトを管理する機能なので互換性がありません。

したがって、`Auto Layout`を適用したフレーム内の子要素は`Constraints`の項目が表示されなくなります。
:::

#### 配置を設定する
以下のプロパティで縦軸と横軸がそれぞれどの位置を基準とするか設定できます。

・ 横軸であれば`Left` `Right`で左右の位置
・ 縦軸であれば`Top` `Bottom`で上下の位置

また横軸縦軸共に`Center`で真ん中に配置することが出来ます。

![11.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/857be936-cb53-f414-f56c-5ea689cfb3ba.gif)

#### 親Frameの大きさに合わせリサイズさせる
以下のプロパティで親要素の相対的なサイズや位置を維持しながら、子要素のサイズを追従させることができます。

・ 横軸であれば`Left　and Right`で親要素の横方向のリサイズに対して、子要素が親フレームの左辺と右辺に固定されるようリサイズする
・ 縦軸であれば`Top and Bottom`で親要素の縦方向のリサイズに対して、子要素が親フレームの上辺と下辺に固定されるようリサイズする

また横軸縦軸共に`Scale`で親要素との比率を維持したまま子要素を均等にスケールさせる事ができます。

![12.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/e829ca62-0edb-682f-add9-f3ffbd83642b.gif)

# Inspectで自動生成されたcss確認
レイアウトの設定方法の紹介については、前の項目で以上になりますが
最後にはじめに説明した恩恵以外に嬉しい要素につてい軽く紹介します。

それが、FigmaのInspectで自動生成されたcssの精度が上がるという点です。

例を挙げますと
まず、以下条件をフレームの要件として定義します。

・　フレームの大きさは、height=430px,width=300とする
・　フレームのpaddingは、上下左右=40pxとする
・　子要素は左上よせとする
・　子要素は縦並びとする
・　子要素同士の間隔は26pxとする

以上の要件で、手作業でレイアウトを行ったものと、デザインパネルでレイアウトを設定したものを用意しました。

![スクリーンショット 2023-11-01 11.58.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/0b3d9b31-e862-c60d-bce5-1281d25d1878.png)

デザインデータの見た目上は一切違いがありませんが

これを`Dev tool`の`Inspect`の項目から自動生成されたcssを確認すると


#### 手作業の場合

![スクリーンショット 2023-11-01 12.02.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/4b7fc076-f706-ba1c-c9c9-659585b01059.png)

手作業で作成したCSSでは、Figmaくんが頑張って因果関係を見つけて綺麗なコードにしてくれていますが
フレームの大きさやpaddingなどの要件が一切反映されていません。
なんなら子要素に至っては位置によっては`top`や`left`など絶対値を指定しているなど

このcssを実際のコードに流用することはほぼ出来ません。

#### デザインパネルでレイアウトを設定した場合

![スクリーンショット 2023-11-01 12.06.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/b7c5ca05-20b6-8421-30cc-151dc54d207e.png)

一方デザインパネルでレイアウトを設定したフレームのcssは
設定した要件通りのコードを無駄なく出力してくれているので、ほぼこのコードを使用して実装に反映させることが可能なクオリティのcssを書き出してくれます。

**css分からなくてもstyleの実装出来ると言っても過言ではありません！**

# おわりに
Figmaには便利なスナップ機能が備わっているので手動で配置を行っても、
センタリングや等間隔の配置が直感的かつグラフィカルに行えるので、そちらを使われてる方も多いと思います。

その機能が便利で早いのは事実ですし、デザインのプロトタイプを作るのであれば十分なのですが

実際に実装が行われるデザインファイルを作成する際は、これらデザインパネルの機能をフル活用することで
- メンテナンス性の向上
- フレキシブルなデザイン変更への対応が容易になる
- フレームのレイアウトのデザインと実装のすれ違いの防止
- 自動生成されるcssの質の向上により、実装時間の短縮

など、長い目で見れば見るほど恩恵を受けられるようになるので
ぜひデザインパネルをマスターして、デザインファイルの質を向上させ総合的な生産性を上げていきましょう！！

また、PharmaXで以下のイベントを開催します！
ぜひご参加ください！

https://yojo.connpass.com/event/303072/

https://yojo.connpass.com/event/302642/