Figma Make(フィグマメイク)とは？特徴や料金、使い方まで完全解説！

2025年12月9日

この記事のまとめ

Figma Makeは、プロンプトで要件を伝えるだけでUIを生成し、そのまま編集から公開までを一貫して行える、Figmaの新しいAIデザイン機能です。会話しながらレイアウトや挙動を調整できるため、アイデアの検証スピードが大きく向上させることができます。また、既存のFigmaデザインやライブラリのスタイルコンテキストを取り込めるため、ブランドの一貫性を維持したままUIを自動生成できる点も大きな特徴です。さらにSupabaseと連携すれば、認証やデータ保存、シークレット管理まで備えた“動くプロトタイプ”を作成できます。完成したプロトタイプはFigma内からそのまま公開でき、Figma Sitesを使えばレスポンシブなWebページとしての公開まで完結します。0→1の検証やPoC、早期のプロトタイプ制作に特に強みがあり、デザイナーやエンジニアにとって手戻りを大幅に減らせるツールと言えるでしょう。

この記事では、AIデザイン生成ツール「Figma Make(フィグマメイク)」について詳しく解説します。Figma Makeの特徴や料金プラン、具体的な使い方まで網羅していますので、ぜひ最後までご覧ください。

弊社Walkersでは、“AIトレンドに乗り遅れたくないけど、具体的な活用法が見えない…”を解決するAI導入支援を行っています。補助金により1/3のコストで導入可能なので、ぜひAI活用にお悩みがある方はお気軽にご相談下さい。⇒AI導入支援サービスの概要はこちら

執筆者：山口鳳汰
ノーコード・AI開発会社「Walkers」のCMO。
AIサービス「Prompt Lab」運営。
その他、受託開発や教育など多数のAI事業に参画している。

運営会社：株式会社Walkers
ノーコード・AI専門の開発会社。
300件以上の開発/制作実績、200件以上の企業様を支援。
マーケティングやUI/UXと掛け合わせたサービス開発を得意としている。

執筆者：山口鳳汰
ノーコード・AI開発会社「Walkers」のCMO。
AIサービス「Prompt Lab」運営。

運営会社：株式会社Walkers
ノーコード・AI専門の開発会社。
これまでに300件以上の開発/制作実績、200件以上の企業様を支援。

クリックできる目次

Figma Make(フィグマメイク)とは？

Figma MakeでのWebサイト制作実演動画

Figma Make(フィグマメイク)とは、テキストの指示(プロンプト)からプロトタイプを生成し、そのままFigmaの中で編集ができるAI機能です。

アイデアを文章で伝えるだけでレイアウトやインタラクションが自動生成され、さらに会話を重ねるだけでUIを反復的に調整でき、Figmaのワークフロー上で「発想→作成→検証→公開」までを一気通貫に進められるのが核となる価値になっています。

既存のFigmaデザインやライブラリのコンテキストを取り込みつつ、履歴に戻ってやり直す、ライブラリのスタイル（色・タイポ・余白）を反映するといった、プレビュー上でできる直感的な作業感も備えており、実務フローに必要な作法が一通りそろっています。

また、必要に応じてSupabaseと連携し、認証やデータ保存、シークレット管理など簡易バックエンドを付与できます。Figma Make側の設定から接続するか、プロンプトで「認証を追加」などと指示するだけで有効化できるため、見た目だけのデザインではなく“本番に近い検証”に踏み込むことができます。

作ったものはFigma内から公開・共有でき、Figma Sitesと組み合わせればレスポンシブWebサイトとしての発信まで含めて一本化が可能です。ツールを行き来せず、Figmaの中で完結させたいデザイナーやエンジニア、ノーコード人材から高く評価されています。

Figma Makeの4つの特徴

【特徴①】プロンプトからUIを生成し、そのまま編集できる

