【画面遷移図 with Figma】最低限の操作方法

# はじめに

https://www.figma.com/ja-jp/

Figmaを使って画面遷移図を作る際、基本の操作もままならなかったので備忘録としてまとめます。

---
| 初期画面 |
|:-:|
|  ![スクリーンショット 2024-07-06 20.03.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/93ce9a21-0c91-76ce-f5f8-f331ba80e6a9.png) |



# 図形の挿入

| 左上のツールバーから□をクリック |
|:-:|
|  ![スクリーンショット 2024-07-06 20.05.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/8810f4fc-0334-1964-fa65-e0867250f803.png) |

:::note
アスペクト比
スマホを意識するなら、`9:16`もしくは`9:20`が一般的なようです。
実数値では`450:800`もしくは`450:1000`でしょうか
:::

# 丸角・色・枠線・影
| まずは図形を選択 | 丸角 | 丸角（角ごとに設定） |
|:-:|:-:|:-:|
| ![スクリーンショット 2024-07-06 20.28.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/94e488f4-a486-a8dc-5976-cf1c01f44c5c.png)  | ![スクリーンショット 2024-07-06 20.30.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/add171ee-666f-16a9-457f-319cc52389d4.png)| ![スクリーンショット 2024-07-06 20.33.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/36349c9d-0bea-81d4-5df5-d57e46468961.png)｜



| 色変更 | 枠線 | 影 |
|:-:|:-:|:-:|
|![スクリーンショット 2024-07-06 20.41.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/4dd5aa94-79ab-681b-3be8-ed8fc15b9d43.png) |![スクリーンショット 2024-07-06 20.43.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/6508435e-d66e-96ad-130b-f4dcd166d3e1.png)|![スクリーンショット 2024-07-06 20.48.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/2cd82f5f-361e-7110-4fc8-3fe91be3715a.png)|
|透明度設定も可能||影以外のエフェクトも存在|

# 図形の分割

**Split Shape**というプラグインを使用します

| 分割する対象を用意<br>今回は灰色のフッター | 「プラグインを管理」を選択 | 「Split Shape」を検索 |
|:-:|:-:|:-:|
| ![スクリーンショット 2024-07-06 21.07.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/cece61d3-bd17-02fb-9b3d-390eda7ffe1c.png)  |![スクリーンショット 2024-07-06 21.09.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/46db3ffb-9b7b-a1d0-5eb1-c8c498f070c3.png)|![スクリーンショット 2024-07-06 21.10.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/ab1f9a40-1107-fdcd-f0d4-b8408e982294.png)|

| 今回は3つに分割 | 分割後| 角を整えて完了 |
|:-:|:-:|:-:|
|  ![スクリーンショット 2024-07-06 21.12.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/39a88354-7404-7499-9801-98e96d6227cf.png) | ![スクリーンショット 2024-07-06 21.14.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/d6726da6-4d25-4ecf-2449-3a542808998c.png)|![スクリーンショット 2024-07-06 21.15.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/55034234-0eac-4345-64f6-a2c04f1ff23e.png)|
| 設定項目<br>![スクリーンショット 2024-07-06 21.13.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/f6499152-44e9-d4d6-4b3b-4bd413eeb830.png)  |

## Split Shape
他にも、このような図形を生成できます

> ![](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_6-2.png)

https://webrandum.net/figma-plugin-split-shape/

# コネクトライン（矢印）

プラグイン「Autoflow」を使用します。

![スクリーンショット 2024-07-06 21.24.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/556ace32-67e8-5bb7-58d5-ae86d76dbbef.png)

使い方はシンプルなので、割愛します。

また、Figjamを使う方法もあるようです。

詳しくは以下の記事をご覧ください。

https://wentz-design.com/post/figma-connect-with-arrows/

# 完成イメージ

記事ではわかりにくいところがあれば、こちらを直接ご覧ください。

https://www.figma.com/design/IWqFy8YJAPgJ2zglFmPSJj/Qiita-%E4%BE%8B?t=dKRjdZmFLJ6EYdOA-1


# 参考記事

https://webrandum.net/figma-plugin-split-shape/

https://wentz-design.com/post/figma-connect-with-arrows/

https://note.com/ryotanny/n/n762e43b51e31