Figmaプロトタイプ機能の基本・必要性を知る

• プロトタイプとは
• プロトタイプを使うメリット
• Figmaプロトタイプでページ遷移を設定する
• 1.遷移前・遷移後のページを用意する
• 2.プロトタイプタブを開く
• 3.フローの開始点を追加
• 4.コネクション（リンク先）を設定する
• 5.プロトタイププレビューを確認

プロトタイプとは

プロトタイプとは、デザインを元に実際の動きを再現し試すことです。

実際の動きとは、例えば以下のようなものが挙げられます。

• 「TOP」というリンクをクリックしたら、トップページが表示される
• 「詳しく見る」をクリックすると、詳細ページに移動する
• 画像をクリックすると、拡大表示される
• マウスカーソルが重なると、色が変わる

実際のコーディングはせず、デザインデータを使って、画面遷移や動きを設定できるツールをプロトタイピングツールと言います。
FigmaやXDなどのデザインツールにも、プロトタイプ機能（プロトタイピング機能）と呼ばれる機能が用意されていて、プロトタイプの作成ができるようになっています。

プロトタイプを使うメリット

コーディングや開発を行う前に、プロトタイプを使って実際の動きを再現し、試してみるメリットはいくつもあります。

1. ユーザーに寄り添ったデザインが出来る
2. クライアントのデザイン確認がスムーズになる
3. デザイナーとエンジニアの“溝”をなくせる

1.ユーザーに寄り添ったデザインが出来る

実際の動きに近い状態で機能を試すと「このデザインは、リンクってわかりにくいかも」とか「拡大表示の閉じ方がわかりにくいな」とか、ユーザー目線に立って改善点を見つけることが出来ます。

デザインの良し悪しだけではなく、ユーザーが操作をしやすいか、認知からサービスの購入・リピートの動線が出来ているか、などの確認にも繋がります。ユーザーの体験を総合的にデザインする“UXデザイナー”の領域にも関わってきますね。

2.クライアントとの意思疎通がスムーズになる

小規模なWebデザイン制作案件などでは、クライアントがWebにあまり詳しくない方ということがあります。
デザイン状態だとピンときていない状態なんですね。

完成イメージが曖昧なまま、なんとなくでOKを出されて、納品直前になって追加要望や修正をたくさん言われてしまうと大変です。
ほぼWebサイトと同じ状態、触れるようにして見せてあげると、意思疎通がスムーズに行えるでしょう。

Figmaでは以下のような、プロトタイプをクライアントに見せることも出来ます。

ただし、案件によってはプロトタイプ制作より、コーディングしちゃったほうが早いこともあります。
どっちが早く、楽にできるかの見極めは必要です。

3.デザイナーとエンジニアの“溝”をなくせる

キャンバスにベタベタっとデザインがあっても、画面遷移なのかモーダルウィンドウでの表示か、折りたたまれているメニューを開いた時に“どう表示するか”などのイメージは人によって違います。
「ゆっくりめの出現アニメーション」とか言われても、困るわけです。

実際にプロトタイプ上で動きをつけることで、デザイナーとエンジニア・コーダーとの認識が統一されます。
結果、無駄な修正が出ず、実際の制作にかかる労力を減らす事ができます。
人間関係でもギスギスしないのは良いですね。

Figmaプロトタイプでページ遷移を設定する

Figmaのプロトタイプ機能を使ってみましょう。
まずは、基本となるページ遷移を設定します。

1.遷移前・遷移後のページを用意する

ページ遷移を設定するには、遷移前・遷移した後に表示したいページが必要です。
今回は、以下のように３階層のページを作って、遷移を設定していきます。

ここまで【Figma入門】シリーズでトップページを一緒に作ってきた方は、作成されたデザインを活用してみて下さい。

これからデザインのアレンジをしてみたい、などの場合は、新規ページを作成して簡単に試してみるのもおすすめ。
新規ページの方にデザインを複製し、そちらでプロトタイプ機能の設定を行うことも出来ます。

他のページを作る時間がない・面倒……。
という時は、下図のようにフレームを用意して、コンポーネントから最小限のアイテムを配置するだけでもOKです。

2.プロトタイプタブを開く

では、プロトタイプ機能を使っていきましょう。

一旦、esc（escape）キーを押して、キャンバス上で何も選択していない状態にして下さい。
右サイトバー上部で、プロトタイプを開きます。
プロトタイプの設定に使う項目が表示される、通常“プロトタイプタブ”が表示されます。

