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 も曖昧な案しか返さない。
