フィグマ・メイク
Figma Make
の使い方・機能・解決する業務課題
ブックマークする
Figma Make（フィグマ・メイク）とは？
Figma Make（フィグマ・メイク）は、Figma, Inc.が提供する「プロンプトからコードへ」のAIツール。AIチャットでの指示や既存のFigmaデザインから、動くプロトタイプ・Webアプリ・インタラクティブなUIをコードとして生成し、「ポイントして編集」やコードエディターで仕上げ、専用URLで公開できる。Makeキットでデザインシステムを取り込み、Payload・Supabaseでデータベースや認証も持たせられる。Figmaのフルシートに含まれ、スターター（無料・AIクレジット1日150）で試せる。プロフェッショナルのフルシートは月2,400円（年払い）・月3,000円（月払い）（2026年11月時点）。
解決する業務課題
「Figma Make」のサービス詳細
Figma Makeとは
Figma Make（フィグマ・メイク）は、デザインツールの Figma を提供する Figma, Inc. の「プロンプトからコードへ」のAIツールです。作りたいものをAIチャットで伝えたり、既存の Figma のデザインを添付したりすると、実際に操作できるプロトタイプ・Webアプリ・インタラクティブなUIがコードとして生成されます。公式ヘルプによると、Figma の年次カンファレンス「Config 2025」でオープンベータとして公開されました。
生成されたものはコードにもとづいていて、同時に画面上で視覚的に編集できます。公式サイトの言葉では「コードとキャンバスの間を自由に行き来できる」ツールで、プロンプトで大枠を作り、細部はクリックで直す、という使い方を想定しています。データベース・API・認証を備えたバックエンドも作れるため、見た目だけのモックではなく、データを持った試作品まで進められます。
使い方
- Make ファイルを作る Figma のファイルブラウザで「ドラフト」を開き、右上の［+ 作成］から［Make］を選びます。ほかの Figma ファイルと同じ手順で作れます。
- 作りたいものをAIチャットで伝える チャットに作りたいものを書くほか、Figma Design のフレームやコンポーネント、参考画像、文書やデータファイルを添付できます。「プランモード」を使うと、生成を始める前に目的を整理し、編集できる計画を先に作れます。
- プレビューを見ながら直す 画面右のプレビューで動作を確かめ、「ポイントして編集」で要素を選んで色・余白・文字のスタイルを直接変えたり、その要素だけを直すようAIに指示したりします。コードエディターで自分でコードを書き換えることもできます。
- 共有・公開する プレビューはチームや社外の人と共有でき、専用のURLでWebサイトとして公開したり、独自のドメインを割り当てたりできます。スタータープランでは、Figma コミュニティにも公開する場合に限り公開ウェブへ公開できます。
出典: Figma Make を探る｜Figma ヘルプセンター、Figma Make 公式サイト（以下の画面画像も同様）
手元のデザインシステムが、そのまま生成の前提になる
Figma Make の出発点は、白紙のプロンプトだけではありません。公式サイトでは「コードベースやデザインアセットから、あるいはゼロから開始できます」と案内されています。
- デザインの添付 — 既存の Figma Design のフレームやコンポーネントをプロンプトに添付し、その見た目にもとづいて生成させます
- ライブラリのスタイリングコンテキスト — Figma のライブラリから色や文字のスタイルを取り込みます（チームライブラリは有料機能のため、スタータープランでは使えません）
- Makeキット — デザインシステムを、くり返し使えるAIのコンテキストにまとめます。npm パッケージから取り込むこともでき、Figma のフレームや PDF も紐付けられます
デザインチームがすでに Figma でデザインシステムを整えている会社ほど、生成物が自社の部品と色に沿いやすくなります。デザインツールの中にあることの利点です。
細部はクリックで、仕上げはキャンバスで
AIに何度も言い直すより、手で直したほうが早い細部があります。Figma Make はそこを道具で補っています。
ポイントして編集では、プレビューの要素を選ぶと、要素の種類に応じてパディング・マージン・色・テキストのプロパティを直接変えられます。複数の要素にアノテーションを付けて、変更をまとめてモデルへ送ることもできます。
さらに、Make のプレビューをデザインレイヤーとしてコピーし、Figma Design のキャンバスに貼り付けて編集できます。生成されたものを、デザイナーがいつもの道具で仕上げられる流れです。
見た目だけでなく、データとログインまで持たせられる
Figma Make は、フロントエンドだけでなくバックエンドも作れます。
- Payload のバックエンド — データベース・API・認証・管理画面を含む Payload のバックエンドをネイティブに構築し、コンテンツとデータをデザインと同じ場所で管理できます（公式サイトでは「Payloadが提供する組み込みCMS」と案内）
- Supabase との接続 — ユーザー認証の追加、ユーザーデータの保存、非公開のAPIの接続などができます
- 環境バリアブル — APIキーなどのシークレットと設定を1か所で管理して Make で使えます
- Makeコネクター（MCP） — 外部ツールとつないで、PRD・チケット・その他の製品ドキュメントをアプリやプロトタイプのコンテキストとして取り込めます。組織内向けのカスタムコネクターも公開できます
機能
01作る
プロンプトや既存の素材から、動くものを生成する。
- モデルへのプロンプト — プロンプトから機能するプロトタイプ・Webアプリを生成
- デザインの導入・画像とファイルの添付 — Figma Design、参考画像、文書、データファイルを添付
- プランモード — 生成の前に目的を明確にし、構造化された計画を作る
- 音声入力によるプロンプト — 話してアイデアを伝える
- テンプレート — 組織内で公開された Make ファイルを出発点にする
02直す
生成したものを、AIへの指示と手作業の両方で仕上げる。
- ポイントして編集・アノテーション — 要素を選んで直接編集、またはまとめて指示
- コードエディター — 生成されたコードを直接編集し、自分のコードを追加
- バージョン履歴 — 以前のバージョンに戻す
- デザインレイヤーとしてコピー — Figma Design に貼り付けて編集
- カスタムスキル — よく使う手順を再利用できる指示のまとまりにする
03つなぐ
デザインシステムや外部のデータを、生成の前提として渡す。
- Makeキット・ライブラリのスタイリングコンテキスト — デザインシステムを取り込む
- Payload・Supabase — データベース・API・認証を持たせる
- Makeコネクター（MCP） — 外部ツールのドキュメント・タスク・データを取り込む
- 環境バリアブル — シークレットと設定を一元管理
04共有・公開する
作ったものを人に見せ、Webサイトとして出す。
- 共有 — 閲覧のみ・編集可の権限を分けて共有
- 公開 — 専用URLやカスタムドメインで公開ウェブに公開
- パスワード保護 — パスワードを設定して共有範囲を絞る
- モバイル上のMake — モバイル端末から Make にアクセスして作る
公式サイトでは、手元のコードベースで Make を使い、そのまま本番環境へリリースできる「ローカルのコードベースで使えるMake（ベータ）」が「近日公開」として案内されています（2026年11月時点）。
料金
Figma Make は単体では販売されておらず、Figma のプランとシートに含まれます。Figma Make を含むすべての Figma 製品を使えるのはフルシートです。AI機能はシートごとの「AIクレジット」を使い、Figma Make のようなエージェント型の機能では、リクエストの複雑さや使うモデルによって消費量が変わります。
| プラン | フルシート（Figma Make を含む） | フルシートのAIクレジット | 補足 |
|---|---|---|---|
| スターター | 無料 | 1日150・月最大500 | Make を試せる。共同作業は共有できる Make ファイル3つまで、チームライブラリのスタイルは取り込めない、公開は Figma コミュニティにも公開する場合のみ |
| プロフェッショナル | 月2,400円（年払い）／月3,000円（月払い） | 月3,000 | ファイルとプロジェクトが無制限 |
| ビジネス | 月8,300円（年払い） | 月3,500 | AI機能が有効になっている場合に Make を利用可能 |
| エンタープライズ | 月13,600円（年払い） | 月4,250 | 管理者がAI機能のオン・オフを切り替えられる |
- Devシート・コラボシート（プロフェッショナルの年払いで月1,800円・月450円など）と閲覧のユーザーのAIクレジットは月500です。これらのシートでもドラフトの中では Make を試せますが、Make ファイルの共有と公開はフルシートでしかできません
- クレジットが足りないときは、管理者がAIクレジットをサブスクリプションか従量課金で追加購入でき、チーム全体で共有できます。追加分の金額は管理ダッシュボードで確認します
- シートに含まれるクレジットは毎月リセットされ、繰り越せません
- 金額は日本の料金ページ（円表示）のもので、消費税などの税は請求先の住所にもとづいて計算されます（Figma ヘルプ「Figmaでの請求ガイド」）
料金は2026年11月時点の公式の料金ページと、そこから案内されているAIクレジットの仕組み・Figma Make に関するFAQにもとづきます。
他のAIアプリ・UI生成ツールとの違い
| 製品 | 提供元 | 向いている使い方 | 料金の入口 |
|---|---|---|---|
| Figma Make | Figma | Figma のデザインやデザインシステムを前提に、動くプロトタイプ・Webアプリを作る | スターター無料、フルシート月2,400円〜 |
| v0 | Vercel | 言葉の指示からフルスタックのWebアプリを作り、Vercel に公開する | Free $0／Plus $30 |
| Lovable | Lovable | フロントからバックエンドまで備えたWebアプリを生成し、そのまま公開する | 無料（1日5クレジット）／Pro $25 |
| bolt.new | StackBlitz | ブラウザ上で編集できるコードを生成し、DB・認証・ホスティングまで済ませる | Free／Pro $25〜 |
| Stitch | プロンプトや画像からUIデザインとフロントエンドのコードを生成し、Figma へ書き出す | 無料（ベータ） |
他社の欄は、各製品ページに記載の確認時点の内容です。
最大の違いは、Figma の中にあることです。v0・Lovable・bolt.new はアプリを作って公開するところまでを主眼にしたツールで、Figma Make はデザインチームが持っているデザイン・ライブラリ・デザインシステムを前提に生成し、結果をまた Figma Design に戻して仕上げられます。すでに Figma を使っているチームなら、別のツールを契約せずにフルシートの範囲で使い始められる点も選ぶ理由になります。
- デザインのアイデア出しを無料で済ませたいなら Stitch（生成したUIを Figma へ書き出せる）
- デプロイまで一気に進めたいなら v0 や Lovable、bolt.new
- 既存の React アプリをビジュアルに直したいなら Onlook
導入実績と評判
Figma Make の公式サイトには、製品づくりの現場からのコメントが実名で掲載されています。
「Figma Makeは、アイデアから完成した機能に至るまでのプロセスを大幅に短縮しており、これに代わるものは想像できません。」
— Brian Muehlenkamp 氏（Ticketmaster プロダクトマネージャー）
「Figma Makeのようなツールにより、プロトタイピングを迅速に行えるようになりました。以前はアイデアを考えてから実際の形にするまで6週間かかっていましたが、今ではわずか数時間で実現できます。」
— Vishal Kapoor 氏（Affirm プロダクト担当SVP）
同じページには「あなたが愛用するプロダクトは、Figmaでデザインされています」として、Airbnb・Atlassian・Dropbox・Duolingo・GitHub・Microsoft・Netflix・Slack・Stripe・Zoom などのロゴが並んでいます（Figma 全体の利用企業としての掲載です）。
よくある質問（FAQ）
Q. Figma Make は無料で使えますか。 スタータープラン（無料）で試せます。AIクレジットは1日150・月最大500で、共同作業は共有できる Make ファイル3つまで、公開は Figma コミュニティにも公開する場合のみといった制限があります。継続して使うなら、有料プランのフルシートが前提です。
Q. Figma Make だけを契約できますか。 できません。Figma の製品は個別に購入できず、プランとシートを選ぶ形です。Figma Make はフルシートに含まれ、同じシートで Figma Design・Dev Mode・FigJam・Figma Slides なども使えます。
Q. 作ったアプリを公開できますか。 できます。Make ファイルのオーナーと編集権限を持つ人が、専用のURLで公開ウェブに公開でき、独自のドメインも割り当てられます。公開されたサイトの訪問者は、元の Make ファイルや会話にはアクセスできません。ビジネスプランでは、管理者が組織の公開をオン・オフできます。
Q. 生成されたコードを手で直したり、書き出したりできますか。 コードエディターで直接編集でき、自分のコードを追加することもできます。フルシートではコードのエクスポートにも対応しています（Dev・コラボ・閲覧シートはドラフト内のみ）。
Q. 自社のコードベースで使えますか。 2026年11月時点では、手元のコードベースで Make を使う機能（ベータ）は「近日公開」とされています。現在は、npm パッケージや Makeキットでデザインシステムを取り込む形で使います。
Q. 入力したデータはAIの学習に使われますか。 Figma では、チームや組織の管理者がAI機能とコンテンツトレーニングの設定を管理できます（ヘルプ「チームまたは組織のAI設定とコンテンツトレーニングを管理する」）。社内のデザインを扱う前に、管理者の設定を確認してください。
Figma Make は Figma の製品群の1つ
Figma Make は単独のアプリではなく、Figma のプラットフォームの中の1製品です。同じフルシートで、デザインの Figma Design、開発者向けの Dev Mode、ホワイトボードの FigJam、プレゼンテーションの Figma Slides、イラストの Figma Draw、Webサイト公開の Figma Sites（ベータ）、ブランドに沿った素材を量産する Figma Buzz（ベータ）、アニメーションの Figma Motion（ベータ）などが使えます。AIクレジットもこれらのAI機能で共有されます。
本ページの情報は2026年11月時点で公式サイト・料金ページ・ヘルプセンターに公開されている内容にもとづきます。機能・料金は変更されることがあるため、最新の情報は公式サイトをご確認ください。
