生成AI

最終更新日:2026/04/02
Figma Makeとは?
デザインのアイデアをテキストで入力するだけで、動くプロトタイプやWebアプリが自動生成されるツール。それが「Figma Make」です。デザイナーだけでなく、エンジニアや技術的な知識に乏しい業務担当者でも活用できる間口の広さが特徴です。
本記事では、Figma Makeの概要から使い方・料金・役割別の活用方法・企業導入の視点まで、企業担当者が導入を検討する上で必要な情報を網羅的に解説します。

Figma Make(フィグマ メイク)は、Figmaが2025年5月に発表した、AIを使ってアイデアや既存デザインを動く形に変えられるprompt-to-appツールです。
自然言語で指示したり、既存のFigmaデザインを添付したりすることで、機能するプロトタイプやWebアプリ、インタラクティブなUIを作成できます。
従来のFigma Designが主に見た目や画面設計を扱う機能であるのに対し、Figma Makeは会話とコード編集を通じて、動作するプロトタイプやWebアプリを作るための機能です。
生成されたコードはReact/TypeScript(.tsx)を中心に扱われ、プレビューとコードを行き来しながら調整できます。デザインから実装前のたたき台までを、一つの流れで進めやすい点が特徴です。
Figma Designのプロトタイプ機能は、あくまでもデザインの見た目と画面遷移を確認するための「見せるもの」でした。
一方、Figma Makeが生成するのは実際に動作するコードを伴うプロトタイプ・アプリです。
例えば、フォームへの入力・送信処理や、バックエンドサービス(Supabase)との接続によるデータ保存なども実装できます。デザイン段階から実務に近い形で検証できるのが特徴です。
| Figma Designプロトタイプ | Figma Make | |
| 主な用途 | UI・UXの見た目確認 | 動作するアプリ・プロトタイプの生成 |
| コード出力 | なし | あり(HTML/CSS/JS等) |
| バックエンド連携 | 不可 | Supabase等と連携可 |
| 対象ユーザー | デザイナー中心 | デザイナー・エンジニア・ノンエンジニア |
| 外部公開URL | プロトタイプ共有のみ | 専用URLで公開可 |
Figma Makeは無料のStarterプランでも試せますが、利用できる範囲はプランとseatによって変わります。
有料プランではFull seatがフル機能の対象で、Dev seat・Collab seat・View seatでもdrafts内で試用できます。
Starterプランではチームライブラリのスタイルコンテキストは使えず、公開はFigma Communityとの同時公開が条件です。
(参照:Figma公式料金ページ )
| プラン | 月額(年払い・Full seat) | Figma Make主な条件 |
| Starterプラン | 無料 | AIクレジットは1日150、月500まで。公開はFigma Communityとの同時公開が条件 |
| Professionalプラン | $16/月 | AIクレジットは月3,000。Full seatで共有・公開が可能 |
| Organizationプラン | $55/月 | AIクレジットは月3,500。無制限チーム、集中管理ツール、公開範囲の制御に対応 |
| Enterpriseプラン | $90/月 | AIクレジットは月4,250。SCIM seat managementなど、より高度な管理機能に対応 |
※上記は2026年3月時点の米ドル表示価格です。最新情報は公式サイトでご確認ください。

