【2026年最新】Figma AIの使い方完全ガイド｜Make・料金・AIクレジットの仕組みを徹底解説

FigmaにAI機能が本格統合され、デザイナーの作業フローが大きく変わりつつあります。特に2025年7月に登場したFigma Makeは、テキストプロンプトからUIやWebアプリを生成できるツールとして注目を集めています。

ただし2026年3月からはAIクレジット制に移行し、使い方次第でコストが大きく変わるのが現実。> Key Takeaway: Figma AIとFigma Makeの全機能を料金・使い方・活用術で解説。AIクレジット制の仕組み、プラン別の上限、v0やFramerとの違いまで網羅します。

この記事の要点

• Figma AIとFigma Makeの違い・全機能
• プラン別の料金とAIクレジットの仕組み
• Figma Makeの具体的な使い方（ステップ付き）
• v0・Framer・Builder.ioとの比較
• AIクレジットを節約するコツ

30秒で結論

• Figma AIはFigma全体に統合されたAI機能群。画像生成・テキスト編集・レイアウト提案などが使える
• Figma Makeはプロンプトからアプリ/プロトタイプを生成する別機能。React/TypeScriptベースのコードを出力
• 2026年3月からAIクレジット制。Professionalプラン（$16/月）で月3,000クレジット
• Figmaユーザーなら追加契約なしで使える。既存の設計資産と連携できる点が最大の強み

Figma AIとは？2026年の全体像

Figma AIは、Figmaプラットフォーム全体に統合されたAI機能の総称です。個別のアプリではなく、既存のFigma Design・FigJam・Figma Slidesに横断的にAI機能が追加されています。

主なAI機能

2025年のConfig発表以降、段階的に機能が追加され、2026年4月時点ではほぼすべてのFigma操作にAIが介入できる状態になっています。

Figma Makeとは？従来のプロトタイプとの違い

Figma Makeは、自然言語のプロンプトから動くWebアプリやプロトタイプを生成する機能です。従来のFigmaプロトタイプが「見た目の確認」にとどまっていたのに対し、Makeは実際に動くコード（React/TypeScript）を出力します。

Figma Make vs 従来プロトタイプ

Figma Makeの使い方（4ステップ）

ステップ1: Figma Makeを開く Figmaのダッシュボードから「Make」を選択するか、新規ファイル作成時にFigma Makeを選びます。

ステップ2: プロンプトを入力 チャットエリアに「タスク管理アプリを作って。入力欄、リスト表示、完了チェックボックスが必要」のように指示を入力します。日本語プロンプトにも対応しています。

ステップ3: プレビューで確認・修正 AIがReact/TypeScriptコードを生成し、即座にプレビュー表示されます。「ポイントして編集」機能で、プレビュー上の特定のUI要素をクリックして直接修正できます。

ステップ4: 共有・エクスポート チームスペースに配置して共有できます。Full seatであれば公開も可能です。コードはエクスポートして開発環境に持ち込めます。

料金プランとAIクレジットの仕組み

2026年3月18日から、Figma AIはクレジット制に移行しました。すべてのプランにAIクレジットが含まれていますが、上限が異なります。

プラン別AIクレジット比較

クレジット消費の目安

AI画像生成の場合、モデルによって消費量が異なります。

• GPT Image 1 Mini: 5クレジット/枚（コスパ重視）
• Gemini 2.5: 8クレジット/枚
• Google Imagen 4: 8クレジット/枚
• GPT Image 1.5: 8クレジット/枚
• Gemini 3.1 Pro: 25クレジット/枚（最高品質）

Figma Makeはエージェント型AIのため、タスクの複雑さに応じて消費量が変動します。シンプルなUI生成なら数十クレジット、複雑なアプリ生成では数百クレジットを消費する場合があります。

クレジット節約のコツ

