【Figma入門⑧】プロトタイプの必要性・Figmaでの基本的な使い方を解説

Figmaではプロトタイプ機能を使って、実際のWebサイト/アプリケーションに近い動きをつけることも出来ます。プロトタイプを作成するメリットと、ページ遷移やホバーアニメーションなど基本的な設定方法について解説します。

プロトタイプとは

プロトタイプ機能

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4.コネクション(リンク先)を設定する

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

Figmaのインタラクションをもっと知る

インタラクション(Interaction)とは

インタラクションは inter(相互)とaction(作用)を合成して作られた言葉。
WebデザインやUI/UXデザインでは、ユーザーが行うアクション(操作や行動)に対して、サイトやアプリケーションなどが行う反応のことを指します。

例えば、ここまでで設定してきたページ遷移も、インタラクションの一つです。
以下のように、考えられます。

  • ユーザー操作:リンクテキストをクリックする
  • サイトの反応:別のページを表示する

ページ遷移以外にも、インタラクションは沢山あります。
マウスを重ねた時に色を変える、クリックで映像を再生/停止する、クリックするとチェックを付け外しする・タブを切り替える……などなど、ユーザーの操作によって変化させたい部分は、すべてインタラクションと言って間違いではないのです。

Figmaのインタラクション設定

ページ遷移を設定した、インタラクションをもう一度見てみましょう。
下図のようなモーダルウィンドウ、インタラクションの詳細(Interaction details)を開いて下さい。

インタラクションの詳細では、以下5つのな設定ができます。

  • トリガー:変化を起こすきっかけ
  • アクション:何をしたいか
  • 表示するフレーム:どこに移動する・なにを表示するか
  • アニメーション:アクション時のトランジション
  • 状態管理:オブジェクトの状態をリセットするか否か

インタラクションで遊んでみる

アクションで移動ではなくオーバーレイを選択すると、今ある画面上の上に選択したフレームを表示できます。モーダルウィンドウ、スマホ向け表示のメニューなどでよく見かける表示ですね。

簡単なフレームを作って実験してみましょう。
トップページのロゴから、コネクションの矢印を引っ張って、インタラクションの詳細を設定します。せっかくなのでアニメーション(トランジション)も即時以外に変えます。

移動よりも必要な設定が多いので、インタラクションの詳細が伸びますね。
選択に合わせて必要な項目が表示されるので、出てきたものを設定していけば大丈夫です。

プレビュー表示を見てみましょう。
オレンジ色のフレームがオーバーレイで画面上部に、ディゾルプで徐々に表示されます。

上からシャッターのように降りてきてほしければ、ムーブインの上から下(↓)にします。

シンプルなトランジションであれば、簡単に設定できるのは良いですね。
アニメーションの速度を変えてみたりと、遊んでみて下さい。

ボタンコンポーネントにインタラクションを追加

ここまでのインタラクションはクリック時(タップ時)でしたが、トリガーをマウスオーバーに変えると「マウスを重ねた時」の表示、CSSでいう :hover の設定もできます。
ボタンのコンポーネントをベースに、インタラクションを追加してみましょう。

コンポーネントとバリアントの設定は、以下の記事をご確認下さい。

step1. 変化前・変化後を作る

コンポーネントの学習では、バリアント機能を使って色とサイズを設定しました。

ここに、ボタンの状態を示すバリアントを追加します。

ボタンのコンポーネントグループを選択し、デザインタブからプロパティを追加。
バリアントを選択して、名前を状態(State)・値をデフォルト(default)など分かりやすいように設定してください。

マウスオーバー時のスタイル設定するために、それぞれのボタンを複製します。
複製したボタンは状態プロパティの値を「hover」に変えてください。

マウスオーバー時のスタイルを設定します。
今回は簡単に、ドロップシャドウだけ追加してみます。

以下のように、通常時とマウスオーバー時のデザインが並んだら準備完了です。

step2. インタラクションを設定

プロトタイプタブに切り替えて、インタラクションを設定します。

通常表示(default)のボタンを、すべて選択状態にします。
インタラクションのプラスアイコンから、インタラクションを追加。
以下の設定にします。

  1. トリガー:マウスオーバー
  2. アクション:次に変更
  3. 変更するプロパティで[状態:hover]を選ぶ

下図のように、通常とhoverデザインが、コネクションの矢印で繋がっていたら成功です。
アニメーションの設定は、スマートアニメートに変更しておくと良いでしょう。

step3. プレビューの確認 

メインコンポーネントを変更したので、デザインに使っているインスタンスに反映されているか確認してみましょう。

トップページのファーストビューにある、ボタンのインスタンスを選択します。
デザインタブで見ると、プロパティ追加の反映が確認できます。

そして、プロトタイプタブ。
バリアントインタラクションとして、メインコンポーネントで設定したマウスオーバー時の設定が反映されています。

プレビューで動きを確認します。
マウスオーバーすると、徐々にドロップシャドウが表示されていれば成功です。

もちろん、ドロップシャドウだけではなく色を変えたりすることも出来ます。
変更先に設定するデザインの設定次第ですので、他のパターンも試してみましょう。

アイテムの固定

プロトタイプタブでは、インタラクションに加え、スクロールの動作という項目もあります。

こちらは、名称通り、スクロールしたときの表示をどうするかを設定します。

例えば、ヘッダーを上部に固定したかったら、ここを固定もしくは追従に切り替えればOK。
今回のようにページを示す役割のフレーム(top_pc)直下に、上部固定したいヘッダーのフレームがある場合は、追従で良いですね。

固定と追従には、以下のような違いがあります。

  • 固定:最初に指定された位置で、ずっと留まる
    position: absolute;+位置指定をした状態)
  • 追従:オブジェクトの上端を、親フレームが表示されている限り、最上部に留めるposition: sticky; + top: 0; を指定した状態)

Figma Learnでは、それぞれの違いを詳しく解説されています。
position: sticky でピンとこなかった方は、下記ページにある見本アニメーションをご確認いただくと、イメージがしやすいと思います。

まずは無料で14講座から始めましょう!

ハイクオリティな14講座/98レッスンが受け放題。
募集人数には制限があります。サインアップはお早めに。
無料申し込み期限
5月26日まで

募集 人数
100名 (残りわずか)

こちらもオススメ

×