Figma Makeの操作の核となるのが、テキストプロンプトによるUI生成です。「タスク管理アプリを作って。入力欄とリスト表示、完了チェックボックスが必要」といった自然言語の指示に対して、AIがReact/TypeScript(.tsx)を中心としたコードを生成し、即座にプレビューとして表示します。
生成後もプロンプトで「ボタンの色を青に変えて」「スマートフォン表示に対応させて」などと追加指示を送ることで、逐次修正が可能です。コードを直接編集することもできるため、エンジニアが仕上げとして手を加える作業とも、自然に連携します。
生成したプロトタイプのコードはそのままダウンロードでき、多くのエンジニアが使うコード管理ツール「GitHub」へプッシュできます。「Figma上でプロトタイプを確認→コードをGitHubへ送る→エンジニアが本番環境へリリース」という一連のフローを、一つのツール上でほぼ完結させられる点が実務上の強みです。
ただし、この連携にはいくつか制限があります。Figma Makeは自身が新規作成したリポジトリにのみプッシュでき、既存のリポジトリに直接送ることはできません。また、GitHub→Figma Makeの同期には対応しておらず、一方向(Figma Make→GitHub)のみの連携となります。GitHub上で編集した変更はFigma Makeには反映されないため、コードの管理フローには注意が必要です。
また、MCP(Model Context Protocol)サーバーとの連携により、CursorなどのAIコーディングエージェントとの接続も可能です。
生成されたプロトタイプは、公開すると専用URLで共有できます。公開済みのURLはブラウザからアクセスでき、公開範囲や設定はプランや組織設定によって変わります。OrganizationプランとEnterpriseプランでは、オープンなWeb公開に加えて、社内向け公開を選べる場合があります。
Figma Makeのファイルは、Starterプラン(無料)または有料プランのFull seatであれば共有して複数人で確認できます。共同で閲覧したり、相手の入力や閲覧状況を見ながら作業したりできますが、Figma Makeでは現時点でコメント機能は使えません。
Figmaにログイン後、左メニューから「Make」を選択するか、新規ファイル作成時に「Figma Make」を選ぶとエディターが起動します。

プロンプト入力欄に、作りたいものを日本語または英語で入力します。具体的に記述するほど意図に近い結果が得られます。既存のFigma Designのコンポーネントやフレームを添付してプロンプトに含めることも可能で、自社のデザインシステムと整合した出力が期待できます。
生成後のプレビューを確認しながら、追加プロンプトで修正を指示します。「左側にサイドバーを追加して」「レスポンシブに対応させて」など、都度テキストで指示できます。コードパネルを開いて直接コードを編集することも可能です。
今回はこのような指示をしてみます。
「お問い合わせフォームを作ってください。名前・メールアドレス・件名・本文の入力欄と送信ボタンがあるシンプルなデザインにしてください」

「Publish」ボタンをクリックすると、専用のURLが発行されます。このURLをそのままブラウザで開けば、誰でも生成されたWebアプリ・プロトタイプを操作できます。Figmaアカウントなしでアクセス可能なため、社外のクライアントや確認担当者への共有にも使えます。
ただし、公開の条件はプランによって異なります。Starterプランでは、単独のURLでの公開はできず、Figma Communityへの同時公開が条件となります。社外への独立したURLでの共有には、Professionalプラン以上のFull seatが必要です。

Starterプランでは、Figma Makeの基本的な生成・編集機能を利用できます。ただし公開はFigma Community経由に限られるため、社外のクライアントに専用URLで共有することはできません。また、AIクレジットの上限が1日150・月500と設定されており、大量に生成する用途には向きません。
まずFigma Makeがどのようなものかを試す段階、あるいは社内確認のみで完結する小規模な用途には、Starterプランでも十分でしょう。
企業での本格活用を想定する場合、最低でもProfessionalプランへの移行を検討しましょう。外部公開URL・チームライブラリ連携・AIクレジットの増量(月3,000)が主な追加要素です。
複数チームが関与する中規模以上の組織では、チーム数無制限・SSO・一元管理ツールを備えたOrganizationプランが適しています。大企業でSCIMによる権限管理やEUデータホスティングが必要な場合は、Enterpriseプランがおすすめです。
なお、Figma Make単独の有料プランはなく、Figma本体の契約プランに準拠します。最新の料金は公式サイトでご確認ください。

