この記事でわかること
Figma AIの7機能を使うと初稿作成時間を大幅に短縮できる。First Draft・画像生成・MCPの組み合わせで、ゼロからデザインを立ち上げる速度が変わる。各機能の実務向けプロンプト例と、AI出力の品質を上げる運用フローを解説する。
Figma AIのデザイン機能を使うと、ワイヤーフレーム生成から画像作成まで、従来の作業工数を大幅に削減できます。2025年にはAIエージェント機能が追加され、フレームやコンポーネントの直接編集まで可能になりました。この記事では7つの主要機能の使い方と、実務で即使えるプロンプト例を解説します。
この記事の結論
Figma AIの最大の価値は「白紙からの立ち上げ速度」にあります。First Draftでワイヤーフレームを数分で生成し、画像生成で素材を調達し、AIエージェントでコンポーネントを自動配置するという一連のフローを組むことで、初稿作成にかかる時間を大幅に削減できます。AI出力には必ず人間によるレビューが必要であり、フルシート（有料プラン）への加入が利用の前提条件です。
今日やるべき1つ
Figmaを開き、任意のフレームを選択した状態で「First Draft」を起動し、「ログイン画面/PC」と入力してデザインを1件生成してください（所要時間：5分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| ゼロからデザインを起こしたい | Figma AIは初稿を3分で生成する：First Draftの使い方 | 3分 |
| 素材画像をすぐ用意したい | Figma AIの画像生成は3ステップで完結する | 3分 |
| プロトタイプを手間なく作りたい | Figma AIはインタラクションを自動追加する | 5分 |
| コード品質を上げたい | Figma MCPはデザイン構造をAIコーダーに直接渡す | 10分 |
| 自分に合った機能を知りたい | Figma AI機能の選び方を4分で診断する | 4分 |
| 実務ノウハウをまとめて知りたい | Figma AIデザインは5つの仕組みで効率化する | 10分 |
Figma AIは初稿を3分で生成する：First Draftの使い方
「どこから手をつければいいか」という感覚は、デザイナーなら誰でも経験します。First Draftはその「最初の一歩」をAIに委ねる機能です。
First Draftはテキストだけでワイヤーフレームを出力する
First Draftは、テキストプロンプトを入力するだけでワイヤーフレームやUIデザインの初稿を生成する機能です。Figmaデザインのキャンバス上でフレームを選択し、AIパネルから「First Draft」を選んでプロンプトを入力すると、数十秒でレイアウト案が提示されます（Figma公式ヘルプ：AIツールの使用）。
目的は「完成形に近いアウトプット」ではなく「たたき台を高速に作ること」です。生成後にビジュアルエディターで細部を修正する前提で使うのが正しい運用です。デザインの7〜8割をFirst Draftに任せ、残り2〜3割を人間が整える分業が最も時間対効果の高い使い方になります。
プロンプトに「デバイス/用途/トーン」の3要素を入れると精度が上がる
「LP作って」という指示では生成結果がばらつきます。「PC用SaaSサービスのログイン画面、ミニマルデザイン」のようにデバイス・用途・視覚的トーンの3点を明記すると、意図に近いアウトプットが出やすくなります。「Basic app wireframe」というFigma公式が推奨する定型フレーズを使うとさらに安定します。
プロンプトに具体性がある場合と抽象的な場合では、修正工数に差が出ます。プロンプト作成に数分を追加するだけで、その後の修正時間を節約できます。
iret.mediaがFigma AI全機能を試用した記録によると、「First Draftでログイン画面を生成し、色パターンの複数提案とアニメーション作成でイメージを掴みやすかった」との声があります。
反復編集でデザイン方向を素早く切り替える
初稿が意図と違った場合、プロンプトを書き換えて再生成するだけで別方向のデザイン案を即座に得られます。「もっとカード型のレイアウトに変更」「ダークテーマで再生成」のような追加指示も有効です。Figma内で一連の作業が完結する点が最大の強みです。
再生成のたびに前の案が上書きされる仕様のため、気に入った案はその都度フレームを複製してください。この操作を省略すると、良い案が消えます。
CHECK
▶ 今すぐやること：Figmaで新しいフレームを作成し「PC用ダッシュボード画面、グレー基調」と入力してFirst Draftを実行してください（5分）
よくある質問
Q：First Draftはフルシートなしで使えますか？
A：一部機能は無料プランでも試用できますが、継続利用にはフルシート（有料プラン）への加入が必要です。最新の利用条件はFigma公式ヘルプでご確認ください。
Q：生成されたデザインは著作権的に問題ありませんか？
A：Figma公式は利用規約でAI生成コンテンツの商用利用を認めています。ただし生成内容が既存デザインと類似する可能性はゼロではないため、重要な商用制作物は必ずレビューを行ってください。
Figma AIの画像生成は3ステップで完結する
素材サイトを探し回る時間は、デザイン制作全体の工数の中で無視できない割合を占めます。Figma AIの画像生成はその工程をデザインキャンバス内で完結させます。
画像生成はフレーム内で直接呼び出せる
Figmaデザイン上で画像を配置したいレイヤーを選択し、AIパネルから「画像生成」を選んでプロンプトを入力すると、デザインのサイズに合ったオリジナル画像が生成されます（Figma公式：AIデザインジェネレーター）。素材サイトでの検索・ダウンロード・サイズ調整という工程が丸ごと省略できます。
他のAIツール（Midjourney等）との違いは「Figmaの内側で完結する」点です。Midjourneyは高品質な画像生成に優れていますが、生成した画像をFigmaに持ち込む手間が発生します。Figma AIはその持ち込み工程がゼロです。ただし画像の表現力や解像度はMidjourneyに及ばない場面もあるため、高品質な写真表現が必要な場合は外部ツールを使う判断が現実的です。
プロンプトにスタイルと色を指定すると一貫性が保てる
「ビジネス向けWebサイトのヒーロー画像、フラットイラスト、ブルー系」のようにビジュアルスタイルと色を指定すると、デザイン全体のトーンと合った画像が生成されやすくなります。スタイル指定なしで生成すると、既存デザインと色味や質感が合わない画像が出る確率が上がります。
生成後はビジュアルエディターで細部を微調整する
AI生成画像でも、配置後に明度・コントラスト・トリミングを調整することで完成度が大きく変わります。「生成してから整える」習慣をつけると、実用品質に達しやすくなります。
CHECK
▶ 今すぐやること：Figmaで任意の画像レイヤーを選択し「ミニマルなオフィス空間、ブルー基調、フラットイラスト」と入力して画像生成を試してください（3分）
よくある質問
Q：生成画像のサイズはどのように決まりますか？
A：選択したレイヤー（フレームやシェイプ）のサイズに合わせて自動生成されます。あらかじめ適切なサイズでレイヤーを作成してから生成するのが確実です。
Q：Figma AIで生成した画像を商用利用してよいですか？
A：Figmaの利用規約上は商用利用が可能です。ただし生成内容によっては第三者の著作権との関係が生じる可能性があるため、重要な案件では法的確認をおすすめします。
Figma AIはインタラクションを自動追加する
プロトタイプのインタラクション設定は、デザイン作業の中でも特に地味な時間を要する工程です。Figma AIのインタラクション追加機能はその工程を大幅に自動化します。
インタラクション追加はフレーム選択から始まる
プロトタイプを作成したいフレームを選択し、AIパネルから「インタラクション追加」を選ぶと、Figma AIがクリック・ホバー・スワイプなどの基本的なインタラクションを自動で設定します。ゼロから手動でトランジションを設定する場合と比べて、作業時間を大幅に節約できます。
ステークホルダーへのプレゼンテーション用プロトタイプであれば、AI生成のインタラクションで十分なケースが多くなります。複雑なアニメーションや条件分岐が必要な高精度プロトタイプは、AI生成後に手動での追加設定が必要です。
AIが設定するインタラクションの種類と適用基準
AIが自動追加するインタラクションは、主にボタンのクリック遷移とカードのホバーエフェクトです。複数画面間のフロー遷移も対応していますが、AIが判断するリンク先は必ずしも意図通りになるわけではないため、生成後に接続先の確認が必須です。確認を省略すると、プレゼン中に意図しない画面に遷移します。
Figma Makeでプロトタイプ全体を一括生成する方法
Figma MakeはAIを活用して、レイアウト・フロー・プロトタイプを一括生成できる機能です（Figma公式：AIアプローチとMCP）。既存フレームをコピーしてFigma Makeにペーストし「PC用LPデザイン」とプロンプトを入力するだけで、コーディングなしにインタラクティブなプロトタイプを数分で作成できます。
Figma Makeのコードは右上のアイコンからエクスポートも可能で、エンジニアへの引き渡し資料としてもそのまま活用できます。
studiokyoto.jpのFigma Make実務活用レポートでは、「Figma Makeにフレームをペーストしてプロンプト入力するだけでコード生成とPC/SPデザインの即作成ができ、ダウンロードも簡単だった」との声があります。
CHECK
▶ 今すぐやること：プロトタイプを作りたいフレームを2枚用意し、AIパネルの「インタラクション追加」を実行してください（5分）
よくある質問
Q：AI生成のインタラクションをあとから修正できますか？
A：はい、生成後もプロトタイプパネルから通常の手順で編集できます。AIが設定した遷移先・エフェクト・タイミングはすべて手動で上書き可能です。
Q：Figma Makeと通常のFigmaデザインはどう使い分ければいいですか？
A：Figma Makeはコード生成・プロトタイプ一括作成に特化しており、精細なデザイン調整は通常のFigmaデザインが向いています。初稿はFigma Makeで高速生成し、詳細編集はFigmaデザインで行う分業が最も効率的です。
Figma AI機能の選び方を4分で診断する
現在の作業状況に合わせて最適な機能を4分で特定できます。
Q1：今日取り組みたい作業はどれに近いですか？
デザインの初稿・ワイヤーフレームを作りたい場合はQ2へ。素材画像や既存デザインを改善したい場合はQ3へ。コード実装・プロトタイプを効率化したい場合はQ4へ進んでください。
Q2：デザインの規模はどのくらいですか？
単一画面（1〜3フレーム程度）ならResult A（First Draft）へ。複数画面の一括生成（4フレーム以上のフロー）ならResult B（Figma Make）へ進んでください。
Q3：作業の種類はどちらですか？
画像・イラスト素材が必要ならResult C（画像生成）へ。テキストのトーン調整・翻訳・要約が必要ならResult D（テキスト処理）へ進んでください。
Q4：あなたの役割はどちらですか？
デザイナーとしてプロトタイプのインタラクションを自動化したい場合はResult E（インタラクション追加）へ。エンジニア連携でAIコーディングツールの精度を上げたい場合はResult F（Figma MCP）へ進んでください。**
Result A（First Draft）**：Figmaのキャンバスでフレームを作成し、AIパネルからFirst Draftを起動してください。「PC用ログイン画面、ミニマル」など3要素を含むプロンプトを入力するのがポイントです。
Result B（Figma Make）**：Figma Makeを開き、既存フレームをペーストしてプロンプトを入力してください。コーディング不要でプロトタイプまで一括生成できます。
Result C（画像生成）**：配置先のレイヤーを選択した状態でAIパネルから画像生成を選択してください。スタイル・色・用途を含むプロンプトで精度が上がります。
Result D（テキスト処理）**：テキストレイヤーを選択してAIパネルを開くと、書き換え・トーン変更・翻訳・要約の4つから選択できます。
Result E（インタラクション追加）**：プロトタイプにしたいフレームを選択してAIパネルから「インタラクション追加」を実行してください。生成後に遷移先を必ず確認することが必須です。
Result F（Figma MCP）**：VS CodeまたはCursorにFigma MCPを設定し、デザインファイルのコンテキストをAIコーディングツールに提供してください。設定方法は後述のMCPセクションをご参照ください。
CHECK
▶ 今すぐやること：上記Q1から診断を進め、自分のResultを特定してください（4分）
よくある質問
Q：複数のResult（機能）を同時に使えますか？
A：はい、同一プロジェクト内でFirst Draft・画像生成・インタラクション追加を組み合わせて使用できます。初稿生成→素材調達→プロトタイプ化の順に使うフローが最も効率的です。
Q：診断で特定した機能がフルシート未加入で使えない場合はどうすれば？
A：Figma Makeは一部機能を無料で試用できます。まずFigma Makeで基本操作を確認し、継続利用の価値を判断してからフルシートへの移行を検討するのが費用対効果の観点から現実的です。
Figma MCPはデザイン構造をAIコーダーに直接渡す
AIでコードを生成しても、デザインの意図が伝わらずに修正が多発するケースがあります。Figma MCP（Model Context Protocol）はその問題を構造的に解決します。
MCPはデザインファイルの「設計図」をAIに渡す仕組み
Figma MCPは、VS CodeやCursorなどのAIコーディングツールにFigmaデザインのコンテキスト（レイアウト構造・色・コンポーネント定義など）を直接渡す仕組みです（Figma公式：AIアプローチとMCP）。これによりAIが「このコンポーネントはどういう役割で、どのような構造になっているか」を理解した状態でコードを生成するため、生成コードの修正回数が減少します。
MCPなしでコードを生成する場合、AIはデザインの意図を推測しながらコードを書くため、コンポーネントの構造やプロパティの取り違えが頻繁に発生します。MCPを導入すると推測の余地がなくなり、設計通りのコードが出やすくなります。
ZennのFigma MCP活用レポートによると、「MCPでデザイン構造をAIに伝えることでコード品質が向上し、Code Connectでコンポーネントを再利用することで開発時間を削減できた」との声があります。
Code Connectを組み合わせるとコンポーネント再利用が自動化される
Code ConnectはFigmaコンポーネントとコードベースのコンポーネントをマッピングする機能です。MCPとCode Connectを組み合わせると、AIコーディングツールがFigmaのデザインコンポーネントを見て「これはコードベース上の<Button primary />に対応する」と認識し、既存コンポーネントを優先して使用するコードを生成します。これにより新規コンポーネントの無秩序な増殖を防ぎ、デザインシステムの一貫性が維持されます。
MCPの設定は3ステップで完了する
まずFigmaのアカウント設定からMCPサーバーのアクセストークンを発行します。次にVS CodeまたはCursorの設定ファイルにFigma MCPのエンドポイントとトークンを記述します。最後にAIコーディングツールを再起動すると、FigmaデザインのコンテキストがAIに渡せる状態になります。設定の所要時間は初回でも15〜20分が目安です。
CHECK
▶ 今すぐやること：Figmaのアカウント設定を開き、MCPのアクセストークン発行画面を確認してください（2分）
よくある質問
Q：FigmaデザインファイルがなくてもMCPは使えますか？
A：MCPの機能を活用するにはFigmaのデザインファイルが必要です。デザインファイルが存在することで、レイアウト構造・コンポーネント定義をAIコーディングツールに渡せます。
Q：MCPを使えばコードレビューが不要になりますか？
A：MCPはコード生成の精度を向上させますが、生成コードの完全な正確性を保証するものではありません。Figma公式もAI出力には人間の確認が必要と明示しており、レビュー工程は省略できません。
Figma AIデザインは5つの仕組みで効率化する
機能を知っているだけでなく、どう組み合わせて運用するかが生産性の差を生みます。競合記事ではあまり触れられていない実務レベルの使い方を紹介します。
ハック1：フレーム名を命名規則で統一するとAIの精度が向上する
対象：デザインシステムを運用している中級デザイナー（チーム制作を含む）
フレームとコンポーネントの命名を「役割/画面名/状態」の形式（例：Button/Primary/Hover）に統一してください（既存ファイルの一括リネームで30分）。その後AIエージェントまたはFirst Draftを起動し、プロンプトに命名したコンポーネント名を含めて指示します（5分）。search_design_systemツールで命名通りのコンポーネントが検索・適用されているか確認し、ズレがあれば命名規則を修正してください（10分）。
AIはフレーム名の文字列をパターンマッチングで解析するため、命名に一貫性がないと意図と異なるコンポーネントを選択する確率が上がります。命名規則を先に整えておくことで、AIの検索精度が上がりコンポーネントの誤適用が減ります。
命名規則のためにすべてのフレームを大改修する必要はありません。新規作成分から規則を適用し、既存ファイルは優先度の高いコンポーネントから順次移行する方が現実的です。
ハック2：AIエージェントはコンポーネント追加を「依頼する」形で指示すると誤作動が減る
対象：AIエージェント（ベータ）を試している上級デザイナーおよびデザインエンジニア
Figma AIエージェントパネルを開き、use_figmaツールが有効になっていることを確認してください（2分）。「このフレームにナビゲーションバーコンポーネントをデザインシステムから追加してください」のように、操作の主体をAIに委ねる形で指示します（3分）。生成後、search_design_systemの検索結果ログを確認し、意図したコンポーネントが使われているかを確認してください（5分）。
AIエージェントは文脈理解を得意とする一方で、数値の厳密な再現は苦手です。「左上に幅1440px、高さ64pxで配置」という指示より「ヘッダー領域にナビゲーションバーを追加」という指示の方が、結果として修正が少なくなります。
noteのAIエージェント活用レポートによると、「AIエージェントがフレームやコンポーネントを直接作成・編集でき、use_figmaで書き込みが可能になり、デザインシステム検索も便利だった」との声があります。
AIエージェントはベータ機能です。本番環境の重要ファイルで直接編集を行うと取り消しが難しい変更が加わる可能性があるため、テスト用の複製ファイルで動作確認してから本番適用してください。
ハック3：テキスト処理は「トーン指定+用途指定」の2段階で依頼する
対象：UI上のコピー（キャッチコピー・ボタンラベル・エラーメッセージ）を作成中のデザイナー
修正したいテキストレイヤーを選択してAIパネルを開き、「書き換え」を選択してください（1分）。まずトーン指定（「プロフェッショナルなトーンで」「カジュアルに」）を入力して第一案を生成します（2分）。第一案を確認後、用途指定（「B2Bサービスの登録ボタン向け」）を追記して再度生成し、2案を比較して採用してください（3分）。
AIはトーンと用途を同時指定すると、どちらかの条件を優先した偏った出力になりやすいです。2段階にすることで、それぞれの条件を正確に反映したコピーが生成されやすくなります。
AIが提案するコピーはそのまま採用しないでください。特にエラーメッセージやCTAのような、誤解が直接的なユーザー離脱につながるテキストは、製品仕様との整合性を人間が最終確認してください。AIコピーはゼロから書く手間を省く目的で使い、最終決定権は必ず人間が持ってください。
ハック4：MCP設定時にCode Connectの「属性マッピング」を先に定義する
対象：FigmaとVS Code/Cursorを連携させてコード生成精度を上げたいデザインエンジニア
コードベースの既存コンポーネント（例：<Button variant=”primary”>）とFigmaコンポーネントのプロパティ名を対照表として整理してください（30分）。Code Connectの設定ファイルにプロパティマッピングを記述し、FigmaとコードのVariantを対応づけます（20分）。MCPを経由してAIコーディングツールにコンテキストを渡し、生成コードに既存コンポーネントが正しく使われているかテストしてください（15分）。
公式ドキュメントでは「MCPを設定してからCode Connectを後で追加する」手順が示されていますが、「Code Connectのマッピングを先に完成させてからMCPを有効化する」順番の方がうまくいくケースが多いです。マッピングが不完全な状態でMCPを有効化すると、AIが既存コンポーネントの存在を認識できず、新規コンポーネントを大量生成するという本末転倒な結果になるからです。
属性マッピングは一度作成すれば終わりではありません。デザインシステムの更新に合わせてマッピング定義を更新する運用フローが必要です。定期的な棚卸しをチームのプロセスに組み込んでください。
ハック5：First Draft生成前に「競合サイトのスクリーンショット」をリファレンスとして用意する
対象：クライアントワークや新規サービスの初稿デザインを担当するデザイナー
参考にしたいデザインのスクリーンショットを1〜3枚用意し、Figmaの作業ファイルに配置してください（5分）。First Draftのプロンプトに「〇〇のような雰囲気で、PC用SaaSダッシュボード」のようにリファレンスの特徴を言語化して追記します（5分）。生成結果とリファレンスを並べて比較し、乖離している要素（色・間隔・タイポグラフィ）をビジュアルエディターで修正してください（15分）。
プロンプトだけで方向性を伝えようとすると、デザイナーの頭にある「雰囲気」とAIの出力の間にギャップが生まれます。リファレンスの特徴を言語化してプロンプトに加えることで、そのギャップを縮小しやすくなります。
競合サイトのデザインをリファレンスにする場合、プロンプトで「このデザインをコピーして」という指示は避けてください。特定デザインの模倣ではなく「雰囲気・構成の参考」として使う姿勢が、倫理的にも実務的にも適切な活用方法です。
CHECK
▶ 今すぐやること：現在担当しているプロジェクトで最も時間がかかっている作業を特定し、上記5つのハックのうち1つを今週中に試してください（10分で計画作成）
よくある質問
Q：ハック1の命名規則変更は既存ファイルに影響しますか？
A：フレーム名を変更するとFigmaのAI機能が参照するメタ情報が更新されますが、デザインの見た目や動作には影響しません。ただし既存のコード連携（Code Connect等）で名前をキーにしている場合は、マッピング定義の更新も必要になります。
Q：AIエージェント（ベータ）はいつ正式リリースになりますか？
A：Figma公式から具体的なリリーススケジュールは発表されていません。最新情報はFigma公式サイトでご確認ください。
Figma AIデザインを実務に定着させる：機能選択が9割
Figma AIの最大の価値は「白紙からの立ち上げ速度」にあります。First DraftでUI初稿を3分で生成し、画像生成で素材を即調達し、MCPでコード連携の精度を高めることで、デザインから実装までの一連のフローを効率化できます。どの機能も、AI出力を人間がレビューすることが前提であり、確認工程を省いた完全自動化は現時点では現実的ではありません。
機能を知っていても、使う局面を間違えると効果は半減します。「今日の作業課題が何か」を最初に特定し、それに最も対応した機能を1つ選んで試すことが、Figma AIを実務に定着させる最短ルートです。
| 状況 | 次の一歩 | 所要時間 |
| 初稿デザインに取り掛かる | First Draftを起動してプロンプトを入力 | 5分 |
| 素材画像が必要 | 画像生成でフレーム内から直接生成 | 3分 |
| プロトタイプを準備する | インタラクション追加で基本動作を自動設定 | 5分 |
| コード連携の精度を上げる | Figma MCPをVS CodeまたはCursorに設定 | 20分 |
| AIエージェントを試す | 複製ファイルでuse_figmaを実行 | 10分 |
Figma AIデザインに関するよくある質問
Q：Figma AIは無料で使えますか？
A：一部機能はFigma Makeの無料トライアルとして試用できますが、First Draftや画像生成などの主要AI機能を継続利用するにはフルシート（有料プラン）への加入が必要です。最新の料金条件はFigma公式ヘルプでご確認ください。
Q：Figma AIとMidjourneyはどう使い分ければいいですか？
A：Figma AIはFigmaキャンバス内で完結する速度と利便性が強みで、デザインの文脈に合った画像をすぐ用意したい場面に向いています。Midjourneyは高品質・高解像度な画像表現が必要な場面に向いており、生成後にFigmaに取り込んで使う形になります。両者は競合よりも補完の関係で、用途によって使い分けるのが現実的です。
Q：AI出力の品質はどの程度信頼できますか？
A：Figma公式ヘルプが明示しているとおり、AI出力には誤りが含まれる可能性があります。レイアウトの論理的な誤り、コンポーネントの誤適用、コードの非効率な実装などが代表的な問題です。AI出力はあくまで「たたき台」として扱い、すべての成果物に人間のレビューを加えることが前提です。
【出典・参照元】
Figma公式ヘルプ：FigmaデザインでのAIツールの使用
