WEBデザインを下層まで探せるWEBギャラリー・リンク集。
WEBサイト・LPを毎日更新していきます!

Figmaプロトタイプ入門｜基本操作から共有方法まで徹底解説

Figmaプロトタイプ入門｜基本操作から共有方法まで徹底解説

投稿者の画像

y.harima

2025.10.03

この記事を共有する

この記事を共有する

Close

もっと知らせる

Figmaのプロトタイプ機能を使えば、作ったデザインをそのまま「動く画面」に変え、実際の操作感を確かめられます。画面遷移やアニメーションも簡単に設定できるため、初心者でもユーザー体験 (UX) を意識したUIデザインを容易に作成できます。

また、プロトタイプを作成すると、チームメンバーやクライアントにデザイン意図を正確に伝えやすくなります。単なる見た目のデザインではなく、操作感や画面遷移の流れを体験してもらえるため、ユーザー体験（UX）の改善やフィードバックの取得も効率的に行えます。

本記事では、プロトタイプ機能の基本操作から設定方法まで、初心者にもわかりやすく解説します。

プロトタイプ機能とは？

Figmaのプロトタイプ機能では、作成したデザインをもとに画面の切り替えや細かい動作（マイクロインタラクション）を再現できます。

右側の「プロトタイプ」タブを開くと、ボタンや画像などの要素から矢印を引いて、遷移先の画面（フレーム）を直感的に設定できるようになります。

作成したプロトタイプをプレビューすると、実際のアプリやサイトのように画面が動くかを確認できます。

操作に慣れていない方は、Figma公式のチュートリアルも参考にすることもオススメです。

プロトタイプ設定

プロトタイプ設定とは、プレビュー環境を整えるための基本設定です。
デバイスの種類や画面の向き、背景色を指定することで、実際の利用環境に近い操作感を再現できます。

  1. デバイス設定
    「iPhone 16 Pro Max」など、表示デバイスを選択する部分。
  2. デバイスのフレームの設定
    「ブラックチーム」など、端末のフレーム色（縁）を選ぶ部分。
  3. デバイスの向きの設定
    縦向き／横向きを切り替えるアイコン。
  4. プレビュー画面の背景色の設定
    背景色のカラーピッカーとカラーコード。
  5. プレビュー画面
    実際に選んだ設定が反映されたプレビューの表示。

コネクションの作成

プロトタイプの要素同士をつなぐ「コネクション」を設定することで、ボタンや画像をクリックしたときの画面遷移を作成できます。

作成手順は以下の通りです。

  1. コネクションを作成したい要素（ホットスポット）を選択します。
  2. 「＋」をクリックして、コネクションを作成します。
  3. そのまま遷移先のフレームにドラッグして接続します。

プロトタイプ機能の用語

  1. HotSpot（ホットスポット）
    遷移を設定したい要素のこと。
    ボタンや画像など、ユーザーが操作する部分を指定します。
  2. Connection（コネクション）
    HotSpotから遷移先の画面（フレーム）へつなぐ矢印のこと。
    クリックやホバーなどの操作を設定する場所です。
  3. Destination（デスティネーション）
    遷移先の画面（フレーム）のこと。
    Connectionでつながる先を指定して、プレビューで画面遷移を確認できます。

フローの開始点の設定

プレビューを再生する際は、最初に表示されるフレームを開始点として設定します。
複数のフレームがある場合は、どの画面から確認するかを明確にしておくとスムーズです。

※既存のコネクションがない場合は、最初に作成したフレームが自動で開始点になります。

開始点の変更

プレビューの開始点を示す「再生ボタン」のアイコンをドラッグ&ドロップして別のフレームに移動させるだけで、開始点は後から簡単に変更できます。

開始点の追加

Figmaでは、複数のフロー開始点を設定しておくことも可能です。
追加するには、対象のフレームで「フロー開始点を追加」オプションを選択するだけで簡単に設定できます。

※同じプロトタイプ内で複数のユーザーの操作パターンがある場合に追加します。

インタラクションの設定

Figmaでは、画面上の要素にインタラクション（操作に応じた動き）を設定することで、ユーザーが実際に操作する感覚で画面の遷移やアニメーションを確認できます。

インタラクションは「トリガー」「アクション」「移動先」「アニメーション」「状態」の要素から成り立っています。

