Figmaを使ってプロトタイプをつくってみよう【初心者向け】

プロトタイプ（試作形）の作成は、プロダクトデザイナーの仕事に欠かせません。プロトタイプは、チーム、クライアント、ステークホルダー、ユーザーにデザインを説明できる貴重なツールです。

しかし、かつてはプロトタイプを作るには、プロトタイプ作成ツールの『InVision』しか選択肢がなく、高度なスキルが必要でした。しかし、いまはFigmaがあります。

InVisonよりは初心者向けのFigmaですが、それでも多くの機能やオプションがあるため、初めて使う際にはハードルが高く感じることもあるはずです。そこで、この記事では初心者がFigmaを使ってプロトタイプを制作する方法を解説します。

プロトタイプ制作の目的を明確にする

プロトタイプ制作の目的は、おもに4つあります。目的によって必要な内容が異なるため、まずはこれを明確にしておきましょう。

目的1. ユーザビリティテスト

プロトタイプを製作すると、デザインを開発にまわす前にユーザーのフィードバックを得て、想定される反応を検証できます。ユーザーに実際の製品のように感じてもらう必要があるため、できるだけリアルに作成しましょう。

目的2. デザインから開発への引き渡し

プロトタイプは、開発者がデザインの流れや機能性を理解するためにも役立ちます。アニメーションを多用したり、長い説明を書いたりしなくても、プロトタイプがあれば引き渡しのプロセスを円滑に進められます。

目的3. ステークホルダーへの説明

プロダクトマネージャーやCEOなどのステークホルダーにアイデアを伝える際にも、プロトタイプが役立ちます。ステークホルダーの種類やデザインプロセスのステージに応じて、実際の製品に非常に近いものから、ユーザーフローのみを示すシンプルなものまで、さまざまなプロトタイプが活用できます。

目的4. デザインの理解促進

プロトタイプ作成によって、デザインへの理解を促進し、ユーザーに望ましい反応をもらえるかを確認できます。

プロトタイプを作る場所を確認する

Figmaでは、さまざまな方法でプロトタイプを作成できます。

デザイン画面と同じページに作成する

デザイン画面と同じページでプロトタイプを構築するのが、一番シンプルな方法です。作業の重複を防ぎ、時間と労力を節約できます。

デザイン画面と別のページに作成する

デザイン画面を別のページにコピーして、そこでプロトタイプを作る方法もあります。デザインページやメモを共有することなく、他のチームメンバーや関係者とプロトタイプを簡単に共有できます。

ただし、複数のページを切り替える必要があるため効率が悪く、また片方だけを変更すると同期が難しくなります。

また、デザインファイルなしでプロトタイプを共有することも可能です。この方法だと、全員がすべての画面をひとつのビューで見ることができます。

Figmaファイルのページを分ける

大規模なプロトタイプを作る場合、Figmaファイルを分割することでファイルを軽くできます。しかしこのようなケースでは、そもそもノーコードツールで実際の製品を作るほうがいいかもしれません。複雑なプロトタイプの制作には時間がかかるため、ノーコードツールで実際の製品を作るほうが簡単で正確です。

▲プロトタイプのページを分けることもできる（出典：UX Planet）

Figmaを使ってプロトタイプをつくってみよう

プロトタイプパネルにアクセスする

Figmaのプロトタイプ機能を使いはじめるには、プロトタイプパネルにアクセスする必要があります。まず、デザインファイルで作業をしたいフレームを選びましょう。

つぎに、Figmaインターフェースの右側メニューにある「プロトタイプ」タブをクリックすると、すべてのプロトタイピングのオプションと設定が表示されます。

ここから、フレームの接続、インタラクションの追加、プロトタイプの動作のカスタマイズができます。

プロトタイプの作業がおわったら、右側メニューの「デザイン」タブをクリックし、デザインモードに戻りましょう。

▲矢印の先がプロトタイプパネル（出典：UX Planet）

フレームを接続する

フレームの接続は、プロトタイプの基本となるステップのひとつです。フレームを接続することで、プロトタイプの画面間にインタラクティブな関係を作ります。

フレームを接続するには、UIコンポーネント（たとえばボタンなど）を選択し、プラスアイコンをクリックしましょう。つぎに、ヌードル（接続用の青い矢印）をフレームから別のフレームへドラッグします。これで、ユーザーがボタンをクリックすると、つぎのページに移動するようにできます。

連結を削除したい場合は、クリックしてキーボードの「Delete」を押しましょう。

▲出典：UX Planet