1. 明確で具体的なプロンプトを書く（曖昧な指示はAIの試行回数を増やす）
2. GPT Image 1 Miniを選ぶ（画質が十分なら最もコスパが良い）
3. 既存デザインを起点にする（ゼロからより修正の方がクレジットを節約できる）
4. Figma Makeではモデル選択で消費量をコントロールできる

v0・Framer・Builder.ioとの比較

Figma Makeと同じ「プロンプトからUI生成」カテゴリには、複数の競合ツールがあります。

選び方のポイント:

• Figmaを既に使っているチーム → Figma Make（設計資産を活かせる）
• React/Next.jsで開発する → v0（コード品質が高い）
• マーケティングサイトの公開まで完結したい → Framer
• 既存サイトへのCMS組み込み → Builder.io

Figma AIを最大限に活用するための前提：デザインシステムの整備

Figma AIの恩恵を最大化するためには、デザインシステムの整備が前提条件になります。

Figma AIの各機能（First Draft・Rewrite・Auto Layout提案）は、既存のコンポーネント・カラースタイル・テキストスタイルを参照して動作します。デザインシステムが整備されていない状態でAIを使うと「毎回違うスタイルで生成される」という問題が起きます。

まず最低限用意すべきもの：

• カラースタイル：ブランドカラー・テキスト色・背景色を定義
• テキストスタイル：見出し・本文・キャプションのフォントサイズ・行間を定義
• コンポーネント：ボタン・インプット・カード等の基本UIパーツ

これらを揃えた状態でFigma AIを使うと、生成されるデザインがブランドの一貫性を保ちながら出力されます。「AIのアウトプットが毎回バラバラ」という悩みを持つチームの多くは、デザインシステムの不整備が根本原因です。

ポイント: Figma AIは「デザインシステムという土台があって初めて真価を発揮する」ツール。まずスタイル・コンポーネントを整備してからAIを活用する順序が重要。

Figma AI First Draft・Rewrite：デザイナーの日常を変える機能

Figma AIには「Make」以外にも、デザイナーの日常作業を加速する機能群があります。

First Draft（最初の提案を自動生成）

First Draftは、空白のフレームやコンポーネントに対してプロンプト入力するだけで、初稿デザインを自動生成する機能です。「白紙から始める」という最も時間がかかるプロセスをAIが肩代わりします。

使い方のコツ：できるだけ具体的な指示が効果的です。「SaaSのダッシュボード上部ヘッダー」より「月次売上チャートとユーザー数KPI表示付きのSaaSダッシュボードヘッダー、ダークテーマ、グラフは折れ線」という形で指定するほど意図した結果が出ます。

既存のデザインシステムやコンポーネントライブラリをFigmaファイルに用意しておくと、First Draftがそれを参照して一貫性を保ちながら生成してくれます。ゼロベースで始めるより既存資産を起点にした方が、チームのデザイン言語に沿ったアウトプットが得られます。

Rewrite（UIテキストの自動書き換え）

UIに入力されているダミーテキスト（「Lorem ipsum」など）を、実際のコンテキストに合わせた適切なテキストに置き換える機能です。多言語展開時の翻訳、A/Bテスト用の別バージョン生成にも使えます。

日本語UIを持つサービスでは、英語で設計したUIの全テキストを日本語に一括変換するワークフローが効率的です。Figma AIのRewriteで翻訳→Figmaの多言語管理機能で管理するという組み合わせが実用的です。

Rename Layers（レイヤー名の自動整理）

デザインファイルの構造が複雑になると、レイヤー名の管理が煩雑になります。Figma AIはデザインのコンテキストを分析して適切なレイヤー名を自動提案します。引き継ぎやチームコラボレーション時のファイル整理に有効で、エンジニアがDev Modeで作業する際のコード可読性向上にも直結します。

Auto Layout提案

要素の配置や余白を分析して、最適なAuto Layout設定を提案します。「ここはAuto Layoutにすべき」という提案が自動で表示されるため、デザインシステムの一貫性維持が容易になります。レスポンシブ対応のデザインを作る際に特に効果を発揮します。