基本の設定手順は以下の通りです。

  1. インタラクションを追加したい要素（ボタンや画像など）を選択し、コネクションを設定します。
  2. 右側の「インタラクション」パネル、またはインタラクションのポップアップから詳細を設定します。
  3. 必要に応じてアニメーションを適用し、より自然な動きにします。

① トリガー

トリガーは、ユーザーの操作に合わせて画面や要素を動かすきっかけとして設定します。

トリガー名詳細主な用途
クリック時マウスでクリック、またはタップで実行。ボタン操作、画面遷移
ドラッグ時要素をスワイプ操作した時に実行。カル―セル、スライド操作
マウスオーバーカーソルが上にある間、実行。離れると戻る。ホバーエフェクト、ツールチップ表示
押下中マウスを押し続けている間、実行。離すと戻る。長押しプレビュー、ボタンの押し込み表現
キー/ゲームパッド指定キー/ボタンが押された時に実行。ショートカット、ゲーム操作
マウスエンターカーソルが領域に入った瞬間に実行。ドロップダウンの自動表示
マウスリーブカーソルが領域から出た瞬間に実行。オーバーレイの非表示
マウスダウンマウスボタンを押し下げた瞬間に実行。押下状態の開始
マウスアップ押し下げたボタンを離した瞬間に実行。クリック完了後のアクション
アフターディレイ指定時間が経過した後に自動実行。スプラッシュ画面、自動遷移

② アクション

アクションは、トリガーが発生した際に要素が行う動作です。

アクション名詳細主な用途
次に移動接続先のフレームへ画面全体を遷移させます。ページ遷移、フローの移動
次に変更コンポーネントの状態（バリアント）を切り替えます。ボタンやトグルの状態変化
戻るユーザーが閲覧した直前のフレームに戻ります。戻るボタンの機能、ナビゲーション
次にスクロール現在のフレーム内の指定したレイヤーや位置へスクロールさせます。ページ内ジャンプ、アンカーリンク機能
リンクを開くプロトタイプ外のURL（ウェブサイト）を新しいタブで開きます。外部サイトへの誘導、ドキュメントの参照
バリアブルを設定変数（Variable）の値を変更・設定します。カウンター、カートの合計金額など、動的なデータ処理
バリアブルモードを設定変数のコレクションのモード（例: ライト/ダーク）を切り替えます。テーマの切り替え
条件付きアクション特定の条件（例: 変数がAの場合）を満たした場合にのみアクションを実行します。複雑なフォームチェック、分岐のあるユーザーフロー
オーバーレイを開く指定したフレームを、現在の画面の上（オーバーレイ）に表示します。モーダルウィンドウ、ポップアップ、ドロップダウンメニューの表示
オーバーレイの入れ替え現在開いているオーバーレイを、別のアウトレイに置き換えます。モーダル内のステップ移動、オーバーレイ内のサブメニュー切替
オーバーレイを閉じる現在表示されているオーバーレイを非表示にします。モーダルやポップアップの「閉じる」ボタンの機能

③ 移動先

移動先はアクションの対象となるフレームやオーバーレイです。
遷移先を正しく設定しておくことで、プレビュー時に期待通りの画面が表示されます。

※複数のフロー開始点を設定している場合は、移動先を明確にすると異なるシナリオも簡単に確認できます。

④ アニメーション

アニメーションは、画面や要素の動きを滑らかに見せるために使用します。

アニメーション名詳細主な用途
即時アニメーションなしで、瞬時に次のフレームへ切り替えます。シンプルな画面遷移、状態の即時切り替え
ディゾルブ現在の画面がフェードアウトし、次の画面がフェードインします。滑らかな画面切り替え、オーバーレイの表示/非表示
スマートアニメート2つのフレーム間でレイヤー名が一致する要素の位置やプロパティの変化を自動的に補完・アニメーション化します。複雑なローディング、要素の移動、トランジション表現
ムーブイン次の画面が、指定方向から現在の画面の上にスライドして入ってきます。モバイルでの画面遷移、新規画面の立ち上がり
ムーブアウト現在の画面が、指定方向へスライドして出ていき、次の画面が表示されます。画面を閉じる/戻る動作、オーバーレイの退場
プッシュ次の画面が、現在の画面を押し出すように指定方向からスライドして入ってきますメインの画面遷移、フローの明確な進行
スライドイン次の画面が、現在の画面の上から指定方向へスライドして入ってきます。ムーブインと似ていますが、全体が覆われない表現も可能。オーバーレイ、パネル、ドロワーメニューの表示
スライドアウト現在の画面が、次の画面の上を指定方向へスライドして出ていきます。ムーブアウトと似ており、オーバーレイなどを閉じる際に使用。オーバーレイ、パネル、ドロワーメニューの非表示

