この記事でわかること
FigmaのAI機能（Text to Design）で初期フレームを2分以内に生成する方法、変数と条件ロジックを組み合わせてログイン状態の切り替えを再現する実装手順、コンポーネント化・フロー図確認・動画共有の3習慣でプロトタイプ作成時間を短縮する方法がわかります。
FigmaのAI機能でデザインを生成し、手動接続でプロトタイプを完成させるまでの全工程は5ステップで完了します。変数と条件ロジックを使えば、ログイン状態の切り替えなど高度な挙動も再現できます。この記事ではフリーランスが納期内に納品できる最短ルートを解説します。
この記事の結論
FigmaのAIプロトタイプ作成で核心となるのは「AI生成でデザインを速める、接続は手動で確実に行う」という役割分担の徹底です。Text to Design機能で初期フレームを数分で用意し、PrototypeタブのConnectionで画面を繋ぎ、変数・条件ロジックで動きを制御すれば、クライアントが「本物っぽい」と感じる品質に到達できます。AIに頼りすぎず、自動化できる部分とできない部分を区別することが、フリーランスとして最も効率的なワークフローです。
今日やるべき1つ
既存のFigmaファイルを開き、2画面を選んでPrototypeタブから青い丸ノードをドラッグして接続し、Shift+Pでプレビュー確認まで完了させてください（所要時間：10分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| AI機能の使い方から知りたい | FigmaAIプロトタイプは5ステップで作成 | 5分 |
| 変数・条件ロジックを今すぐ実装したい | FigmaAIプロトタイプは変数で動きを制御 | 7分 |
| アニメーションを改善したい | FigmaAIプロトタイプは3手法で品質向上 | 5分 |
| 自分の状況を診断したい | FigmaAIプロトタイプの習熟度を3分で診断 | 3分 |
| 効率化のコツを知りたい | FigmaAIプロトタイプは5つの時短で完成 | 8分 |
FigmaAIプロトタイプは5ステップで作成
現状のFigmaでは「AI生成=デザイン、接続=手動」という役割分担になっています。この仕組みを理解するだけで、迷わずに作業が進められます。
Text to DesignでAI生成は2分で完了
FigmaのAI機能「Text to Design」は、テキスト入力からフレームとコンテンツを数分で生成します。右上メニューのFigma AI（ベータ）から「Generate with AI」を選び、「ログイン画面、メールアドレスとパスワードフィールド付き」のように自然言語で入力すると、デザインフレームが自動生成されます。生成所要時間は30秒から2分が目安です。ただしAIが生成するのはあくまでデザインの外観であり、画面遷移の接続はこの段階では行われません。AI生成を「素材の準備工程」と位置づけることが、無駄な時間を省く第一歩です。
Prototypeタブから画面を接続する手順
AI生成または手動作成した2枚以上のフレームを用意したら、右パネル上部の「Prototype」タブに切り替えます。接続元フレームをホバーすると青い丸ノードが現れるので、これを接続先フレームまでドラッグすると矢印が引かれて接続完了です（Figma公式：プロトタイプ機能）。接続後は「Interaction details」パネルでTrigger（On click等）、Action（Navigate to等）、Animation（Smart Animate等）の3項目を設定します。この3項目の設定を省略すると、クリックしても何も起きないプロトタイプになるため、接続後は必ずパネルを確認してください。
Interaction detailsの3項目を設定する
Triggerはユーザーの操作起点で、On click（クリック）、On hover（ホバー）、On drag（ドラッグ）の3種類が頻繁に使われます。Actionは操作後の動作で、Navigate to（別画面へ遷移）、Open overlay（ポップアップ表示）、Swap overlay（既存ポップアップと差し替え）が実務でよく使われます。Animationは画面の切り替え演出で、Smart Animate、Dissolve、Slideなどから選びます。3項目を設定すると、Shift+Pで起動するプレビューモードで実際の動きが確認できます（Figma公式ヘルプ：プロトタイピングガイド）。
フローの開始点を設定してクライアントに共有
プロトタイプのどの画面からユーザーが操作を開始するかを「フローの開始点」として設定します。開始したい画面を選択し、Prototypeタブ内の「Flow starting point」右の「+」をクリックすると設定完了です。この設定をしないと、クライアントがプレビューを開いた際にランダムな画面から始まり、フローが伝わりません。共有は画面右上の「Share」から「View-only」リンクを送ることで、Figmaアカウントを持たないクライアントでも確認できます。設定から共有完了まで5分以内で完了します。
AIで生成したデザインをプロトタイプに接続するポイント
Text to Designで生成したフレームをそのまま接続しようとすると、要素のグルーピングが崩れていて青い丸ノードが思った位置に出ないことがあります。AI生成後はまずフレーム内の要素を確認し、ボタンとなるテキストやアイコンが正しくAutoレイアウト内に収まっているかを確認してください。問題がある場合は要素を選択してCtrl+G（グループ化）するだけで解消されるケースが大半です。Figma AIデザインの全機能を把握しておくと、AI生成の時短効果と生成後の整理作業の両方を効率化できます。
CHECK
▶ 今すぐやること: 手元のFigmaファイルで任意の2フレームをPrototypeタブから接続し、Shift+Pでプレビューを確認する（10分）
Q: AI生成したデザインは何画面作っておくとよいですか？
A： 最低でも「開始画面」「操作後画面」「エラー時画面」の3画面を用意すると、クライアントへの説明に十分な品質になります。複雑なフローが必要な場合は5〜7画面が目安です。
Q： Figma無料プランでプロトタイプは作れますか？
A： 基本的な画面接続とプレビュー共有は無料プランでも利用できます。変数と条件ロジックはFigmaのProfessionalプラン以上が必要です（Figma料金プラン）。
FigmaAIプロトタイプは変数で動きを制御
変数と条件ロジックは一度仕組みを理解すると、クライアントが実際の開発で使うような挙動をFigmaだけで再現でき、フィードバックの精度が格段に上がります。
変数（Variables）の種類と作成手順
変数はプロトタイプ内で動的に変化する値を保持するしくみです。Local variablesパネル（右上メニューの「Local variables」または「Assets」タブから「Variables」）を開き、「+」ボタンで新規作成します。型はBoolean（true/false）、Number、String、Colorの4種類があり、ログイン状態の管理にはBooleanが最適です。例として「isLoggedIn」という変数を作り、初期値をfalseに設定します。この変数の値をプロトタイプ操作中に変化させることで、画面の表示や非表示を動的に切り替えられます。なお、変数機能はFigmaのProfessionalプラン以上でのみ利用できます。
条件ロジックでボタン表示を切り替える実装
条件ロジックは「ある変数がこの値のとき、このActionを実行する」という分岐処理です。まずInteraction detailsパネルのAction欄を「Conditional」に変更します。次に「If」欄でisLoggedIn = trueの場合は「ホーム画面へ遷移」、それ以外の場合は「ログインエラー画面へ遷移」のように2パターンを設定します。この設定により「ログイン済みのときだけ先に進める」という挙動が完成します。言葉で説明するより実際に触って確認してもらえるため、クライアントへの説明コストが下がります。フリーランスのポートフォリオ作成においても、このような動的プロトタイプが提案力を高める武器になります。
変数と条件ロジックを組み合わせたナビゲーション実装
ログイン後のナビゲーション状態管理は変数と条件ロジックの組み合わせで実現します。「currentPage」というString型変数を作り、「home」「profile」「settings」などのページ名を値として設定します。各ナビゲーションボタンにOn clickでSet variable（currentPage = “profile”）のActionを設定し、各コンテンツエリアの表示非表示をcurrentPageの値で制御します。この構成で実装すると、タブ切り替えUIを1セットのフレームで表現できるため、フレーム数を削減できます。
CHECK
▶ 今すぐやること: Local variablesで「isLoggedIn」Boolean変数を1つ作成し、ログインボタンのOn clickにSet variable（true）を設定する（15分）
Q: 変数の値はプレビュー終了後にリセットされますか？
A： はい、プレビューを閉じると変数は初期値に戻ります。テスト中に意図しない状態を引き継ぐことはありません。
Q： 変数の数に上限はありますか？
A： 公式ドキュメントで明示された上限はありませんが、変数が増えると管理が煩雑になるため、プロジェクトごとに整理してください。
FigmaAIプロトタイプは3手法で品質向上
Smart Animateの使い方を正確に把握するだけで、手動設定の時間を削減できます。アニメーションの微調整に時間を取られて納期が迫る状況を、3つの手法で解消してください。
Smart Animateで滑らかな遷移を自動生成する
Smart Animateは、接続元と接続先のフレームに「同名かつ同種のレイヤー」が存在するとき、その差分を自動補間してアニメーションを生成する機能です。接続元フレームと接続先フレームで移動・拡大させたい要素のレイヤー名を完全一致させてください。例えばどちらのフレームにも「card_component」というレイヤーがあれば、位置やサイズの変化をFigmaが自動で補間します。Smart Animateで同名レイヤーを揃えておけば、アニメーション設定が短時間で完了します。
Overlayでポップアップとモーダルを1フレームで管理
Overlayは既存の画面の上に別フレームを重ねて表示する機能で、「削除確認モーダル」「通知トースト」などのUIを実装するのに適しています。ActionをOpen overlayに設定し、Position（画面中央、クリック位置等）とBackground interaction（操作可否）を選びます。Overlayを使えばポップアップ系UIをすべて専用フレームに集約でき、ファイル管理が単純になります。
Preserving scroll positionでスクロール状態を維持する
長い画面の途中でタブ切り替えを行う場合、遷移後にスクロール位置が先頭に戻るとクライアントが混乱することがあります。Interaction detailsパネルのAnimation設定内にある「Preserve scroll position」をオンにすると、遷移後も元の位置を維持できます。この設定はデフォルトでオフになっているため、見落としがちな設定の1つです。プロトタイプの品質を高めて納品する際は、作業効率を上げる仕組み化の方法を活用してレビュー工程自体も効率化することをおすすめします。
CHECK
▶ 今すぐやること: 接続2画面で主要要素のレイヤー名を完全一致させ、AnimationをSmart Animateに変更してプレビューを確認する（10分）
Q: Smart Animateが効かない場合、最初に確認すべきことは？
A： 接続元と接続先でレイヤー名が完全一致しているかを確認してください。スペルミスや大文字小文字の違いがあると補間されません。
Q： アニメーションの速度（Duration）はどこで設定しますか？
A： Interaction detailsパネルのAnimation設定内のDurationフィールドで設定します。200〜400msが自然な速度感として一般的に使われています。
FigmaAIプロトタイプの習熟度を3分で診断
以下の質問に答えるだけで、今取り組むべき課題が明確になります。
Q1: Prototypeタブで画面を接続し、Shift+Pでプレビューできますか？
Yesの場合 → Q2へ進む
Noの場合 → Result A（基礎構築フェーズ）
Q2: 変数（Variables）を作成し、On clickでSet variableを設定した経験がありますか？
Yesの場合 → Q3へ進む
Noの場合 → Result B（インタラクション強化フェーズ）
Q3: 条件ロジック（Conditional）を使って画面分岐を実装した経験がありますか？
Yesの場合 → Result D（応用実装フェーズ）
Noの場合 → Result C（ロジック実装フェーズ）
Result A: 基礎構築フェーズ
まず2画面の接続とSmart Animateの設定を繰り返し練習することが優先です。「FigmaAIプロトタイプは5ステップで作成」セクションから始め、1週間で画面接続を10回実施することを目標にしてください。
Result B: インタラクション強化フェーズ
基礎接続はできているため、次のステップは変数の作成です。「FigmaAIプロトタイプは変数で動きを制御」セクションを参照し、isLoggedIn変数の実装を2時間で完了させることが次の一歩です。
Result C: ロジック実装フェーズ
変数の理解はあるため、条件ロジックを1案件に1カ所だけ実装することを目標にしてください。ActionをConditionalに変えるだけで分岐が設定でき、実装時間は初回でも30分以内に収まります。
Result D: 応用実装フェーズ
基礎から応用まで揃っています。次はAI生成（Text to Design）と変数・条件ロジックを組み合わせたワークフロー全体の時間計測を行い、どの工程がボトルネックかを特定してください。コンポーネント化と変数の共有スコープ設定を学ぶと、複数画面の一括管理が可能になります。
CHECK
▶ 今すぐやること: 診断結果に対応するセクションを開き、該当する設定を1つ実装する（15〜30分）
Q: Result Bの段階で変数が設定できない場合はどうすればよいですか？
A： FigmaのProfessionalプラン以上に加入しているかを確認してください。変数機能は無料プランでは利用できません（Figma料金プラン）。
Q： 診断で使う技術はFigmaのどのバージョンから使えますか？
A： 変数と条件ロジックは2023年以降のFigma（デスクトップアプリ・ブラウザ版問わず）で利用可能です。古いバージョンのローカルキャッシュが残っている場合はリロードを試してください。
FigmaAIプロトタイプは5つの時短で完成
実務で使えるハックを積み重ねると、プロトタイプ作成全体を短縮できます。1つずつ案件に組み込んでいくことで、確実に体得できます。
ハック1: Text to Designで初期フレームを短時間で作成
【対象】: AI機能未使用でFigmaを使い、毎回ゼロからフレームを作っているデザイナー
【手順】:
第1ステップ：Figma AIメニューの「Generate」を開き、作成したい画面を50文字以内の日本語または英語で入力する（3分）。第2ステップ：生成されたフレームを確認し、不要な要素を削除してからフレーム名を「01_Login」のように番号付きで命名する（5分）。第3ステップ：全フレームの命名が完了したら、PrototypeタブでQ1（開始画面）からスタートして順番に接続を行う（10分）。
【コツと理由】: AI生成後はレイヤー名の整理を先に完了させてから接続作業に入ってください。AIはレイヤー名をランダムに生成することが多く、そのまま接続するとSmart Animateが機能しません。レイヤー名を整理するという1工程を追加することで、アニメーション設定の手戻りを削減できます。
【注意点】: AI生成後にすぐプロトタイプ接続を始めると後戻りが発生しやすくなります。レイヤー名の整理を先に完了させてから接続作業に入ることで、スムーズに進められます。
ハック2: コンポーネント化でボタン修正を1箇所で完結
【対象】: 同じボタンを複数画面にコピーして使い、修正のたびに全画面を直しているデザイナー
【手順】:
第1ステップ：繰り返し使用するボタンやヘッダーを選択し、Ctrl+Alt+K（Mac: Cmd+Option+K）でコンポーネント化する（2分）。第2ステップ：AssetsパネルからコンポーネントをD&Dで各画面に配置する（5分）。第3ステップ：コンポーネントのマスター側を変更し、全インスタンスに変更が反映されることをプレビューで確認する（3分）。
【コツと理由】: 3画面以上のプロトタイプから使うと即時に時短効果が出るため、小規模案件でも積極的に使ってください。ボタンデザインを後から変更するとき、コンポーネント化していれば修正が短時間で完了します。
【注意点】: コンポーネント化したボタンのプロトタイプ接続はインスタンス側ではなくマスター側に設定します。インスタンス側への接続設定は「プロトタイプ接続を画面ごとに変えたい場合のみ」に限定してください。
ハック3: デバイスプリセットで提案時の表示崩れを防止
【対象】: クライアントへのプレゼン時にデバイス表示の崩れで説明に詰まった経験があるデザイナー
【手順】:
第1ステップ：Prototypeタブの「Device」欄でクライアントの端末（iPhone 15、Galaxy S24等）を選択する（1分）。第2ステップ：「Orientation」で縦横を設定し、プレビューでフレームがデバイスの画面内に収まっているかを確認する（3分）。第3ステップ：クライアントへの共有URLを発行し、「このリンクを実機で開いて確認してください」と伝えることで実機感覚のテストを依頼する（1分）。
【コツと理由】: プロトタイプ接続を始める前にデバイスを設定してください。デバイス設定はフレームサイズに影響し、後から変更するとフレーム内の要素が崩れて再整列が必要になります。事前設定により、プレゼン当日の表示崩れ対応という予測不能な作業を排除できます。
【注意点】: プレビューURLのデバイス表示はFigmaが設定したデバイスで固定されます。クライアントが異なる機種から開いた場合、表示が崩れる場合があります。「このプレビューはiPhone 15を想定して作成しています」と事前に伝えておくことで不要なフィードバックを防げます。
ハック4: プレビュー動画化でフィードバック精度を向上
【対象】: テキストベースのフィードバックが曖昧で、修正箇所の特定に毎回時間がかかっているデザイナー
【手順】:
第1ステップ：Shift+Pでプロトタイププレビューを起動し、Mac標準のQuickTime PlayerまたはWindowsのゲームバーでプロトタイプ操作を録画する（5分）。第2ステップ：録画した動画ファイルをLoomまたはGoogleドライブで共有し、クライアントへのフィードバック依頼時に「この動画の○分○秒部分の挙動を確認してください」と具体的な確認箇所を指定する（3分）。第3ステップ：フィードバックを受け取ったらFigmaのコメント機能で該当箇所にピン留めし、修正記録として残す（2分）。
【コツと理由】: 共有リンクだけ送ると、クライアントがどの操作をしたかわからず往復が発生しやすくなります。動画化して具体的な確認箇所を指定することで、修正の議論を短い往復で完結させられます。フリーランスとして作業時間を仕組みで削減する習慣を持つことが、長期的な生産性向上につながります。
【注意点】: 動画ファイルは100MB以下に収めてください。Loomの無料プランは5分以内の動画に対応しているため、プレゼン動画は5分以内にまとめることを意識してください。
ハック5: フロー図機能で全体設計を事前に可視化
【対象】: 画面数が増えてきてどの画面とどの画面が接続されているか把握できなくなったデザイナー
【手順】:
第1ステップ：Prototypeタブで「Flows」セクションを確認し、設定済みのフローがリスト表示されていることを確認する（1分）。第2ステップ：プレビューモード（Shift+P）でキーボードのFキーを押すと「フロー図（Flow diagram）」モードに切り替わり、全接続が矢印で可視化される（1分）。第3ステップ：フロー図でつながっていない孤立フレームを特定し、接続漏れを修正してから再度クライアントへ共有する（5分）。
【コツと理由】: 共有前のフロー図確認で、クライアントからの「このボタン何も起きない」という指摘を防げます。修正対応の時間を節約するために、共有前の確認を習慣にしてください。
【注意点】: フロー図に表示されない接続（Overlay等）もあります。すべてのインタラクションがフロー図で確認できるわけではないため、プレビューでの実操作確認とフロー図確認を両方実施してください。
CHECK
▶ 今すぐやること: ハック2のコンポーネント化を1つのボタンに適用し、3画面に配置してプレビューで確認する（10分）
Q: ハック1〜5の中で最も即効性があるのはどれですか？
A： 既存案件があればハック2（コンポーネント化）が最も即効性があります。新規案件を始める場合はハック1（Text to Design）をフレーム作成の最初の工程に組み込んでください。
Q： Text to Designで英語で入力した方が精度は上がりますか？
A： 英語入力の方が生成精度が安定している傾向があります。「Login page with email and password field, blue submit button」のように具体的な要素を英語で指定すると期待に近いフレームが生成されやすくなります。
FigmaAIプロトタイプを完成させる：役割分担と3つの習慣
FigmaのAI機能は「デザイン生成に使い、接続は手動で確実に行う」という役割分担を徹底することが、最短かつ品質の高いプロトタイプを完成させる核心です。変数と条件ロジックを組み合わせれば、開発現場と同等の挙動を再現でき、クライアントのフィードバック精度が上がります。コンポーネント化・デバイス設定・フロー図確認の3習慣を毎案件に組み込むことで、プロトタイプ作成全体の時間短縮が期待できます。
ハックを一度に全部試すより「今日1つだけ実装する」という積み重ねが実態に合っています。まず「今日やるべき1つ」（2フレームを接続してShift+Pで確認）を完了させ、次の案件でコンポーネント化、その次でText to Designと段階的に取り込んでいってください。フリーランスとして案件を安定して受注する営業の仕組みと合わせて、Figmaスキルを武器にした提案活動を加速させましょう。
| 状況 | 次の一歩 | 所要時間 |
| まだ1度も接続したことがない | 2フレームを接続してShift+Pで確認 | 10分 |
| 接続はできるが変数が未経験 | isLoggedIn変数を1つ作成してOn clickに設定 | 15分 |
| 変数は使えるが条件ロジックが未経験 | ActionをConditionalに変更して分岐を1つ実装 | 30分 |
| 一通り使えるがクライアントへの共有に不安 | プレビューをLoomで5分以内に録画して送付 | 10分 |
FigmaAIプロトタイプに関するよくある質問
Q: FigmaのAIが自動でプロトタイプを生成してくれる機能は存在しますか？
A： 2025年7月時点では、プロトタイプの接続自体を自動生成する公式機能は確認されていません。AIが担うのはText to Designによるフレーム・コンテンツの生成です。接続・インタラクション設定は手動で行うことが現状の正しい理解です（Figma公式：プロトタイプ機能）。
Q： 変数と条件ロジックはどの料金プランで使えますか？
A： 変数と条件ロジックはFigmaのProfessionalプラン以上で利用できます。最新の料金はFigma料金プランで確認してください。無料プランでは変数パネルが表示されない場合があります。
Q： プロトタイプが重くなって動作が遅い場合はどうすればよいですか？
A： フレーム内の画像を「PNG/JPG書き出し後に再インポート」して解像度を下げることが最初の対処法です。高解像度画像が多いファイルは動作が重くなります。また、1ファイルのフレーム数を抑え、複数フローは別ファイルに分割することも有効です。
【出典・参照元】
Figma公式：プロトタイプ機能 – Figmaプロトタイプの公式説明ページ
Figma公式ヘルプ：プロトタイピングガイド – プロトタイプ接続・Interaction detailsの設定方法
Figma料金プラン – 各プランの機能・料金比較