---

---

この記事では、『Figma』で使える生成AIツール『Figma Make』について解説します。料金や特徴、使い方など、詳しくまとめていますので、導入を検討している方は、ぜひ参考にしてください。

■この記事のまとめ

• Figma Makeは、プロンプトやチャットでUIやデザイン・アプリを生成し、編集・共有・公開までできるAIツールです。コードも生成できるため、アプリのような動的なものも生成できます。
• 既存のデザインシステムやカスタムルールの適用、生成されたデザインやコードの編集が簡単にできるため、従来のデザイン業務やデザインからコードへの実装業務の効率化ができるでしょう。
• 普段からFigmaを活用しているデザイナーのみならず、エンジニアやマーケターなど非デザイナーでも活用できるツールです。

Figma Makeとは？

Figma Makeは、プロンプト（テキストによる指示）から、ワイヤーフレーム、UI、プロトタイプなどを生成できるAIツールです。デザインツールであるFigmaが2025年7月からサービスを提供しています。

画像など静的な生成物だけではなく、フロントエンドのコードも生成できるため実際に動作するアプリのプロトタイプまで作成できるのが大きな特徴です。さらに、検証や公開もFigma Makeを使用してできるため、生成〜共有・公開までを一つのツールで一貫して作業できる強みも持っています。

Figma MakeとFigma AIの違い

Figma AIは、『Figma Design』をはじめとしたFigmaが提供しているサービスで使用されるAIツールの総称です。

例えば、Figma Designであれば、『First Draft』というアイデアをデザインに書き起こすツールや画像の作成、テキストの提案などでAIを使用することができ、これらをまとめてFigma AIと呼びます。

一方で、Figma MakeはプロンプトからUIやアプリのプロトタイプを生成できるツールであり、Figmaが提供している独立したサービスです。

Figma AIについてさらに知りたい方はこちらもご覧ください。

Figma Makeの活用シーン・ユースケース

Figma Makeは、単にデザインを作るだけでなく、プロダクト開発の様々な場面で活用できます。特に現場で大きなメリットとなるのが以下のユースケースです。

• ユーザーテスト用の動くプロトタイプを短期間で用意

従来は時間をかけて作り込んでいたプロトタイプも、プロンプトとAI生成により迅速に作成可能です。素早く検証サイクル（PDCA）を回すことができます。

• 社内の管理画面や業務ツールのたたき台を作成

機能開発が優先され、デザイン改善まで手が回りづらい社内ツールや管理画面の初期案・たたき台を素早く作成できます。

• 非デザイナーが要件を「動くもの」で直感的に伝達

PMやディレクター、マーケターなどの非デザイナーが、頭の中にある要件定義を言葉だけでなく「実際に動くUI画面」として提示できるようになり、チーム内の認識齟齬を大幅に減らすだけでなく、意思決定のスピードを大幅に向上することができます。

Figma Makeの特徴

ここからは、Figma Makeの特徴を紹介します。

Figma Makeの強みは、AIによるUIの自動生成から、既存デザインルールの適用、そしてコード化までを一気通貫で行える点にあります。

単なるAIデザインツールにとどまらず、Figmaの他サービスや既存のデザインシステムと連携することで、デザインから開発までのワークフロー全体を効率化できるのが特徴です。それぞれの機能について、具体的に見ていきましょう。

プロンプトでAIがUIを生成する

Figma Makeの大きな特徴ともいえるのが、プロンプトからAIがUIを生成できるという点です。

例えば、「Webアプリのホーム画面を作って。デザインはスタイリッシュで、ボタンは青色。ボタンリンクで遷移するページは〇〇。デザインコンセプトは、この例を参考にして。」などという、自然言語だけでUI、アプリを作ることができます。

生成したいUIのデザイン、役割、機能、トンマナ、ペルソナなどを指示すれば、数分でコードとともにUIが生成されるため、短時間で簡単にUIのベースとなるデザインの提案を受けられます。

生成したUIを編集できる

生成したUIはそのまま、チャットで編集することができます。例えば、「ボタンの色を赤に変えて」「テキストのフォントをゴシック体にして」などの会話だけで、AIが編集してくれます。

ページ全体ではなく、ある要素のみを編集したい場合は、要素指定ボタンを活用することで、一つの要素だけに修正指示を出せるのも特徴的な機能です。

また、Figma Makeはコードも生成されるため、コードを見ながら修正指示を出すこともできます。プロンプトでコードに対して修正指示を出すことで、コードが直接編集されます。

既存のデザインシステムやカスタムルールを適用して生成できる

Figma MakeでUIを生成する際に、既存のデザインシステムやプロダクト特有のカスタムルールを適用することができます。

Figma Designのライブラリに、既存のデザインやデザインシステムファイルがあれば、そのファイルを読み込ませることで、同様のデザインシステムを使って生成することが可能です。

