Figma Make（Figma AI）とは？使い方・料金・コーディング連携を徹底解説【2026年版】

Figma Makeは、2025年5月のFigma Config 2025で発表されたAI機能で、テキストプロンプトから動くUIアプリを自動生成できるツールです。同時に発表されたFigma AI全般の機能（デザイン生成・プロトタイプ生成・Visual Searchなど）と合わせて活用することで、デザインから開発への引き継ぎを大幅に効率化できます。本記事では、Figma Makeの具体的な使い方・料金（2026年3月から適用のAIクレジット制）・Dev Modeを活用したコーディング連携まで解説します。

Figma Makeとは？プロンプトからアプリを生成するAI機能

Figma Makeは、2025年5月に開催されたFigma Config 2025で発表されたprompt-to-appツールです。自然言語で指示するだけで、React + TypeScriptベースの動作するUIアプリのコードを自動生成し、即座にプレビューで確認できます。

FigmaのAI機能全体（Figma AI）には以下のような機能が含まれています。

• Figma Make：テキストプロンプトから動くUIアプリ（React/TypeScript）を生成
• Make Designs：プロンプトからFigmaデザインの初稿・ワイヤーフレームを自動生成
• Make Prototypes：複数画面を繋ぐインタラクション（遷移設定）をAIが自動構築
• Visual Search：デザインファイル内から類似コンポーネント・アセットをAIが検索
• テキスト・画像編集：ダミーテキスト生成・翻訳・画像背景切り抜きなどをFigma内で完結

Figma Makeの具体的な使い方

Figmaにログイン後、左メニューから「Make」を選択するか、新規ファイル作成時に「Figma Make」を選ぶとエディターが起動します。

プロンプト例：

• 「BtoB向けSaaSの売上管理ダッシュボード」
• 「ユーザー登録用の3ステップのフォーム画面」

上記のように指示するだけで、適切なレイアウトやコンポーネントのコードが数秒で生成されます。生成されたReact/TypeScriptコードはそのままコピーして開発環境に持ち込めます。

Figma AIのコーディング連携（Dev Mode）の実際

Figmaのコーディング連携で特に強力なのが**Dev Mode（開発モード）**です。デザインカンプの意図をAIが読み取り、フロントエンドコードの土台を自動生成することで、エンジニアが余白の数値やカラーコードを手作業で確認する手間を大幅に削減します。

Dev Modeのコーディング連携機能：

• コンポーネントのコード出力：Figma上のボタンやカードUIを選択すると、React（JSX）・HTML/CSS・Tailwind CSS・Swift UI・Flutterなどの形式でコードが即座に出力されます
• Dev Mode MCPサーバー：2025年6月にベータ提供が開始。VS Codeなどのコードエディタと連携し、FigmaのフレームやコンポーネントのスタイルをAIツールに直接渡してコード生成精度を向上させます
• Code Connect：デザインシステムのFigmaコンポーネントと自社コードベースを紐づけることで、LLMへのコンテキスト提供が可能になり、実プロジェクトの規約に沿ったコードが生成されます
• アノテーション機能：デザイン変更時に変更箇所を開発者に通知し、「パディングが16pxから24pxに変更」といった差分を明示。実装時の見落としを防ぎます

AIが生成したコードはベースラインです。既存のシステムアーキテクチャやコーディング規約とすり合わせるため、エンジニアによるレビューは必須です。

Reactベースのフロントエンド実装と組み合わせる場合は、Vercel v0徹底解説｜AIでUI開発を劇的効率化する使い方と料金プランも参考にしてください。

Figma Make・Figma AIの料金体系（2026年最新）

2026年3月18日より、Figma AI機能の利用にAIクレジット制が正式に適用されました。プランごとに月間クレジット上限が設定されており、超過分は追加購入が必要です。

プラン	月間AIクレジット	備考
Starter（無料）	500クレジット	数回の操作で上限に達する
Professional	3,000クレジット	フルシート契約が必要
Business	3,500クレジット	組織向け
Enterprise	4,250クレジット	大規模組織向け

※料金プランや機能は変更される可能性があるため、導入前にFigma公式サイトの最新情報を確認してください。

クレジット消費の目安：

• 背景除去：1〜5クレジット
• 画像生成：5〜25クレジット
• プロトタイプのインタラクション生成：75クレジット以上
• アプリ画面をゼロから生成（Figma Make）：100クレジット以上

追加クレジットの購入オプション（2026年3月〜）：

• +5,000クレジット：$150（一括）/ $120（月額サブスク）
• +7,500クレジット：$225（一括）/ $180（月額サブスク）
• +10,000クレジット：$300（一括）/ $240（月額サブスク）

コスト最適化のポイント：

• アイデア出し・初期案作成など初期フェーズに絞ってAIを使用する
• ダミーテキストの一括生成・画像切り抜きなど単純作業に優先的に割り当てる
• Figma Makeは1回あたりの消費が大きいため、使用頻度に合わせてプランを選択する

現場導入の判断ポイントと注意点

Figma Makeをプロジェクトに導入する際の最大の判断ポイントは、現在の開発体制におけるコミュニケーションコストの削減余地です。デザイン意図の伝達や実装仕様のすり合わせに課題を抱えている組織で、特に高い効果を発揮します。

現場で運用する際の注意点は、AIの出力をそのまま流用しないことです。アクセシビリティ対応や既存コード規約との整合性は人間が確認する必要があり、チーム内で明確な品質基準を定めておくことが求められます。

Next.jsなどのフレームワークとFigma Makeを組み合わせる場合の技術選定については、Next.jsとReactの違いを徹底解説【2026年版】どっちを選ぶべきかプロジェクト別判断基準も参考にしてください。

まとめ

Figma Make（Figma AI）は、プロンプトからUIアプリを自動生成し、デザインから開発へのワークフローを大幅に短縮するツールです。

• Figma MakeはテキストプロンプトからReact/TypeScriptコードを生成するprompt-to-appツール（2025年Config発表）
• Dev Mode + MCPサーバーでコードエディタと連携し、デザインカンプからコード生成の精度が向上
• 料金は2026年3月からAIクレジット制（Professional:3,000、Business:3,500クレジット/月）
• Figma Makeは1回100クレジット以上消費するため、用途を絞ってコストを最適化する

AIをあくまでデザイナーと開発者の共通言語を増やす補助ツールとして捉え、チーム間のコミュニケーションを補完する形で運用することが重要です。