▶ 3日で初案件PR
この記事でわかること
Figmaプロトタイプは、フレーム2枚をコネクションでつなぎ、On click＋Navigate toを設定すれば最短5分で動く試作物になります。開始点を設定してプレビューURLを共有すれば、クライアントがブラウザ上で操作でき、口頭説明なしで確認依頼を完結できます。まずは2画面の最小構成から始めて、動作確認を繰り返しながら画面を増やすのが、実務で詰まらずに進める方法です。
今の仕事について、一番近いものは？
Figmaプロトタイプは5ステップで作れる
画面遷移が再現できるプロトタイプの基本は、操作の順番さえ覚えれば初日でも動かせます。フレームを2枚用意して、その2枚だけをつなぐ最小構成から始めるのが、詰まらずに進むための出発点です。
ステップ1：フレームを2枚用意する
遷移元と遷移先のフレームがキャンバス上に2枚必要です。Fキーを押してキャンバス上をドラッグするとフレームを作成できます。デバイスに合わせたサイズを選ぶ場合は、右サイドバーのフレームサイズ一覧（iPhone・Desktop等）から選択します。1枚目が「ホーム画面」、2枚目が「遷移先画面」という想定でまず2枚だけ作るのが、迷わず進むためのポイントです。フレームが1枚しかない状態でプロトタイプタブを開いても、コネクションの接続先がないためコネクションを引けません。作業を始める前に、キャンバスにフレームが2枚以上あることを確認してください。
ステップ2：プロトタイプタブを開く
右サイドバー上部には「Design（デザイン）」と「Prototype（プロトタイプ）」の2つのタブがあります。デフォルトはDesignタブになっているため、Prototypeタブをクリックして切り替えます（Figmaプロトタイピングガイド）。プロトタイプタブを開くと、サイドバーに「Flow」「Interaction」「Device」の項目が表示されます。コネクションを作成する青いノードは、この状態でフレームや要素にカーソルを乗せたときに初めて出現します。
ステップ3：コネクションを作る
プロトタイプタブが開いている状態で、遷移元フレーム内のクリック対象（ボタン等）にカーソルを乗せます。要素の右端に青い丸（コネクションノード）が表示されるので、その丸をドラッグして遷移先フレームの上で放します。矢印線がフレーム間につながれば、コネクション作成は完了です。ボタン要素ではなくフレーム全体にカーソルを乗せると、ノードの出現位置がフレームの枠になります。意図した要素に対してインタラクションを設定したい場合は、フレームではなくその要素を直接選んでからノードをドラッグすると、後から混乱しません。
ステップ4：インタラクションを設定する
コネクションを作成すると、右サイドバーに「Interaction」パネルが表示されます。基本設定として確認する項目は、Trigger・Action・Animationの3つです。Triggerは「On click（クリック時）」、Actionは「Navigate to（遷移先フレームへ移動）」を選びます。Animationは「Instant（即座に切り替わる）」か「Dissolve（フェード）」から始めると挙動を把握しやすいです。スマートアニメートは動きを凝らしたい段階で後から加えれば十分で、最初から設定しようとすると条件を満たせず動かないという状況が起きやすくなります。
ステップ5：開始点を設定してプレビューする
プロトタイプの再生を開始するフレームを明示するために、開始点を設定します。開始点にしたいフレームを選択し、右サイドバーの「Flow」セクションにある「＋」ボタンをクリックすると「フローの開始点」が追加されます。開始点を設定したら、画面右上の「▶（プレビュー）」ボタンを押してプレビューウィンドウを開きます。コネクションでつないだ要素をクリックして、設定どおりに画面が遷移するかを確認します（Figma公式プロトタイピング紹介）。
CHECK
▶ 今すぐやること: フレームを2枚作り、プロトタイプタブを開いてコネクションを1本つなぐ（5分）
Q: フレームではなくグループやコンポーネントでもプロトタイプを作れますか？
A： コネクションの接続先はフレームである必要があります。グループはコネクションの接続先に指定できません。遷移先として機能させたい画面は、必ずフレームとして作成してください。
Q： プロトタイプタブを開いてもコネクションノードが表示されない場合はどうすればよいですか？
A： 対象の要素またはフレームにカーソルを乗せるとノードが出現します。クリックして選択状態にするのではなく、カーソルをホバーさせた状態で右端に青い丸が出るかを確認してください。フレームの外のキャンバス上にカーソルがある状態ではノードは表示されません。
コネクションは青いノードをドラッグして設定
コネクションの操作は「ドラッグして放す」だけですが、最初はどの要素を操作すれば正しいのか迷うことが多くあります。どの要素にノードを出すかによってインタラクションの対象が変わるため、目的に合った対象を選ぶ意識が実務では求められます。
フレーム全体に対してつなぐ場合
フレーム全体をタップ領域にしたい場合（スプラッシュ画面などで「どこかタップしたら次へ」という設計）は、フレームそのものにカーソルを乗せてノードをドラッグします。この方法は操作が簡単な反面、フレーム内の特定要素だけを反応させたい場合には向きません。用途を誤ると「ボタン以外をタップしても遷移してしまう」というフィードバックをクライアントからもらいやすいため、意図を確認してから使ってください。
特定ボタンに対してつなぐ場合
ボタンや画像など特定の要素をクリック対象にしたい場合は、その要素を選択またはホバーした状態でノードをドラッグします。フレームの中をクリックして要素を選択してからプロトタイプタブに切り替えると、その要素のノードが表示されます。コンポーネント化されたボタンにコネクションを設定すると、同じコンポーネントを使っているすべての箇所に同じインタラクションが反映されることがあるため、案件によってはインスタンスごとに設定を上書きする判断も必要になります。
複数のコネクションを管理する
画面数が増えると、1つのフレームに複数のコネクションが混在します。コネクション線が交差して見づらくなったときは、対象の要素を選択すると右サイドバーのInteractionパネルに設定一覧が表示されるため、そこで確認・修正するほうが個別の矢印線を辿るより早いです。フレーム名を「01_ホーム」「02_詳細」のように番号プレフィックスで整理しておくと、コネクション設定時の接続先選択で迷いにくくなります。フレーム名がデフォルト（Frame 1、Frame 2）のまま画面数が10を超えると、どのフレームが何の画面か判別できなくなります。なお、Figmaを使ったデザイン作業全般の作業効率を上げる方法としては、ツール操作の型を早めに固定しておくことが有効です。
Q: 一度作ったコネクションを削除したい場合はどうすればよいですか？
A： 削除したいコネクションの矢印線を選択し、Deleteキーを押すと削除できます。矢印線はプロトタイプタブが開いている状態でないと選択できないため、デザインタブのまま削除しようとしてもうまくいきません。
Q： 遷移先フレームを後から変更できますか？
A： コネクション線を選択すると、右サイドバーのInteractionパネルで「Navigate to」の接続先を変更できます。コネクション線の矢印を直接ドラッグして別のフレームに接続し直すことも可能です。
Figmaプロトタイプの設定は3項目で制御できる
インタラクション設定のTrigger・Action・Animationの3項目を理解すると、「どういう操作でどこへどう移動するか」を目的に合わせて組み合わせられます。最初は最小の組み合わせだけ覚えれば十分で、案件の要件に応じて拡張していくのが詰まらずに進むやり方です。
Trigger：何をしたら動くか
よく使うTriggerは「On click（クリック時）」と「While hovering（ホバー中）」の2種類です。クリック遷移はボタン押下のシミュレーション、ホバーはナビゲーションのプルダウン表示など、マウスオーバー状態を再現したいときに使います。モバイル前提のプロトタイプでは、On clickをタップ操作の代替として使えます。On drag（ドラッグ）も選択できますが、スワイプ操作の再現はデバイス設定や表示環境に依存するため、初期段階ではOn clickから始めて、後から必要に応じて変更するのが安全です。
Action：どうなるか
最も使うのは「Navigate to」で、指定したフレームへ画面が切り替わります。もう1つよく使うのが「Open overlay」で、現在の画面の上にモーダルやポップアップとして別フレームを重ねて表示する際に使います。Back（前の画面に戻る）は戻るボタンの実装に使え、コネクションを作らなくても機能します。案件初期のプロトタイプではNavigate toとBackだけで大半の遷移設計をカバーできるため、まずこの2つを確実に使えるようにしておくと提案準備が速くなります（Figmaプロトタイピングガイド）。
Animation：どう動くか
Animationは画面が切り替わるときの視覚効果を設定します。主な選択肢は「Instant（即切替）」「Dissolve（フェード）」「Slide in（スライドイン）」「Smart animate」の4種類で、初期値はInstantです。クライアントへの確認用プロトタイプでは、画面遷移の構造が伝わることを優先してInstantかDissolveを使い、演出の細かさよりも動作の確実さを重視する判断が多くなります。アニメーション種類を増やしたい段階になったら、Smart animateに移行するのが自然な流れです。
CHECK
▶ 今すぐやること: 手元のプロジェクトでOn click＋Navigate toの組み合わせを1本設定し、プレビューで動作確認する（3分）
Q: Triggerを「After delay」に設定するとどうなりますか？
A： 設定した秒数が経過すると自動で遷移します。スプラッシュ画面や案内画面を一定時間表示してから次の画面へ進む動作を再現できます。遅延時間はミリ秒単位で指定でき、1000msが1秒です。
Q： 1つのボタンに複数のインタラクションを設定できますか？
A： できます。右サイドバーのInteractionパネルで「＋」ボタンを押すと、同一要素に複数のインタラクションを追加できます。たとえば「On click → Navigate to」と「While hovering → Change to（バリアント変更）」を同時に設定してホバー変化とクリック遷移を両立できます。
スマートアニメートは3条件で動く
スマートアニメートを設定したのに何も変わらないという状況は、3つの条件を事前に把握しておくと防げます。
条件1：2つのフレームに同名のレイヤーがある
スマートアニメートは、遷移前後のフレームで「同じ名前のレイヤー（またはコンポーネント）」が存在する場合に、その要素の位置・サイズ・不透明度などの変化を補間します。レイヤー名が1文字でも異なると、別の要素と認識されてアニメーションは発生しません。フレームをコピーして一部を変更する作り方をすると、レイヤー名が自動的に一致するため条件を満たしやすくなります（FigmaアニメーションとSmartanimate解説）。
条件2：AnimationにSmart animateを選択している
コネクションのAnimationドロップダウンで「Smart animate」を明示的に選択してください。InstantやDissolveを選択した状態では、レイヤー名が一致していてもスマートアニメートは発動しません。設定し忘れてインタラクションを確認し、「やっぱり動かない」という状況はよくある失敗パターンです。
条件3：変化を補間できるプロパティが変わっている
位置・サイズ・回転・不透明度・カラーなど、スマートアニメートが補間できるプロパティが遷移前後で変化していることが必要です。遷移前後のフレームが完全に同じデザインの場合、動きが生じる変化がないため何も起きません。「どの要素がどのくらい変化するか」を意識してフレームを設計すると、意図した動きを再現しやすくなります。Auto layoutと組み合わせると、要素の並び替えやサイズ変化をスマートアニメートで自然に動かせるため、案件でよく求められるリスト展開やアコーディオンメニューの再現に有効です。
Q: コンポーネントのバリアントとスマートアニメートはどう組み合わせますか？
A： バリアントはコンポーネントの状態（Default・Hovered・Pressed等）を定義する機能です。While hoveringのインタラクションでバリアントを切り替えながらSmart animateを選択すると、マウスオーバー時に要素が滑らかに変化する表現を実現できます。バリアントプロパティ名と値が遷移前後で一致していることが動作の前提条件です。
Q： スマートアニメートのイージング（緩急）は変更できますか？
A： できます。AnimationをSmart animateに設定すると、右サイドバーにイージングの選択肢が表示されます。Linear（一定速度）・Ease in・Ease out・Ease in and out・Customから選択でき、Customを選ぶとベジェ曲線を自分で調整できます。
PR提供: 日本デザインスクール（デザスク）
自分の作業状態を3分で診断
プロトタイプ作業で詰まったとき、どの段階で止まっているかを特定すると、解決までの手順が明確になります。
「プロトタイプタブを開いているか？」を確認してください。開いていない場合は、右サイドバー上部の「Prototype」タブをクリックして開きます。このタブを開かないとコネクションノードが表示されません。開いている場合は次の確認に進みます。
「フレームが2枚以上キャンバス上にあるか？」を確認します。フレームが1枚しかない場合、Fキーを押してフレームを追加してください。コネクションの接続先がなければ線を引けません。2枚以上ある場合は次の確認に進みます。
「青いノードをドラッグして矢印線が表示されているか？」を確認します。矢印線が出ていない場合、要素またはフレームにカーソルをホバーさせると青い丸が右端に表示されます。その丸をドラッグして遷移先フレームの上で放します。ドラッグを放す位置がフレーム外になるとコネクションが作成されない場合があります。矢印線が表示されている場合は次の確認に進みます。
「プレビューで画面が遷移するか？」を確認します。遷移しない場合、Triggerが「On click」、ActionのNavigate toで正しい遷移先フレームが指定されているか、右サイドバーで確認してください。遷移する場合、基本プロトタイプの完成です。開始点の設定と共有リンク発行に進んでください。
Q： ドラッグ操作をしてもコネクション線が作れない場合の対処法は？
A： プロトタイプタブが開いているか、ドラッグ開始位置が青いノードの上になっているかを確認します。ノードはカーソルを乗せたときにだけ表示されるため、ノードが見えた瞬間に素早くドラッグを開始してください。Figmaの画面をズームアウトしすぎているとノードが小さくて掴みにくくなるため、ズームを100〜125%程度に調整してから試すと操作しやすくなります。
Q： 開始点が設定できない場合はどうすれば良いですか？
A： 開始点を設定するには、フレームを直接選択（フレーム内の要素ではなく、フレームそのもの）した状態でプロトタイプタブを開き、サイドバーの「Flow」セクションの「＋」をクリックします。フレーム内の子要素が選択されている状態では、Flowセクションが表示されないことがあります。
フリーランスが実務で使えるプロトタイプは2段階で管理
フリーランスの案件では、プロトタイプを「構造確認用」と「演出確認用」の2段階に分けて作ると、クライアントとのフィードバックが整理しやすくなります。1つのプロトタイプにすべてを詰め込もうとすると、修正コストが高くなります。
段階1：ワイヤーフレーム段階のプロトタイプ
画面の構成・遷移の流れ・情報の配置を確認するための最小プロトタイプです。デザインの細部よりも「どこをタップしたらどこに行くか」を伝えることを目的とするため、グレーボックスと仮テキストで作ったフレームでも十分機能します（Figmaを使ってプロトタイプをつくってみよう【初心者向け】）。
この段階ではAnimation設定をInstantにしておくと、遷移の構造確認に集中できます。クライアントから「ここのボタンの配置を変えたい」というフィードバックをもらってからデザインを詰めると、手戻りを減らせます。
段階2：ビジュアル確認用のプロトタイプ
デザインが固まった後、実際の見た目で動作を確認するプロトタイプです。ここでスマートアニメートやDissolveを使って動きを加え、開発者との仕様共有や最終クライアント承認に使います。アニメーション設定をこの段階で加えると、ビジュアルと動きを同時に変更する必要がなくなります。
段階1をスキップしていきなりビジュアルを作り込んだプロトタイプを作ると、「画面構成を変えたい」という修正が来たときにすべてのフレームを作り直す手間が生じます。フリーランスの案件でスケジュールが圧迫されているときに、最もコストが高くなるのがこのパターンです。Figmaでポートフォリオをまとめる方法でも触れているとおり、構造を先に固めてからビジュアルを詰める順序が実務では有効です。
プレビューURLの共有方法
画面右上の「Share」ボタンからプロトタイプ専用の共有リンクを発行できます。共有設定で「Anyone with the link（リンクを持つ全員）」に権限を変更すると、Figmaアカウントを持たないクライアントでもブラウザ上でプロトタイプを操作できます（Figmaプロトタイピングガイド）。共有リンクを送る前に、プレビューで自分の環境から操作して動作を確認する習慣をつけると、「リンクを開いたら何も動かなかった」というクライアントからの問い合わせを事前に防げます。
CHECK
▶ 今すぐやること: 現在のプロジェクトでShareボタンを開き、「Anyone with the link」に権限を設定してプレビューURLをコピーする（2分）
Q: スマホでプロトタイプを確認する方法はありますか？
A： Figma Mirrorアプリ（iOS・Android）を使うと、スマホ上でリアルタイムにプロトタイプを確認できます。アプリを開いてFigmaアカウントにログインし、デスクトップ版のFigmaで対象フレームを選択すると、スマホ画面にそのフレームが表示されます。クライアントにスマホで確認してもらいたい場合は、共有リンクをスマホのブラウザで開いてもらう方法でも対応できます。
Q： デバイス設定をiPhoneにすると、プレビューの見た目はどう変わりますか？
A： プレビューウィンドウにiPhoneのフレーム画像が表示され、その中にフレームの内容が表示されます。クライアントに「実際のスマホでどう見えるか」を伝えやすくなります。デバイス設定は右サイドバーの「Device」セクションから変更でき、フレームを選択していない状態でプロトタイプタブを開くとページ全体のデバイス設定を変更できます。
Figmaプロトタイプの作り方に関するよくある質問
Q: Figmaの無料プランでもプロトタイプは作れますか？
A： 作れます。Figmaの無料プランでもプロトタイプの作成・共有・プレビューは利用できます。制限があるのはファイル数やプロジェクト数で、プロトタイプ機能の利用自体は無料プランでも制約なく使えます（Figma公式プロトタイピング紹介）。
Q： プロトタイプのコネクションが多くなって管理しにくくなった場合の対処法は？
A： フレーム名を「01_」「02_」のような番号プレフィックスで整理し、ページを「プロトタイプ用」と「デザイン編集用」に分けると管理しやすくなります。コネクションが複雑になってきたら、Figmaのページ機能を使って画面群を分割し、フローごとにページを分けるのも有効です。
Q： プロトタイプとモックアップの違いは何ですか？
A： モックアップは見た目を静止画で再現したもので、画面操作のシミュレーションはできません。プロトタイプは画面遷移やインタラクションを動かせるもので、ユーザー操作の流れを確認できます。クライアントへのデザイン確認では、画面を操作してもらいたい場合にプロトタイプを、完成イメージの見た目を確認してもらいたい場合にモックアップを使い分けるのが実務の標準です。
Q： コンポーネントを使うと、プロトタイプの修正はどう楽になりますか？
A： ボタンをコンポーネント化しておくと、コンポーネントにインタラクションを設定した場合、そのコンポーネントを使用しているすべての箇所に設定が反映されます。インタラクションをインスタンスごとに個別設定したい場合は、インスタンスごとに上書き設定が必要になります。修正コストの削減と個別設定の柔軟性のどちらを優先するかを、プロジェクトの規模に応じて判断してください。
フリーランスとしてCanvaで提案書を作る方法と同様に、Figmaのプロトタイプも「構造を先に示す」という意識で運用すると、クライアントとの確認が効率化されます。
まとめ：Figmaプロトタイプは最小構成から始めて確認しながら拡張
Figmaプロトタイプは、フレームを2枚用意してコネクションを1本つなぐだけで動く状態になります。最初の段階で必要な設定はOn click＋Navigate to＋開始点の3つで、スマートアニメートや複雑なインタラクションはその後に追加します。実務では「構造確認用」と「演出確認用」を分けて段階的に作ることで、クライアントとのやり取りを効率よく進められます。
プロトタイプを初めて動かした瞬間、設定した画面が実際に遷移するのを確認できると、次の機能を試したくなります。まず1本のコネクションを確実につなぐことに集中して、そこから1画面ずつ追加していくのが、大きな案件でも詰まらずに完成させる方法です。
| 状況 | 次の一歩 | 所要時間 |
| まだ1本もコネクションを作っていない | フレームを2枚作りプロトタイプタブを開く | 5分 |
| コネクションはあるが動かない | Interactionパネルを開いてTrigger・Action・Animationを確認 | 3分 |
| 動いたがクライアントに共有できていない | ShareボタンからプレビューURLを発行 | 2分 |
| 画面数が多くて管理が大変 | フレーム名を番号プレフィックスで整理し直す | 10分 |