この段階で、プロトタイプのタブに表示される項目は“デバイス”と“背景”の２つ。
どちらも、プレビュー再生時の設定になります。

デバイスはプレビュー確認する時の、画面サイズ（表示領域）の設定です。
iPhone15など選択肢にあるものを選べば、そのスマートフォンやタブレットなどをイメージした枠組み使ってプレビュー表示ができます。
背景色では、その枠の外や、フレーム外の部分の表示色を決めます。

今回作っているデザインはPC幅なのでデバイスは「なし」にしてください。
背景色はデフォルトの黒でも、お好きな色を設定していただいても構いません。

3.フローの開始点を追加

フローの開始点とは、プロトタイプでユーザーに最初に見て欲しい画面のことです。
プレビューを表示した時に、どのページを表示するかを指定します。

今回の場合は、トップページですね。
トップページ全体を囲っているフレーム（デモではtop_pc）を選択して下さい。

プロトタイプタブの上部に、フローの開始点という項目があります。
プラスを押して、追加して下さい。

Flow1という、フローの開始点が追加されました。
キャンバス上にも、青色のフロー名+プレビューアイコンが表示されます。

プレビューアイコンをクリックすると、インラインプレビューと呼ばれる小さいウィンドウでプレビュー確認ができます。

大きい画面でプレビュー表示を確認したい時は、プレビューウィンドウのプレゼンテーションビューで開く、もしくはデザイン画面右上のプロトタイプビュー（▷アイコン）を使います。

4.コネクション（リンク先）を設定する

プロトタイプタブを開いた状態で、キャンバスのオブジェクトにカーソルを重ねてみて下さい。
今までデザインタブで操作していた時は表示されなかった円アイコン（と）が表示されます。

円にプラスが入ったアイコン（）表示の時にドラッグすると、遷移を表す矢印を伸ばすことが出来ます。
この矢印はコネクション（Connection）と呼ばれる、どこのページに移動するかを設定するためのものです。

トップページのヘッダーにある「イベント」を選択し、イベント一覧ページへ矢印を伸ばしてみましょう。

これで、プロトタイププレビューの時に、イベントをクリック/タップするとイベント一覧ページに遷移できるようになります。

トップページのカードデザインから、詳細ページへの遷移も作りましょう。
こちらの移動は、ちょっと遠いので別の方法で設定してみます。

イベントセクション左端のカードで、画像とタイトルテキストを選択します。
ダイレクト選択（CtrlもしくはCommandキーを押しながらクリック）と、Shiftキーで複数選択をすると、サクッと選択できます。　

右サイドバーのプロトタイプタブで、インタラクションのプラスアイコンをクリック。
「なし」となっているところをクリックして、次に移動を選択して下さい。
その下で移動先を設定できるので、第三階層（下記ではarticle_pc）を選択します。

下図は、全体が見えるようにキャンバスの表示倍率を縮小したものです。
第三階層のデザイン（フレーム）へ、矢印が伸びていることが確認できます。

最初の直接ドラッグでも、プロトタイプタブからの設定でも、結果は同じです。
やりやすい方法で、遷移したい先に矢印を伸ばして繋いでください。

5.プロトタイププレビューを確認

プレビューで、設定した部分のページ遷移が出来るか試してみましょう。

フローの開始点（フロー名）のところから、インラインプレビューを表示。
ページ遷移を設定した箇所をクリックして、画面が切り替わるか確認します。

もっと実物に近づける場合は、更に細かくコネクションの矢印を設定していきます。
例えば、ヘッダーのロゴをクリックすると、トップページに戻るようにしたり。

第二階層と第三階層を行き来したり、とリンク部分を繋ぎます。

ある程度出来たら、インラインではなく新しいタブでプレビューしてみても良いですね。
Figmaのメニューバーと、デザインのヘッダーメニューが重なる時は、サイドバーを出した状態にすると良いです。

Figmaのメニューバーにある共有ボタンを使うと、編集者を追加したり、クライアントにデモを見せる事も可能です。

共同編集の場合はチームプロジェクトになるのでプラン制限がありますが、プロトタイプを閲覧してもらうだけなら無料プランでも出来ます。
クライアントに、“リンクをコピーする”もしくはメールアドレスを使った招待でURLを送ることができます。