コーディングや動作の際にどのように動作をさせたいかなど、動作やスタイルへのガイドラインは自分で作成して追加できます。また、ガイドライン自体をFigma Makeに生成させることも可能です。

既存のデザインシステムやカスタムルールに沿って、Figma Makeに生成させることで、自社の他のプロダクトと一貫性を持ったUIを生成することができるでしょう。

Figma Makeとデザインシステムの連携実践や、デザインシステムの基礎知識について詳しく知りたい方は、以下の記事もぜひ参考にしてみてください。

また、Figma Makeにはカスタムルールの設定に加え、「Skills（スキル）」と呼ばれる機能も備わっています。

Skills（スキル）とは、AIに対して特定のデザイン手順や出力フォーマット、独自のコンポーネント生成ロジックなどを事前に指示・登録しておく仕組みです。Skillsを活用することで、チーム固有の開発ルールやデザイン手法に沿った高度なUI生成を、AIに再現させることが可能になります。

生成したコードを活用してアプリの構築ができる

Figma Makeの特徴的な機能の一つが、動作を伴うアプリをコードとともに生成することです。

さらに、『Supabase』と連携させることでシークレットストレージ、コンピューティングリソース、Postgresデータベースといった機能を提供するバックエンド環境の構築ができます。バックエンド構築後には、シークレットキーやAPIキーの追加も可能です。

バックエンドを構築することで、異なるブラウザでも正常にアプリを使用できる環境や認証フローの提供、テキストや画像といったコンテンツの保存や読み込みなどアプリに必要なさまざまな機能を搭載できるようになります。

他のFigmaのサービスとの連携が可能

Figma Makeで作成したUIやアプリは、Figma Designや『Figma Sites』と連携できます。Figma Designで、画像の追加などさらなる編集やFigma上で他の人との共有といった作業も簡単です。

また、Webサイトの公開もFigma上から行えるため、プロンプトからAIに生成させたUIを、そのまま世の中に公開できるのもFigma Makeの大きな特徴といえるでしょう。

Figma Makeの料金プラン

ここからは、Figma Makeの料金プランごとに使用できる機能の紹介をします。

Figma Makeは単独のプランを持っておらず、Figmaのプランに準拠して活用できる幅や生成に使用するAIクレジットの量が決まる仕組みとなっています。そのため、ここではFigmaの料金プランごとにできることをご紹介します。

無料プラン

Figma Makeは無料プランでも一通りの機能を使用することができます。

ただし、Figmaコミュニティへの公開を経ずに、一般公開することはできません。また、無料プランでは、生成に使用するAIクレジットが1日に最大150クレジット、月で最大500クレジットという制限があります。そのため、大量に生成することはできません。（2026年8月時点）

無料プランはあくまでお試しとしてFigma Makeを使ってみたいという際に活用できるプランといえます。

有料プラン

有料プランでは、契約するプランやシートの種類によって、付与されるAIクレジットの量が異なります。

例えば、小規模のチームや個人で使用するプロフェッショナルの場合、コラボシートやDevシートで月に500クレジット、フルシートで月に3,000クレジットとなっています。

また、コラボシートやDevシートでは、生成したUIの一般公開やFigmaコミュニティへの公開を行う権限がありません。業務での活用を検討する際はこれらの権限を有するフルシートの活用を検討するとよいでしょう。

有料プランの料金形態は下記の通りです。

プラン名	コラボシート	Devシート	フルシート
プロフェッショナル	450円/月	1,800円/月	2,400円/月
ビジネス	750円/月	3,750円/月	8,300円/月
エンタープライズ	750円/月	5,250円/月	13,600円/月

※表示価格は全て税抜、年間契約時の月換算です。
※2026年8月時点の情報です。為替変動などにより変更となる場合があるため、最新料金や詳細機能は公式サイトをご確認ください。

Figma Makeを使用する際の注意点

Figma Makeを業務やプロジェクトでスムーズに活用するにあたり、あらかじめ押さえておきたいポイントや配慮事項をいくつかご紹介します。

• 日本語UIの調整・補正

プロンプトの理解度や生成精度は非常にすぐれていますが、日本語特有のニュアンスやフォント組み、文脈に沿った表記においては、生成後に人間による手修正や微調整が必要となるケースがあります。

• 生成コードの位置づけ（参考実装としての活用）

Figma Makeが出力するフロントエンドコードは非常に高品質ですが、そのまま本番環境にデプロイするのではなく、エンジニアが構造を確認・編集するための「プロトタイプ」や「参考実装」として扱うことで、安全かつスムーズな開発運用が実現できます。

• チーム内での「AIクレジット」消費設計

Figma Makeの利用にはAIクレジットを消費します。クレジットの仕様や消費上限は契約プランや操作内容によって異なるため、チームで本格運用する際は、あらかじめ利用ルールやクレジット管理の方針を決めておくと安心です。

※ AIクレジットの仕組みや操作ごとの消費量の目安については、Figma公式ヘルプセンター「AIクレジットの仕組み」 をご参照ください。