デザイナーにとってFigma Makeは、UIデザインから実際に動くプロトタイプへのステップを大幅に短縮するツールです。Figma Designで作ったコンポーネントやフレームをMakeに取り込み、インタラクションを伴うプロトタイプをプロンプト一つで生成できます。
クライアントへのプレゼン前に「実際に触れるデモ」を短時間で用意する場面や、ユーザーテストのための簡易プロトタイプを素早く量産する場面での活用が想定されます。
エンジニアは、Figma Makeを「ラフな実装の出発点」として活用できます。プロンプトでUIのベースコードを生成しその後エディターで直接手を加えたり、GitHubにプッシュして本番に向けた作業を続けたりするフローです。
特に「デザインファイルから仕様を読み取ってコードを書き起こす」時間の短縮に効果があります。MCPサーバー連携によってCursorなどのAIエディターとも組み合わせられるため、既存の開発ワークフローに組み込みやすい点も特徴です。
技術者ではない企画担当者や業務改善担当者にとって、Figma Makeは「要件をプロトタイプに変換する」ツールとして機能します。「こういう入力フォームが欲しい」「こういう管理画面を作って」といったイメージを、エンジニアに伝える前に自分で形にできます。
社内申請ツール、簡易なダッシュボード、問い合わせフォームなど、定型的なUIであれば比較的精度の高い出力が得られます。完成品として使うのではなく、「エンジニアへの仕様伝達の精度を上げるための中間成果物」として活用するのが現実的な使い方です。

Figmaの有料プランでは、チームメンバーへの権限をFull seat(編集可)・Dev seat(閲覧のみ)で管理できます。Figma Makeで生成したファイルも同様に権限管理が適用されるため、「開発担当者のみが編集可能で、その他のメンバーは確認のみ」という設定が可能です。
Organizationプラン以上では、SSO(シングルサインオン)やドメインキャプチャ機能によって、社員アカウントの一括管理も実現できます。
Figma Makeは、ファイルをチームスペースに置くことで複数メンバーとの共同作業が可能です。デザイナーがベースのUIを生成し、エンジニアがコードを修正・仕上げるという分業フローをFigma上で完結させられます。
また、Figma Designで構築済みのデザインシステム(Organizationプラン以上)をライブラリとして読み込み、Makeの生成物に反映させられます。既存のブランドガイドラインと整合した出力を維持できるため、組織として品質を担保しやすくなります。
Figma Makeで生成した内容を公開する場合は、入力したテキストや接続先データ、掲載画像に機密情報が含まれていないかを事前に確認することが大切です。公開先は、オープンなWeb公開だけでなく、OrganizationプランやEnterpriseプランでは社内限定公開を選べる場合があります。公開設定やパスワード保護の可否は組織設定にも左右されるため、運用ルールを決めた上で使うとよいでしょう。
Figmaでは、AI機能の改善を目的として、ユーザーのデザインコンテンツをモデル学習に使用する「コンテンツトレーニング」という設定があります。この設定のデフォルト値はプランによって異なり、企業導入時には特に確認が必要です。
| プラン | コンテンツトレーニングの初期設定 | 設定変更の単位 |
| Starterプラン | オン(オプトアウト方式) | チーム単位 |
| Professionalプラン | オン(オプトアウト方式) | チーム単位 |
| Organizationプラン | オフ | 組織単位 |
| Enterpriseプラン | オフ | 組織単位 |
Starterプラン・Professionalプランでは、デフォルトでコンテンツトレーニングがオン(有効)になっています。管理者がオプトアウト(無効化)するには、チームの設定画面(Settings → AI → Manage AI settings)から「Content training」のトグルをオフに切り替えます。オフにした時点以降の新規コンテンツや編集内容が、AIモデルの学習に使用されなくなります。
OrganizationプランとEnterpriseプランでは、デフォルトでコンテンツトレーニングがオフになっており、組織の管理画面から設定を確認・変更できます。
なお、コンテンツトレーニングの設定はAI機能へのアクセスとは独立しており、コンテンツトレーニングをオフにしても、Figma MakeをはじめとするAI機能は引き続き利用できます。また、Figmaはサードパーティのモデルプロバイダー(OpenAI等)に対して、顧客がFigma上で作成・アップロードしたデータを自社モデルの学習に使用することを認めていません。
企業での導入にあたっては、自社の情報管理ポリシーに基づき、チームまたは組織の管理者がこの設定を確認・調整しておくことを推奨します。
(参照:Figma公式 – Manage AI settings and content training、Building Figma AI )