ポイント: First Draft・Rewrite・Rename Layersは「地味だが時間がかかる」デザイン作業を自動化する。Make（アプリ生成）と組み合わせることで、デザインの初稿から仕上げまでAIがカバーする。

Dev Mode AI連携：デザインからコードへのシームレスな橋渡し

Figma AIのDev Modeは、デザイナーとエンジニアのコラボレーションをAIで強化する機能群です。

Figma MCP（Model Context Protocol）連携

2026年のトレンドとして急速に普及しているのが、Figma MCPを使ったAIコーディングツールとの連携です。Cursor・GitHub Copilot・Claude CodeなどのAIコーディングアシスタントがFigmaのデザインファイルを直接参照できるようになります。

実際のワークフロー：

1. FigmaでUIデザインを完成させる
2. Figma MCPを設定（CursorやClaude Codeとの接続）
3. AIコーディングツールに「Figmaのこのフレームをそのままコンポーネント化して」と指示
4. AIがFigmaのデザイントークン（色・フォント・余白）を読み込んで正確なコードを生成

このワークフローにより「デザインを見ながら手でコードに変換する」という作業がほぼ自動化されます。エンジニアがデザイン仕様を読み解く時間が大幅に削減され、デザイン〜実装のコミュニケーションロスが減少します。

コード注釈の自動生成

Dev Modeで特定のコンポーネントを選択すると、AIが「このコンポーネントはどう実装するか」の注釈を自動生成します。デザインの意図（アニメーション・インタラクション・条件分岐）もテキストで説明されるため、エンジニアへの仕様伝達コストが大幅に下がります。

ポイント: Figma AI＋Dev Mode＋MCPの組み合わせで、「デザインをFigmaで作る→Cursorで実装」のフローがシームレスに。デザイン〜実装のコミュニケーションロスが大幅に減少する。

Figma AIの活用シーン

デザイナー向け

• First Draftでワイヤーフレームからの高精度プロトタイプ生成
• RewriteでUIテキストの多言語バリエーション生成
• デザインシステムに沿ったコンポーネントのAuto Layout提案

エンジニア向け

• Dev ModeでデザインファイルからReactコードを自動抽出
• Figma MCP連携でAIコーディングツール（Cursor等）と接続
• コード注釈の自動生成でインタラクティブプロトタイプの仕様確認

PM・ビジネス担当者向け

• PRDからのモックアップ自動生成
• ステークホルダー向けのデモアプリ作成
• 複数案の比較検討（A/Bデザイン案の高速生成）

注意点・デメリット

クレジット消費の予測が難しい

Figma Makeのエージェント型AIは消費量が変動するため、月末にクレジット切れになるリスクがあります。チーム管理者は使用状況を定期的にモニタリングすることを推奨します。

複雑なロジックには限界がある

Figma Makeが生成するのはフロントエンドのUIコードが中心です。バックエンド連携、認証機能、データベース操作などの複雑なロジックは手動実装が必要です。

著作権・データの取り扱い

生成物はCustomer Contentとして扱われますが、権利関係が自動保証されるわけではありません。商用利用時は法務確認を推奨します。

編集部の検証メモ

検証の観点

AIによるUI生成ツールは2026年に入って一気に選択肢が広がりました。編集部では今回、Figma AI / Figma Makeを評価するにあたり、以下3つの軸で公開情報を比較検討しました。

• 既存デザイン資産との連携：すでに作成済みのコンポーネントやデザインシステムを活かせるか
• コスト構造の明瞭さ：月額固定かクレジット制か、上限超過時の挙動
• 出力形式の実用性：生成物がコード/プロトタイプ/デザインのどれで、実装に直結するか

公開情報からの比較整理

公式仕様から判断する限り、Figma系とコード生成系では設計思想が大きく異なります。

