Figmaプロトタイプ入門

これは何

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

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

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

手順

1. 固定したいアイテムを選択し、右サイドバーDesignタブからFix position when scrollingにチェックを入れる
2. Constraints and resizingで固定する時の基準位置を選ぶ
   • 右下で固定したい時は、下の画像のようになります
     
3. アイテムが固定されると、レイヤーがFIXED配下になります。
   

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

クリックで画面遷移する

手順

1. 右サイドバーのタブでPrototypeを選択する
   
   1.クリックするアイテムを選択すると右側に青い丸が出ているので、ドラッグ&ドロップで移動させたいFrameまで線を繋げる
   
2. 右上にプロトタイプの設定が出てくるので、細かい調整はここからできます！
   

• ちなみに、イベント種類をBackにすると、一つ前のページに戻ることができるので、「戻る」「キャンセル」などのボタンに便利です
  

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

1. イベント発火するアイテムを選択し、開きたいドロップダウン/モーダルまで線を繋げる
   
2. イベント種類でOpen overlayを選択する
   
3. 位置を調整する
   • 初期設定では位置はCenterdになっており、画面の中心に表示されます
   • 上下左右でも位置調整することができます
   • Manualを設定すると、自由に位置を調整することができます。
     
4. その他の見え方を調整をする
   • Close when clicking outside
     • チェックを入れると、モーダル/ドロップダウンの外をクリックした時にモーダル/ドロップダウンを閉じることができます
   • Add background behind overlay
     • チェックを入れるとモーダル/ドロップダウンの後ろに背景を表示することができます
   • Animation
     • モーダル/ドロップダウンのアニメーションを設定できます
       
5. 「閉じるボタン」を用意する
   
   • モーダル/ドロップダウンを閉じる用のアイテムを用意し、プロトタイプを設定してClose overlayを選びます

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

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

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

Figmaのプロトタイプを見る

1. ボタンのDefault状態とHover状態のデザインを作成し、同じコンポーネントのVariantsにする
   
2. Default状態からHover状態にプロトタイプの線を伸ばし、発火にWhile hovering
   、イベントにChange toを選択する
   

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

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

Figmaのプロトタイプを見る

1. スクロールさせたいFrameの中身を作ります
   • 例えばこんな感じ。今のままだとはみ出した部分は表示されません
     
2. スクロールさせたいFrameの幅を指定します
   • 今回は幅375pxの範囲内で横方向Scrollさせたいので、Itemの親要素のItem listのWidthを375pxにします
     
3. スクロールさせたいFrameを選択してProotypeタブを開き、Overflow scrollingでスクロール設定をします
   • 横方向にスクロールさせたい時：Horizontal scrolling
   • 縦方向にスクロールさせたい時：Verticlal scrolling
   • 両方向にスクロールさせたい時：Horizontal and verticlal scrolling
     

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

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

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

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

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

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

プロトタイプを再生する

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

右上の「Options」を選択すると、再生時のオプションを選択できます。
実際のFrameのサイズで表示したいときは「Actual size」、画面内に収めたいときは「Fit to screen」を選択します。

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

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

終わりに

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