Figmaでプロトタイプを作る方法

静的なFigmaのフレームを、コードを書く前にチームやクライアントがクリックして試せるプロトタイプに変える方法です。

  1. プロトタイプタブに切り替える

    右側パネル上部の「プロトタイプ」タブをクリックすると、画面同士をつなげるモードに切り替わります。

  2. フレーム同士をつなげる

    ボタンや要素を選択すると現れる青いコネクターをドラッグし、遷移先のフレームに接続します。この接続がクリック時の画面遷移の流れになります。

  3. トリガーとアニメーションを設定する

    接続線をクリックすると、クリックやホバーなどのトリガーと、ディゾルブやスマートアニメートといった遷移効果を選べ、実際のアプリのような自然な画面遷移を再現できます。

  4. プレゼンテーションモードでプレビューする

    右上の再生ボタンを押すと、作成したプロトタイプを実際の画面のようにクリックしながら確認できます。

  5. リンクを共有してフィードバックをもらう

    共有ボタンからプロトタイプのリンクを発行し、チームメンバーやクライアントに送れば、コードがなくても実際の使い勝手を事前にテストしてもらえます。

  6. なぜ役立つのか

    開発者がコードを書く前にクリックできるモックアップで画面遷移を検証できるため、企画段階で問題を発見でき、後からの修正コストを大きく減らせます。

トリガーの使い分け方

ボタンや通常の画面遷移には「クリック時」、スワイプできるカードやカルーセルには「ドラッグ時」、ツールチップやメニューには「ホバー時」、オンボーディング画面や自動で進むスライドには「一定時間後」が向いています。実際の操作に近いトリガーを選ぶことで、レビューでの説得力が大きく変わります。

スマートアニメートと通常の遷移の違い

通常の遷移は1つのフレームを丸ごと別のフレームに切り替えるだけですが、スマートアニメートは同じ名前のレイヤーを2つのフレーム間で対応させ、位置やサイズ、透明度の差分だけをアニメーションさせます。これにより、トグルの切り替えやタブ移動、メニューの展開などが滑らかに感じられます。

よくある質問

Figmaでプロトタイプを作るのにコードの知識は必要ですか?

必要ありません。プロトタイピングはFigma内でフレームをつなぐだけで完結し、HTMLやCSS、JavaScriptは不要です。コードが必要になるのは、開発者が実際の実装の参考としてファイルを使う段階になってからです。

Figmaのアカウントがなくてもプロトタイプを試してもらえますか?

多くの場合、共有リンクがあればブラウザだけでクリックして試せます。ただし共有設定によってはログインユーザーのみに閲覧を制限しているケースもあるため、送る前にリンクの権限設定を確認しておくと安心です。