社内で使う管理ツールや、ステータス確認ダッシュボードのプロトタイプ作成に活用できます。以下のようなプロンプトが参考になります。
例:「社内の問い合わせ管理ダッシュボードを作成してください。左にカテゴリ別のサイドバー、中央に一覧表(件名・担当者・ステータス・日付)、右に詳細パネルが表示されるレイアウトにしてください。ステータスは未対応・対応中・完了の3種類でラベル色を変えてください」
業務要件に近い細かい指示ほど、後の修正が少なく済むプロトタイプが完成します。
商品のランディングページや問い合わせフォームの骨格をすばやく生成し、デザイン確認のたたき台として使えます。
例:「新サービスのランディングページを作ってください。ファーストビューにキャッチコピーとCTAボタン、サービスの特徴を3列のカードで紹介するセクション、料金プランの比較表、最下部に問い合わせフォームを配置してください。カラーは青と白を基調にしてください」
クライアントへの提案時に「実際に触れるデモ」を用意したい場面で活用できます。スライドで説明するより、実際に動くプロトタイプを操作してもらった方が、合意形成が早まることがあります。
例:「予約管理サービスのデモ画面を作ってください。予約カレンダー(月表示)・予約リスト・新規予約入力フォームの3ページ構成で、ページ間はナビゲーションで遷移できるようにしてください」
「Figma AI」は、Figma Makeを含むFigma全製品に搭載されたAI機能群の総称です。Figma Design上での「レイヤー名の自動変更」「テキストトーンの調整」「要約機能」「画像生成・背景除去」など、デザイン作業を補助する機能が含まれます。
FigmaのAIクレジットは、Figma MakeをはじめとするこれらのAI機能全体で共有されます。利用量に応じてクレジットが消費されるため、ヘビーユーザーはクレジット上限の多い上位プランを選ぶと安心です。
端的に言えば、「動くものを生成・開発したい」のがFigma Make、「デザイン作業そのものを効率化したい」のがFigma AI(Figma Designに統合された各機能)という整理ができます。
| Figma Make | Figma AI(Design統合機能) | |
| 主な目的 | プロトタイプ・Webアプリの生成 | デザイン作業の効率化・補助 |
| 出力物 | 動くコード・プロトタイプ | デザインファイル内の改善・生成 |
| 対象 | デザイナー・エンジニア・ノンエンジニア | 主にデザイナー・PM |
| クレジット消費 | あり | あり(共有クレジット) |
Figma Makeと同じく「プロンプトからUIを生成する」カテゴリには、Framer・v0(Vercel)・Builder.ioなどのツールが存在します。
| Figma Make | Framer | v0(Vercel) | Builder.io | |
| 主な強み | Figma設計資産との連携 | Web公開に強い | React/Next.jsコード生成 | CMS連携・ノーコード |
| Figma連携 | ◎ネイティブ統合 | △インポート可 | ×なし | △一部対応 |
| バックエンド連携 | Supabase | 限定的 | Vercelデプロイ | CMS・API |
| 無料プラン | ○ | ○(制限あり) | ○(制限あり) | ○(制限あり) |
Figma Makeは、Figma上のデザインやライブラリを起点に、動くプロトタイプやWebアプリを短時間で形にしたい場合に向いています。Framerは、公開まで含めてWebサイトを作りたいケースに相性がよく、CMSやSEO機能を同じ環境で扱える点が特徴です。v0は、スクリーンショットやFigmaファイルなどをもとにUIコードを生成したい開発寄りの用途で使いやすいサービスです。Builder.ioは、Figmaからの取り込みに加えて、CMS運用や既存サイトへの組み込みまで見据えたい企業に向いています。
ツール選定の軸は、チームの既存環境と目的によって変わります。すでにFigmaをデザイン基盤として使っている組織であればFigma Makeが最もスムーズに導入できます。デザインシステムや既存ファイルをそのまま活用でき、ツールの切り替えコストが最小限です。
React/Next.js環境で開発チームが主導する場合はv0(Vercel)との相性がよく、Webサイト公開とコンテンツ管理が主目的の場合はBuilder.ioやFramerがより適した選択肢となります。
企業として複数ツールを比較・検討する際は、無料プランを使った並行検証を行ってから契約判断することを推奨します。

