Figma には、デザインツールの中でそのまま AI の手を借りられる機能が組み込まれています。大きく二つに分かれます。ひとつはデザイン画面（Figma Design）に入った Figma AI、もうひとつは「言葉で書いたら動くプロトタイプ／アプリができる」Figma Make。本ガイドは、2026年時点で実際に何ができて何ができないのか、どう使い分けるのかを、初めての人にも分かるように整理します。
FIG.1 同じ Figma の中に「描く支援（Figma AI）」と「作る生成（Figma Make）」の二系統がある
共通する強みは デザインの文脈を保ったまま AI 支援を受けられること。別の AI ツールに画面を貼り付けて戻して…という往復が減ります。ただし生成物はそのまま完成品ではありません。本ガイドの結論を先に言うと「たたき台づくりは速い、仕上げと判断は人」です。
01Figma AI：デザイン画面に入った支援機能
Figma Design（いつものデザイン画面）には、2026年時点で次のような AI 機能があります。それぞれ「作業の一部を肩代わりする」道具で、用途がはっきりしています。
First Draft（下書き生成）
「iPhoneアクセサリのECサイト、検索バー付き」のように書くと、編集できるデザインの下書きを数分で作る。生成後にテーマ・余白・角丸などをワンクリックで調整できる。
レイヤー名の自動付与
中身や周囲との関係を見てレイヤーに分かりやすい名前を付ける。他フレームの複製も合わせて改名され、プロトタイプの動作が壊れにくい。
ビジュアル検索
スクリーンショットや選択中のレイヤーを手がかりに、ライブラリから見た目の近い既存コンポーネントを探す。名前が分からなくても見つかる。
このほか、画像生成（Make an image）、ダミーを本物らしい内容に変えるテキスト/コンテンツ差し替え（Replace content）、簡単な画面遷移を付けるAdd interactions などがあります。いずれも「ゼロから手で作る最初の数十分」を短縮する役割です。
02Figma Make：言葉から「動くもの」を作る
Figma Make は、プロンプト（やりたいことの説明）からクリックして操作できるプロトタイプやアプリを生成する仕組みです。2025年の Config で発表され、2026年にかけて機能が増えました。出力されるのは React + Tailwind CSS のコードで、読みやすい構造のため開発者の「出発点」として使えます（＝そのまま本番ではなく、たたき台）。
FIG.2 指示 →（必要なら計画）→ 生成 → 試作 → 人のレビュー。最後の点検は省けない
2026年に加わった主な機能は次の通りです。
- Plan Mode（計画モード）：いきなり作り始めず、Make が内容を確認して質問を返し、進め方の案を提示。承認してから生成に入る。多画面のレイアウトや細かい仕様など、複雑な依頼で効く。
- ライブ Web コンテキスト：生成の途中で Web を検索したり特定の URL を取り込んだりして、最新の内容を踏まえた生成ができる。
- Figma Agent（ベータ）：Make を手元のコードベースに接続し、特定の要素を指して文脈付きで指示できる。AI のコーディングエージェントが対応するコード修正を行う。
- Make Kits / Attachments：実在のコンポーネント・データ・制約を持ち込んで、そこから生成を始められる。デザインシステムに沿わせやすくする狙い。
03Figma AI と Figma Make の使い分け
名前が似ていて混乱しやすいので、役割で整理します。ざっくり「絵を整えるのが Figma AI、動くものを起こすのが Figma Make」です。
| Figma AI（デザイン画面） | Figma Make（生成環境） |
|---|---|
| 静的なデザイン（画面の絵）を作る・整える | クリックできる動くプロトタイプ／アプリを作る |
| 下書き生成・命名・検索・画像・差し替え | プロンプトから React + Tailwind コードを生成 |
| 既存のデザイン作業を加速する補助 | アイデア検証・社内デモ・開発の出発点づくり |
| 主にデザイナーの手元作業 | 非デザイナーでもアプリの叩き台を作れる |
実務では両方を行き来します。たとえば Figma AI の First Draft で画面の方向性を素早く探り、固まったら Figma Make でクリックできる試作にして関係者に触ってもらう、という流れが分かりやすい使い方です。
04料金とAIクレジット（変動が大きい）
料金は頻繁に変わるため、必ず公式の最新情報を確認してください。ここでは2026年時点の仕組みの考え方だけを示します。Figma の AI 機能は「AI クレジット」を消費する方式で、各シート（席）に毎月一定量が含まれ、超えると追加購入や枠リセットまで一部 AI 機能が使えなくなる、という設計です。
FIG.3 月次クレジットを消費 → 使い切ったら追加購入かリセット待ち（実数値は公式で確認）
- 消費量は操作で大きく違う。簡単な文言修正は軽く、複雑な生成（多画面アプリなど）は重い。Figma Make で一通りの試作を回すと相応のクレジットを使う。
- プランやシート種別で含まれる量が変わり、足りなければ追加クレジットの購入や従量課金の選択肢がある。
- 具体的な付与量・単価・上限の運用は変更されてきた経緯があるため、金額や数値はこの記事で覚えず、契約前に公式で確認するのが安全です。
料金で迷ったら、暗記より「公式の最新ページを開く」。AI 系の価格はすぐ変わる。
05できること・できないこと（2026年時点）
過度な期待も過度な不信も避けるため、得意と不得意を分けて把握しておきます。
| 得意（任せやすい） | 苦手（人が要る） |
|---|---|
| 最初のたたき台・量産（First Draft、Make の試作） | そのまま納品できる本番品質の仕上げ |
| レイヤー命名・整理、似た部品の検索 | アクセシビリティ（コントラスト・意味づけ）の担保 |
| クリックできるプロト化で意図を伝える | デザインシステムへの厳密な準拠 |
| 退屈な反復作業の時短 | 独自性・案の幅出し（似た出力に寄りやすい） |
具体的に挙がっている弱点は次のとおりです。いずれも「使うな」ではなく「人のレビューを前提にする」という意味です。
- アクセシビリティ：低コントラストの文字（日付・キャプション等の補助テキスト）が基準を満たさないことがある。生成 HTML/CSS は必ずしも意味的（セマンティック）でない。
- デザインシステムへの準拠：既存の部品やトークンに正確に沿わせるのはまだ弱い。Figma の MCP サーバ（AI エージェントが既存デザインシステムを使ってキャンバス上で部品を作れる仕組み）でここを補強する動きがある。
- 案の多様性：同じプロンプトだと似た案ばかり出やすく、発想の幅出しには物足りないことがある。
- 本番コードの品質：着想・反復・ユーザーテストには有効だが、出力コードは「読める出発点」であって、そのまま本番投入できる完成品ではない。
06安全に使うための実務ルール
ツールが内蔵されていても、責任と一貫性は人の側に残ります。次を運用ルールにすると事故が減ります。
発想・量産はAI、判断は人
たたき台は AI に出させ、採用可否・トーン・整合性は人が決める。生成物をそのまま納品しない。
デザインシステム適合を点検
色・余白・コンポーネントが既存ルールに合うか確認。Make Kits / MCP 連携で「正しい部品」を渡すと外れにくい。
アクセシビリティを必ず確認
コントラスト・文字サイズ・意味づけ（見出し階層・ボタンの役割）を人が点検する。AI 任せにしない。
素材と権利を確認
クライアント素材・機密の取り扱いは契約と規約に従う。生成画像の商用利用条件、Figma Agent でコードに接続する際の権限は最小限に。
Data & Trust
「ツール内で完結」でも、機密と権利の線引きは外せない
外部 AI に画面を出し入れしないぶん摩擦は少ないですが、何を学習・送信に使うかはプラン設定や契約で必ず確認します。クライアント案件では、機密素材を生成に投入してよいか、出力の所有権・商用利用条件はどうかを事前にすり合わせるのが安全です。Figma Agent で自分のコードベースに接続するときは、必要な範囲だけ許可する最小権限が基本です。
FIG.4 生成物は必ずレビューのゲートを通す。通れば採用、引っかかれば差し戻し
07まとめ
Figma の AI は、デザイン画面の Figma AI（下書き・命名・検索・画像）と、プロンプトから動くものを作る Figma Make（React + Tailwind を生成）の二本立てです。文脈を保ったまま支援を受けられるので、たたき台づくりとアイデア検証は確実に速くなります。一方で、本番品質・アクセシビリティ・デザインシステム準拠・案の幅出しは依然として人の領分で、料金（AI クレジット）も変動するため公式確認が前提です。「速くするのは AI、責任を持つのは人」——この原則を守れば、内蔵 AI は実務の強い味方になります。
