UI / Web デザインでの AI 活用は、「ボタンを 1 個ずつ描く」作業をなくす方向ではなく、たたき台を数分で作り、案を何通りも並べ、コードへ橋渡しする方向で実務に効きます。2026 年現在、その中心にいるのが Figma です。Figma は AI 機能を 3 つの入口に整理しました——画面案を作るFigma の AI エージェント（旧 First Draft）、説明文から動くアプリを生むFigma Make、そしてデザインをコードへ渡すDev Mode MCP サーバー。本章はこの 3 つを軸に、いつ何を使い、どこは人が担保するかを具体的に整理します。
FIG.1 アイデア → 画面案 → 動く試作 → コード。各段で別の AI 機能が橋渡しする
大事な前提を 1 つ。AI は「最後の 1 ピクセルまで仕上げる職人」ではなく、発想と反復を加速する助手です。情報設計の判断、デザインシステムとの整合、実装に耐える品質は、いまも人が握ります。以下、その役割分担を機能ごとに見ていきます。
013 つの入口を取り違えない
2026 年の Figma の AI は名前が似ていて混同しがちです。まず「何を出力するか」で 3 つに切り分けると迷いません。用途が違うので、1 つで全部やろうとしないのがコツです。
AI エージェント（旧 First Draft）
言葉から編集できる Figma の画面案を生成。2026 年 5 月 20 日以降、First Draft の機能はこのエージェントが入口。まだベータ。一括編集やデザインシステム適用も任せられる。
Figma Make
説明文から動くアプリ試作（プロトタイプ）を生成。プレビューがリアルタイムで更新され、ビジュアル編集とコード編集を行き来できる。バックエンド接続で実データ挙動も確認可。
Dev Mode MCP サーバー
選んだフレームをコードへ。Claude Code・Cursor・VS Code・Windsurf などの AI コーディング環境に、レイアウト・変数・コンポーネント情報を渡す。
言い換えると、静止画の案が欲しい→エージェント、触れる試作が欲しい→Make、実装コードに落としたい→MCP。この対応さえ押さえれば 8 割は迷いません。
02標準ワークフロー：言葉 → 案 → 反復
ゼロから AI に丸投げするより、人が要件を言語化してから AI に渡すほうが結果が安定します。Figma のエージェントは、用意された設計用ライブラリ（コンポーネントの塊）を組み合わせて案を作るため、こちらの指示が具体的なほど狙った形に近づきます。
要件を言葉にする
汎用 AI でも Figma 上でもよいので、画面の目的・主要要素・利用者・状態（空・読込・エラー）を文章化する。「何を載せるか」が曖昧だと AI も曖昧な案しか返さない。
たたき台を生成する
エージェントに自然言語で依頼し、編集可能なワイヤー／画面案を数分で出す。1 案で満足せず、トーンや密度を変えて複数案を出させて比較する。
Figma 上で具体化する
出てきた案を自社のデザインシステムに合わせて整える。コンポーネント差し替え、配色・余白・タイポの統一はここで人が行う。
反復する
マイクロコピー、配色、状態バリエーションを高速に展開。動きを確かめたくなったら Make で試作、実装に渡すなら MCP、と次の入口へ橋渡しする。
03AI が特に効くタスク
同じ AI でも、向くタスクと向かないタスクがあります。「人がやると面倒だが判断は要らない」量産系から任せると、外れが少なく時短が大きいです。
| AI に任せやすい | 人が判断すべき |
|---|---|
| マイクロコピー（ボタン・空状態・エラー文）の量産と言い換え | 情報設計（何をどの順で見せるか）の判断 |
| レイアウト案・コンポーネント構成の発想出し | デザインシステムとの整合・ブランド表現 |
| 状態バリエーション・ダミーデータの一括生成 | 実装可能性・パフォーマンス・保守性の担保 |
| アクセシビリティ観点の素案チェック相談 | アクセシビリティの最終検証（実機・支援技術） |
AI が出すのは「叩き台と選択肢」。採用・整合・実装の責任は人が持つ。
04Figma Make：説明文から「動く試作」へ
静止画の案だけでは、遷移やインタラクションの良し悪しは判断できません。Figma Make は、説明文（プロンプト）から触れるプロトタイプを生成し、レイアウト・ロジック・ダミーデータまで AI が用意します。プレビューはその場で更新され、ビジュアル編集とコード編集を行き来しながら詰められます。
FIG.2 Make は「プロンプト・ビジュアル・コード」を 1 つの場で往復できる
結果を良くするコツは、ゼロから書くより既存の Figma フレームを貼って「これを動くようにして」と頼むこと。実在のコンポーネントやデータ、制約を持ち込めるため（Make キット／Make アタッチメント）、ブランドから外れた試作になりにくくなります。バックエンドに接続すれば、実ユーザーデータでの見え方・挙動まで確認できます。
05Dev Mode MCP サーバー：デザインからコードへ
デザインを実装に渡す段で 2026 年に大きく前進したのが、Figma のDev Mode MCP サーバーです。これはあなたの PC で動く小さなサービスで、Figma ファイルの構造（階層・レイアウト規則・テキストスタイル・コンポーネントのプロパティ・画像参照）を MCP（Model Context Protocol）経由で AI に開きます。
FIG.3 フレームを選ぶ → MCP がデザイン構造を渡す → AI が design-aware なコードを書く
これにより、AI が「見た目から推測した雑なコード」ではなく、変数・コンポーネント・レイアウト規則を踏まえたコードを生成しやすくなります。デザインシステムやコンポーネント主体の開発と特に相性が良いのが特徴です。なお本機能はベータ期間中は無料ですが、将来的には従量課金の有料機能になる予定とされています（料金は変わるため公式で確認を）。
過度な期待は禁物です。MCP は実装の初期段階を速め、デザイン意図とコードの一致を高めますが、熟練エンジニアを不要にするものではありません。生成コードはそのままマージせず、設計・命名・状態管理・テストを人がレビューする前提で使います。
06Figma 以外の選択肢も知っておく
Figma に閉じず、目的によっては他ツールが速いこともあります。2026 年時点でよく挙がる顔ぶれを、出力の違いで押さえておきましょう（機能・料金は更新が速いので採用前に公式確認を）。
- v0（Vercel）：説明から React + Tailwind のコンポーネントコードを直接生成。実装寄りの人向け。
- Google Stitch：高精細な UI モックを文章から生成。元は Galileo AI で、2025 年に Google が買収し Gemini ベースで再ブランド。
- Uizard：非デザイナー向け。文章から複数画面のプロトタイプ（ユーザーフロー）を生成。
- Lovable / Framer：動く Web・SaaS フロントを素早く構築する用途で言及されることが多い。
選び方の目安は「何を成果物にしたいか」。編集できるデザイン資産が欲しいなら Figma 系や Stitch、コードが欲しいなら v0、まず公開できる Web を出したいなら Framer/Lovable、という具合に出力で選ぶと迷いません。
Caveats & Guardrails
生成 UI を「そのまま実装」しないための注意
AI 生成の UI は見栄えがしても、一貫性・実装性・アクセシビリティが保証されているわけではありません。よくある落とし穴を先に潰しておきます。
- そのまま実装しない：生成物は出発点。デザインシステムに合わせる調整と、実装に耐えるかの確認は人が担保する。
- もっともらしい誤りに注意：AI は存在しないパターンや不正確なコピーを自信ありげに出すことがある。文言・数値・仕様は一次情報で検証する。
- 連携機能は更新が速い：Figma の AI 機能やプラグイン、対応プラン・料金・ベータ範囲は頻繁に変わる。前提にする前に必ず公式で最新を確認する。
- 権限とデータ：MCP やバックエンド接続で実データ・社内資産を扱うときは、最小権限・要承認を原則に。機密を不用意に外部 AI へ渡さない。
- アクセシビリティは最終検証が必須：AI の素案チェックは入口にすぎない。コントラスト・キーボード操作・支援技術での確認は実機で行う。
07勘所
UI / Web デザインにおける AI は、発想と反復の加速装置です。「画面案を出す（エージェント）→ 動きを確かめる（Make）→ 実装へ渡す（MCP）」という橋渡しを使い分け、量産系のタスクを任せて時間を作る。その上で、情報設計の判断・システム整合・実装性・アクセシビリティの最終担保という人にしかできない仕事に集中する——これが現実的で再現性のある使い方です。機能と料金は動くものと割り切り、要所は必ず公式の一次情報で確かめながら進めましょう。次章以降では、個別ツールをさらに掘り下げます。