Figma Makeのチャットに要件を書くだけで、インタラクション付きのプレビューが返ってきます。
初回生成後は「遷移はフェードに」「このフォームにバリデーションを追加」「余白をもう少し広げて」といった日本語や英語での追加指示で、挙動と見た目を簡単に更新可能です。

Figma公式は「日常の言葉でサイトやUIを説明すると、レイアウト・構造・インタラクションを自動生成できる」というワークフローを前提に開発しているため、発想から検証のサイクルをFigma内だけで完結させることが可能です。

さらに、生成物はチャットだけでなく、Figma上のプレビューで直接編集できます。
プレビューで要素をクリックして、フォントやテキスト、色、パディング／マージンなどをその場で調整。編集履歴は保存されるので、いつでも安全にロールバックが可能です。

必要に応じてプレビューをデザインレイヤーとしてFigma Designへコピーし、普段のデザイン作業に戻って細部の詰めを続けることもできます。

【特徴②】既存デザインやライブラリを取り込みできる

会話中のプロンプトに既存のFigmaデザインや画像を添付し、見た目の方向性を具体的に示すことができます。
添付したデザインはレイヤー構造や内容を解釈したうえでコードに変換され、プロンプトの指示と合わせて結果に反映されます。

有料プランのフルシートでは、ライブラリの「スタイルコンテキスト」をFigma Makeに持ち込めます。これは既存のデザインシステムからスタイリングCSSを抽出して、生成されるUIの色・フォント・間隔などに反映する仕組みです。
まずFigma Design側でライブラリをエクスポートし、Makeファイルでそのライブラリを選択。必要ならガイドラインを追加して「どう使ってほしいか」を補足できます。
これにより、AI生成でもブランドらしさを崩さず、初期案→微調整→仕上げの一連を安定して回せます。

【特徴③】Supabase連携でユーザー認証・保存まで可能

Figma Makeを使用すれば、バックエンドの追加は2ステップで行うことができます。

チャットで「Supabaseを追加」「バックエンドを追加」と伝えると、Figma Makeが意図を検知してSupabase接続を案内
表示された設定画面からSupabaseにログイン

または

Figma Makeの統合機能設定画面を開く
Supabaseにログイン

Supabase接続後は、ユーザー認証、シークレット／APIキーの安全な保管、軽量な計算環境、Postgresデータベースが利用可能になり、フォーム送信やユーザーデータ保存、プライベートAPI呼び出しといった“本番に近い”振る舞いをノーコードで試すことができます。

組織管理の観点では、Figma Make × Supabase統合はPostgres上に基本的なキー・バリュー保存をセットアップするのが現仕様であり、「完全なSQLスキーマ自動構築」までは行いません。
つまり、素早い検証に最適化された作法で、必要十分な認証・保存・機密管理を段階的に足せるデザインになっています。

【特徴④】デザイン→生成→公開までFigmaで完結

作成したプロトタイプは、Figma内からそのまま公開・共有することができます。
Figma Sitesと組み合わせれば、レスポンシブなWebサイトとしての発信まで同じワークフローで完結。エディタを離れずに、ページを選んで公開・更新・取り消しまで運用することができます。

また、Figma Makeは同じ会話に複数人が同時参加でき、生成したコードの同時編集やプレビュー共有も可能です。

共有リンクでステークホルダーからフィードバックを集め、必要な修正はチャットまたはポイント編集で即反映。ツール間の移動やデータの受け渡しが減る分、スピードと整合性を両立しやすくなります。

Figma Makeの料金プラン

	Professionalプランフルシート ¥2,400/月(年契約) ¥3,000/月(月契約)	Organizationプランフルシート ¥8,300/月(年契約)	Enterpriseプランフスシート ¥13,600/月(年契約)
FigmaMakeの利用
Figma Designの利用
FigJamの利用
Figma Slidesの利用
Dev Modeの利用
Figma Drawの利用
Figma Buzzの利用
Figma Sitesの利用