Figma Makeの使い方

ここからは、実際のFigma Makeの使い方を解説していきます。使い方のステップとしては下記の通りです。

1. プロンプトによるUI・デザイン生成をする
2. 生成結果を編集・調整する
3. 共有・公開する

1.プロンプトによるUI・デザイン生成をする

まずは、Figma Makeファイルを作成して画面右上の「Make」ボタンを押します。

次に、チャットでAIに何を構築したいのかなどのプロンプトを作成して送信ボタンを押すことで、UI・デザイン・アプリを生成できます。

その際に、Figma Designのファイルの添付やライブラリからのスタイルコンテキストの取り込みが可能です。（スタイルコンテキストの取り込みは有料プランのみ）

2.生成結果を編集・調整する

生成されたUIやアプリはチャットでAIと会話することで修正できます。上述した要素指定ボタンも使いながら、編集したい箇所をプロンプトによって編集していきましょう。

ここでもFigma Designのファイルの添付やライブラリからのスタイルコンテキストの取り込みが可能なので、既存のデザインに合わせたい場合やサンプルがある場合は活用してください。

Figma Makeはバージョンが保存されているため、一つ前の編集画面に戻りたい場合は、バージョン履歴から該当するバージョンを指定することで戻って編集を続けることもできます。

※本記事のデモ画面に登場する「ニジレシピ」は、Figma Makeの解説用に作成した架空のサービス名です。実在のサービスや企業とは関係ありません。

3.共有・公開する

Figma Makeで生成したUIやアプリは、Figmaコミュニティ内や一般向けに共有・公開できます。

どの範囲で共有や公開できるかは、料金プランによって異なるため注意してください。例えば、コラボシート、Devシートの場合はFigmaユーザー以外に向けたURLでの共有はできません。Figmaコミュニティの公開自体は、権限さえ持っていれば「公開」ボタンを押すことだけでできるため、非常に簡単です。

Figma Makeの活用事例

ニジボックスでは、実際にFigma Makeを活用してワイヤーフレームの作成や今後のデザイン業務への実装を検証しています。ここでは、その事例を紹介します。

Figma Makeによるワイヤーフレームの作成

ニジボックスでは、AI×UXやAIをWeb制作にどう生かせるかという検証を、日々行っています。実際に、下記の手順でワイヤーフレームの作成からコード化・実装をAIツールを活用しながら行いました。

1. Figmaでライブラリを作成
2. Figma Makeでワイヤーフレームを自動生成
3. Figmaでデザイン編集
4. CursorにMCPでつなぎ自動で実装

Figma Makeだけではなく『Cursor』といったAI搭載型のコードエディタも活用しています。下記の記事では、実際の画面キャプチャを用いながら、作成の手順やポイントの解説を行っているため、ぜひ参考にしてください。

株式会社エアークローゼット：『airCloset』デザインシステム刷新でのFigma Make活用検証

本プロジェクトは、デザインシステムの刷新支援と並行し、将来的なAI活用に向けた技術検証を担当した事例です。

株式会社エアークローゼット様は、『airCloset』の成長に伴い、デザインデータと実装コードの整合性に課題を抱えていらっしゃいました。その解決と並行して、Figma MakeとMCPサーバーを連携させ、デザインデータから実装コードへつなぐフローの実現性を検証しました。現時点で何が実現でき、どこに技術的な制約が残るかを整理し、導入判断の材料としてご提供しました。

プロジェクトの詳しい内容やお客様からいただいた声は、以下の実績紹介ページにも掲載しています。併せてご覧ください。

関連ページ：株式会社エアークローゼット｜実績｜ニジボックス

まとめ

本記事では、Figma Makeの特徴や料金プラン、使い方などを解説しました。

Figma Makeは画像やデザインといった静的な生成だけではなく、アプリやプロトタイプといった動的な生成をコードも含めてできるという特徴があります。

Figma Makeを活用できれば、UIやアプリの制作にかかるデザイン業務やデザインをコード化して実装する業務の効率化が望めるでしょう。また、デザイナー・エンジニア以外の役割でも生成や連携ができるため、UI・アプリ制作に携われる人の幅が広がっていく可能性があることも注目すべきポイントです。

Figmaをすでに導入している会社であれば、Figma Makeは使用できるため、まずは実際に使ってみて導入を検討してみてはいかがでしょうか。

ニジボックスでは、Figma MakeなどのAIツールの導入を支援しています。AIをどのように業務に取り入れればよいのか、ビジネスの成果につなげるためにはどのようにAIを活用すればよいのかなど、要望に沿って適切なAIの活用をサポートいたします。

「AIを業務に取り入れたいけど、どのように進めればよいかわからない」「AIの活用に困っている」という方は以下フォームよりお気軽にご相談ください。

AI導入を事業成果へつなげる「業務AIシフト」については、下記より資料をダウンロードしてご覧ください。