日本語プロンプトはいずれも対応しますが、UI言語やドキュメントの充実度には差があります。商用利用は3ツールとも公式に許可されていますが、生成コードの帰属やライセンス詳細は各社の利用規約で最新情報を参照してください。

編集部の総合判断

• 既にFigmaでデザイン管理している組織 → Figma Makeが第一候補。追加契約なしで既存資産と地続きに使える
• Next.js / Vercelスタックで開発しているエンジニア主導チーム → v0のほうがコード品質と既存ワークフローの相性が良い
• コードを書かずにLP/サイトを公開したい個人・小規模事業者 → Framerが最短ルート

よくある質問（FAQ）

Q. Figma AIは無料で使えますか？

はい、Starterプラン（無料）でもAIクレジットが付与されます。ただし上限が低いため、本格利用にはProfessional以上が必要です。

Q. Figma Makeは日本語プロンプトに対応していますか？

対応しています。ただし英語プロンプトの方が精度が高い場合があります。

Q. AIクレジットは翌月に繰り越せますか？

いいえ、未使用クレジットは翌月に繰り越されません。月内に使い切る設計です。

Q. Figma MakeとCursorは競合しますか？

用途が異なります。Figma Makeはデザイン→プロトタイプの生成、Cursorは本格的なコーディングが主戦場。Figma MCP連携で両者を接続する使い方が2026年のトレンドです。

Q. チームでAIクレジットを共有できますか？

クレジットはシート単位で付与されます。チーム全体の使用状況は管理者が管理画面から確認できます。Organization/Enterpriseプランでは追加クレジットの購入も可能です。

Q. Figma AIで生成した画像やコードの商用利用は可能ですか？

Figmaの利用規約上、生成物はユーザーのCustomer Contentとして扱われます。ただし、入力に使った素材の権利確認は自己責任です。商用利用前に法務確認を推奨します。

Q. Figma AIのFirst Draft機能は他のAI UIジェネレーターと何が違いますか？

最大の違いは「既存のFigmaファイル・デザインシステムを起点にできる」点です。v0やLovaなどが「ゼロから生成する」のに対し、Figma AIは既存のコンポーネント・カラー・タイポグラフィを参照して一貫性を保ちながら生成します。既存プロダクトの新機能追加や、デザインシステムに沿った新ページ生成に強い点が差別化になっています。

Q. Figma AIのDev ModeはFull Seat以外でも使えますか？

Dev Mode自体はDev seatでも利用できますが、AIを含む高度な機能はシートタイプとプランによって異なります。Professional以上のプランで基本AI機能が使えます。Organization/EnterpriseプランではDev seatへのAI機能展開が可能です。最新の仕様はFigmaの公式プランページで確認してください。

Q. Figma MCPの設定は難しいですか？

エンジニアなら公式ドキュメントに沿って30〜60分程度で完了できます。CursorやClaude Codeの設定ファイルにFigma MCPのエンドポイントを追加し、FigmaのAPIキーを設定するだけです。デザイナーが単独で設定するにはやや技術的知識が必要なため、初期設定はエンジニアに依頼するのがスムーズです。

Q. Figma Makeで生成したコードはそのまま本番環境で使えますか？

Figma Makeが生成するコードはプロトタイプ・確認用途のレベルであり、そのまま本番環境で使えることは稀です。実際の開発では「Figma Makeが生成したコードをベースに開発者がリファクタリング・テスト追加・バックエンド連携」というフローが一般的です。Figma MCPを使ったCursorとの連携の方が、本番品質のコードに近いアウトプットが得られます。

あわせて読みたい

• 【2026年最新】AIアバター作成ツール完全ガイド｜無料・有料おすすめ7選と選び方
• 【2026年最新】Claude Artifactsとは？使い方・活用術・できることを徹底解説
• 【2026年最新】AI OCRツールおすすめ8選｜無料・手書き対応・料金を徹底比較