アニメーションのカスタマイズ（曲線と所要時間）

アニメーションが「即時」以外を選択した場合に設定できます。
また、初期設定ではアニメーションがない「即時」に設定されているため表示されていません。

  • 曲線（イージング）
    動き方の変化を決める設定です。一定の速さで動く（Linear）、だんだん加速する（Ease In）、ゆっくり止まる（Ease Out）などを選べます。
  • 所要時間
    その動きにかかる長さを表し、短ければ素早く、長ければゆったりした動きになります。

⑤ 状態

状態とは、同じコンポーネントや要素の見た目や振る舞いのバリエーションを指します。

設定項目説明主な用途
スクロール位置をリセットフレーム間の遷移時にユーザーのスクロール位置をリセットします。長いページやリストで、遷移時に常に先頭から表示したい場合
コンポーネントの状態をリセットインタラクティブコンポーネントの状態（例：チェックボックスのオン/オフ）をリセットします。ボタンやチェックボックスの初期状態に戻したい場合
動画の状態をリセット動画の再生状態をリセットし、最初から再生を開始します。動画付き画面で再生を毎回初めから確認したい場合

※「動画の状態をリセット」は、Figmaの有料プランでのみ利用できる機能です。有料アカウントをお持ちの方は設定を確認してください。

テストと共有

アプリやサイトを開発する際には、ユーザー操作が正しく動作するかを確認するテストと、チームやクライアントとの成果物の共有が欠かせません。

テストでは画面の切り替えや表示内容に不具合がないかをチェックします。

プレビューの表示

作成したプロトタイプは、Figma上で簡単にプレビューできます。
右上の「再生ボタン」をクリックすると、別ウィンドウで操作可能な画面が表示され、実際の動作や画面遷移を確認できます。

  1. 新しいタブに表示
    プロトタイプのURLを共有したり、本格的なテストを行うために、別タブで開きます。
  2. プレビュー
    デザイン作業中に、画面内で素早く動作を確認するための小窓を表示します。

共有の仕方

プロトタイプはURLで共有可能です。
画面右上の「共有ボタン」を押してリンクを発行し、閲覧権限を設定すればチームメンバーやクライアントもプレビューできます。

共有モーダル

  1. リンクをコピー
    このファイルへのアクセスリンクをクリップボードにコピーする機能。
  2. メールアドレスで招待
    招待したいユーザーのメールアドレスを入力し、アクセス権限を設定して招待する機能。
  3. ユーザー全員 (アクセス権)
    ファイルにアクセス権を持つユーザーの一覧と、それぞれの権限（閲覧、編集、オーナー）を表示・管理する機能。
  4. オーナー（権限表示）
    ファイルの所有者（オーナー）が誰であるかを示す項目。（※画像では、所有者の名前の横に「オーナー」と表示されている部分）
  5. 共有オプション
    追加の共有方法を選択できるメニューです。
    これには、開発者モード、プロトタイプ、コミュニティ公開、埋め込み、およびFigJam専用のオプションが含まれます。
  6. ユーザー全員 (アクセス設定)
    組織外のユーザーを含め、リンクを知っている全ユーザーに与えるアクセス権を設定する機能。
  7. 権限（閲覧/編集）
    リンク共有時のデフォルトの権限（閲覧のみ、または編集可能）を選択する機能。
  8. パスワードが必要
    共有リンクにアクセスする際にパスワード認証を必須にし、セキュリティを強化する機能。

まとめ

プロトタイプは実際に作りながら覚えるのが一番の近道です。
最初はシンプルな画面遷移から始めてみてください。

プロトタイプ機能の操作ポイント

  • デバイス設定で画面サイズや向きを決める
  • コネクションを作成して画面遷移をつなぐ
  • フロー開始点を設定してプレビューの起点を明確にする
  • インタラクション設定でボタンや要素に動きをつける

「Figmaプロトタイプ」の実践解説動画はこちら 👇

プロトタイプ

「Figma 共有」の実践解説動画はこちら 👇

共有

関連リンク

もっと知らせる