開始点を設定し、管理する

開始点は、プロトタイプにおいてユーザーが最初に見る画面です。

開始点を設定するには、使用するフレームをクリックし、右側メニューの「フローの開始点」をクリックします。フレームの左上に小さな長方形が表示されるはずです。この長方形を選択し、他のフレームにドラッグすると、開始点が変更されます。

長方形をダブルクリックして、それぞれの開始点に名前をつけておきましょう。とくに複数の開始点がある場合、名前があることでプロトタイプを整理しておけます。

▲矢印の先が「フローの開始点」（出典：UX Planet）

プロトタイプのデバイスを選択する

Figmaでは、プロトタイプに特定のデバイスを選択できます。プロトタイプをよりリアルで正確に見せるためにも、デバイスを選択しておきましょう。

デバイスを設定するには、作業したいフレームを選択し、右側メニューの「プロトタイプ設定を表示」をクリックします。つぎに、右側パネル上部の選択メニューから、必要なデバイスを選択します。

▲左側の矢印の先が「プロトタイプ設定を表示」、右側がデバイスの選択画面（出典：UX Planet）

プロトタイピングモードで遊んでみる

インタラクティブな環境でプロトタイプを試せるプロトタイピングモード（「Present」モード）で、デザインのフロー、インタラクション、ユーザー体験を確認しながら遊んでみましょう。接続を設定したUI要素をクリックするたびに、つぎの画面に遷移するはずです。

プロトタイピングモードにアクセスするには、Figmaインターフェースの右上にある再生ボタンをクリックします。最初に表示されるのは、設定した開始点のある画面です。

▲矢印の先が再生ボタン（出典：UX Planet）

メニューのオプションをクリックすると、画面サイズの調整も可能です。「実際のサイズ」「画面にあわせる」「幅にあわせる」「画面を塗りつぶす」という4つのオプションから選択できます。

また、右上のフルスクリーンアイコンをクリックすると、Figmaプロトタイプをフルスクリーンモードで表示することも可能です。

プロトタイプをリセットしたい場合、スクリーンの右下にある再起動ボタンをクリックしましょう。プロトタイプをリセットして、開始点に戻れます。

▲右上の左側矢印の先が画面サイズの調整、右側がフルスクリーン、右下が再起動（出典：UX Planet）

プロトタイピングモードでさまざまな開始点を選択する

たとえば、ECサイトのアプリをデザインするとします。登録ユーザーとゲストユーザーによってフローが異なる場合、登録ユーザー用とゲストユーザー用で、ホームが2つ必要になりますよね。

このように、複数の開始点を設定し、プロトタイピングモードで選択することも可能です。

▲矢印の先から異なる開始点を選択できる（出典：UX Planet）

プロトタイプを共有する

プロトタイプを共有するには、Figmaインターフェースの右上にある再生アイコンをクリックし、プロトタイピングモードにアクセスします。アクセスできたら、画面の右上にある共有ボタンをクリックしましょう。リンクをコピーしたり、メールで直接招待できるモーダルが開きます。

▲矢印の先にあるボタンから共有できる（出典：UX Planet）

また、モーダルからプロトタイプにアクセスする人の権限を制限することも可能です。リンクを持っている人全員に設定することも可能ですが、原則として招待された人だけに設定し、安全性を確保しましょう。

プロトタイプの共有とFigmaファイルの共有の違いは、プロトタイプを共有すると現在のモードでデザインを試すことができるリンクが提供されるのに対し、Figmaファイルを共有するとデザインファイルへのアクセスが可能になることです。

たとえばユーザビリティテストを実施する場合、ユーザーにはプロトタイプへのリンクを共有するのが無難でしょう。

しかし、プロダクトマネージャーやチームの関係者なら、Figmaファイルを共有してもいいかもしれません。ファイルから再生ボタンをクリックすれば、プロトタイプの閲覧も可能です。

▲矢印の先からアクセス権の範囲を変更できる（出典：UX Planet）

おわりに

Figmaには魅力的な機能がたくさんありますが、まずは基本をおさえることが重要です。

プロトタイプを制作する目的を明確にし、需要にあった内容のプロトタイプを制作してみましょう。

また、プロトタイプを共有する前に、かならず徹底的にテストしましょう。フローがシームレスに機能し、プロトタイプにエラーがないことを確認するのが重要です。

シェフが料理を出す前に味見するのと同じく、プロトタイプも自分でテストしましょう。

（執筆：Edward Chechique　翻訳：Asuka Nakajima　編集：少年B　提供：UX Planet）