Figma Makeのプロンプト生成は非常に強力ですが、複雑なロジックや細かいUIの再現には限界があります。「大枠は生成できるが、細部の調整にコストがかかる」というケースもあります。
特に初めて使う場合は、「まずシンプルなプロンプトで大枠を生成し、追加プロンプトで段階的に細部を修正する」というアプローチが効果的です。また、AIクレジットはリクエストの複雑さによって消費量が変わるため、大規模に使い込む場合はクレジット残量を事前に確認しておくとよいでしょう。
Figma Makeに入力した内容や、Figma Makeが生成したコード・画像・ファイルは、Figmaとの関係ではCustomer Contentとして扱われます。ただし、生成結果の正確性や権利関係が自動で保証されるわけではありません。既存のロゴ、画像、文章などを使う場合は権利処理を確認し、公開前には人の目で内容を見直してください。社外公開や商用利用を行う場合は、必要に応じて法務部門にも確認しておくとよいでしょう。
Figma Makeは、プロンプト入力から動くプロトタイプ・Webアプリを生成できる、Figmaの新しいAI機能です。デザイナーだけでなく、エンジニアやノンエンジニアの業務担当者も活用できる間口の広さが特徴で、特に「Figmaをすでに使っている企業」であれば、既存の設計資産を活かしながらスムーズに導入できます。
企業として活用する際は、権限管理・セキュリティ・クレジット管理といった運用面も含めて検討した上で、チームの規模や用途に合ったプランを選ぶことが大切です。まずは無料のStarterプランで試し、チームの反応や活用シーンを見極めてから本格導入を判断するのがおすすめです。
AISmileyでは、Figmaをはじめとする各種AIツールの比較・導入支援を行っています。自社に最適なAI開発ツールをお探しの際は、ぜひご相談ください。
アイスマイリーでは、生成AI のサービス比較と企業一覧を無料配布しています。課題や目的に応じたサービスを比較検討できますので、ぜひこの機会にお問い合わせください。
はい、日本語のプロンプトに対応しています。「お問い合わせフォームを作ってください」「ダッシュボード画面を作って。左にサイドバー、中央に売上グラフを配置してください」のように日本語で指示を入力できます。ただし、英語のプロンプトのほうが精度が高い場合もあるため、思い通りの結果が得られないときは、英語での入力も試してみてください。
小規模な社内ツールやプロトタイプであれば、専用URLで公開してそのまま利用するケースもあります。ただし、大規模なシステムや高いセキュリティが求められる本番環境への直接利用は推奨しません。Figma Makeはあくまでも「プロトタイプの高速生成」や「エンジニアへの仕様伝達」を目的として活用し、本番リリースにはエンジニアによるコードレビューと追加開発を経るフローが現実的です。
公開されたURLであれば、Figmaアカウントがなくてもブラウザからアクセスして操作できます。ただし、公開範囲が社内限定に設定されている場合や、パスワード保護が有効な場合は、その条件を満たす必要があります。なお、元のFigma Makeファイルを編集したり、会話内容を見たりするには、別途共有権限が必要です。
AIクレジットを使い切ると、その月はFigma Makeをはじめとする各種AI機能が利用できなくなります。翌月になるとクレジットがリセットされます。頻繁にクレジット不足になる場合は、上位プランへのアップグレードを検討してください。なお、AIクレジットはFigma Make専用ではなく、Figma Design内のAI機能全体で共有されるため、他のAI機能の利用状況も合わせて確認することをおすすめします。
業務の課題解決に繋がる最新DX・情報をお届けいたします。
メールマガジンの配信をご希望の方は、下記フォームよりご登録ください。登録無料です。
AI製品・ソリューションの掲載を
希望される企業様はこちら