Figmaプロトタイプ入門

## これは何

「初めてFigmaでプロトタイプを作るぞ」となったときに、これを知っておけばあらかたよさそう！というポイントをまとめました。

## Figmaのプロトタイプでできること


### スクロール時にアイテムを固定する

![ヘッダーやフッターメニューを固定して、メインコンテンツ部分だけスクロールできる](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/e5589a63-c243-bec7-669b-a3bf3e9a3feb.gif)

#### 手順

1. 固定したいアイテムを選択し、右サイドバー`Design`タブから`Fix position when scrolling`にチェックを入れる
1. `Constraints and resizing`で固定する時の基準位置を選ぶ
    - 右下で固定したい時は、下の画像のようになります
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/955ac57d-c87a-5623-a6f7-565081a6d79d.png)
1. アイテムが固定されると、レイヤーが`FIXED`配下になります。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/4669fee4-235a-b6dd-9534-df2e2cbaa8f8.png)


:::note warn
- `FIXED`のアイテムは、レイヤーの重なり順をスクロールするコンテンツより下にすることができません
- 親Frameに`Auto layout`を指定している場合は、アイテムの固定ができません
:::

### クリックで画面遷移する

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/5d4f2beb-5aaf-3bbd-8474-f582f7a8a225.gif)


#### 手順

1. 右サイドバーのタブで`Prototype`を選択する
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/01967f44-2920-7d6a-ce10-45df4f740729.png)
1.クリックするアイテムを選択すると右側に青い丸が出ているので、ドラッグ&ドロップで移動させたいFrameまで線を繋げる
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/8cd16bc4-e79e-a413-e3bb-5f05452a4feb.png)
1. 右上にプロトタイプの設定が出てくるので、細かい調整はここからできます！
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/df92eab5-fc7c-0d3e-0682-b5e326087579.png)
  - ちなみに、イベント種類を`Back`にすると、一つ前のページに戻ることができるので、「戻る」「キャンセル」などのボタンに便利です
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/9f2c5b83-b1f2-6817-0c63-803ad1a82de2.png)


### モーダルやドロップダウンを表示する

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/bf40eae2-83b8-ba5d-b0e2-5c887312bc2a.gif)


1. イベント発火するアイテムを選択し、開きたいドロップダウン/モーダルまで線を繋げる
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/0132a7e2-d5d2-62c4-d0be-72a58caf3021.png)
1. イベント種類で`Open overlay`を選択する
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/453c584e-f262-c88a-87de-369dadb6e7ac.png)
1. 位置を調整する
    - 初期設定では位置は`Centerd`になっており、画面の中心に表示されます
    - 上下左右でも位置調整することができます
    - `Manual`を設定すると、自由に位置を調整することができます。
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/a4917fd7-9ddd-859e-6426-95bbfd000f86.png)
1. その他の見え方を調整をする
    - `Close when clicking outside`
        - チェックを入れると、モーダル/ドロップダウンの外をクリックした時にモーダル/ドロップダウンを閉じることができます
    - `Add background behind overlay`
        - チェックを入れるとモーダル/ドロップダウンの後ろに背景を表示することができます
    - `Animation`
        - モーダル/ドロップダウンのアニメーションを設定できます
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/d3d3533c-0a3d-f825-a004-1f97458f0e2f.png)
1. 「閉じるボタン」を用意する
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/f542d5d2-2265-2fd8-faad-102371c3e82d.png)
    - モーダル/ドロップダウンを閉じる用のアイテムを用意し、プロトタイプを設定して`Close overlay`を選びます

:bulb: イベント発火に`While hovering`を設定すると、Tooltipの表示などにも使えます

### Hoverでアイテムを変化させる

よくあるボタンなどのHoverが作れます。

[Figmaのプロトタイプを見る](https://www.figma.com/proto/693OQcEZYpkr6V7Or1mcp7/Figma%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E5%85%A5%E9%96%80?page-id=2%3A115&node-id=6%3A154&viewport=241%2C48%2C1.06&scaling=min-zoom&starting-point-node-id=6%3A154)

1. ボタンのDefault状態とHover状態のデザインを作成し、同じコンポーネントのVariantsにする
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/b52a732f-7846-b096-c8c3-21bf511c01de.png)
1. Default状態からHover状態にプロトタイプの線を伸ばし、発火に`While hovering`
、イベントに`Change to`を選択する
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/a5c24dfe-c3d7-cdcf-8ef5-22222702611a.png)

### はみ出る項目をスクロールさせる

カードのリストやタブがはみ出す時にスクロールするやつです

[Figmaのプロトタイプを見る](https://www.figma.com/proto/693OQcEZYpkr6V7Or1mcp7/Figma%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E5%85%A5%E9%96%80?page-id=6%3A184&node-id=6%3A185&viewport=241%2C48%2C0.48&scaling=scale-down)

1. スクロールさせたいFrameの中身を作ります
    - 例えばこんな感じ。今のままだとはみ出した部分は表示されません
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/5021caf5-060f-2cbc-f178-2d3b0a5dce4d.png)
1. スクロールさせたいFrameの幅を指定します
     - 今回は幅375pxの範囲内で横方向Scrollさせたいので、Itemの親要素の`Item list`のWidthを375pxにします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/7b303418-9eaf-8e0e-f130-86f721a9d327.png)
1. スクロールさせたいFrameを選択して`Prootype`タブを開き、`Overflow scrolling`でスクロール設定をします
    - 横方向にスクロールさせたい時：`Horizontal scrolling`
    - 縦方向にスクロールさせたい時：`Verticlal scrolling`
    - 両方向にスクロールさせたい時：`Horizontal and verticlal scrolling`
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/139fc3b7-85bd-0c7e-7ec0-c83f14d2ba03.png)

## プロトタイプを再生する時にやること

### デバイスのサイズを指定する

Figmaではプロトタイプを再生する時の画面のサイズを指定することができます。

アートボード上で何も選択していない状態で右サイドバーの **Prototypeタブ** を選択すると、`Device`を選択することができます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/4cfdb9f3-5e5b-8f03-036e-be79d8e7e214.png)

`None`が初期値で、Frameサイズに合わせてプロトタイプが表示されます。
あとは主要どころのデバイスが用意されているのでそれを選択するか、`Custom size`で自由なサイズを設定することができます。

デフォルトで用意されているデバイスは、再生時にデバイスも表示されるのでより実際の見え方を想定しやすくなります。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/f94779da-9fdd-bba7-1bf1-4450bcfa9a85.png)

### プロトタイプを再生する

プロトタイプを再生したいFrameを選択した状態で、右上の「▶️」ボタンからプロトタイプの再生ができます。

右上の「Options」を選択すると、再生時のオプションを選択できます。
実際のFrameのサイズで表示したいときは「Actual size」、画面内に収めたいときは「Fit to screen」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/73faa5fe-079d-2890-be85-b34c4ccce4fb.png)

また、Figmaのプロトタイプでは再生を開始するフレームである「Flow starting point」を設定することができ、左サイドバーの「Flows」から開始ポイントを選択できます。

また、左上のコメントボタンをクリックしてコメントのメニューを出すことでプロトタイプ上でコメントをすることもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/77cc7911-1e41-2952-7815-caa6faf2cbcf.png)

## 終わりに

プロトタイプを作成する中でよく使うものを解説しました。
最後までお読みいただきありがとうございました！