「Figma Makeを使ってみたいけれど、何から始めればいいのか分からない」「プロンプトの書き方が難しそう」と感じていませんか。Figma Makeは、テキストで指示を出すだけでUIデザインや動くアプリを自動生成できる、Figmaの新しいAI機能です。デザイナーだけでなく、エンジニアやプロジェクトマネージャー、企画担当者まで、誰もがアイデアを瞬時に「動く形」に変えられる時代が到来しました。
本記事では、Figma Makeの基本操作からプロンプトの書き方、料金、最新アップデートまでを、公式情報や実際の活用事例をもとに網羅的に解説します。2026年最新の機能も反映しているので、これからFigma Makeを始める方も、より使いこなしたい方も、この1記事で全体像をつかめます。
Figma Makeとは何か
まずはFigma Makeの正体を正しく理解しておきましょう。
基本概念をおさえることで、後の操作やプロンプト設計の意味が腑に落ちやすくなります。
プロンプトからUIとコードを生成するAI機能
Figma Makeとは、テキストの指示（プロンプト）からプロトタイプを生成し、そのままFigmaの中で編集まで行えるAI機能です。
アイデアを文章で伝えるだけでレイアウトやインタラクションが自動生成され、会話を重ねるごとにUIを反復的に調整できます。
Figmaのワークフロー上で「発想→作成→検証→公開」までを一気通貫で進められるのが核となる価値です。
大きな特徴は、生成されるものが単なる画像ではないという点です。
内部ではReactとTailwind CSSを使った実際に動作するコードが生成されます。
これは使い捨てのプロトタイプ用コードではなく、構造化された読みやすいコードとして出力されるため、開発者がそのまま実装の出発点として活用できます。
リリース時期と開発の経緯
Figma Makeは2025年のConfigで発表され、2025年7月24日に正式リリース（一般提供）されました。
プロンプトから動くプロトタイプを自動生成する機能として、デザイン業界で大きな注目を集めています。
AIモデルにはAnthropic社のClaudeシリーズが採用されており、コード生成とデザイン生成の両方で高い精度を発揮します。
従来のFigma Designとの違い
従来のFigma Designとの最大の違いは、生成されるものが「デザインデータ」か「コード」かという点にあります。
Figma Designで作るプロトタイプは画面遷移をつなぎ合わせたスライドショーのような「見た目だけの状態」ですが、Figma Makeはコードネイティブで実際に動作するアプリケーションを作成します。
注意：Figma MakeとFigma Designは別の機能です。
混同するとプラン選びや権限設定で迷いやすいので、まずは役割の違いを明確に理解しておきましょう。
Figma Makeを使う準備
実際に使い始める前に、必要なアカウントとプラン、権限を確認しておきましょう。
ここを押さえておくと、後から「公開できない」といったつまずきを防げます。
必要なアカウントとアクセス方法
Figma Makeを使うには、まずFigmaのアカウントが必要です。
Figma MakeはすべてのFigmaユーザーが利用できますが、できることはプランによって異なります。
アクセスする際は、figma.comの上部ナビゲーションにある「Make」を探すか、新規ファイル作成時にFigma Makeを選択します。
特別なインストールは不要で、ブラウザ上ですぐに始められます。
プランとシートの仕組み
Figmaの料金は「組織全体で選ぶプラン」と「各メンバーに割り当てるシート」の組み合わせで決まります。
プランが組織の土台（使える機能の範囲や管理レベル、AIクレジット枠）を決め、シートが個人の操作範囲（誰がどこまでできるか）を決める構造です。
Figma Makeの公開やコード編集といったキー操作は、プランではなくシートの種類で決まる点がポイントです。
主なプランは以下のとおりです。
- Starter
無料で試せます。
ただしWeb公開時はFigma Communityへの同時公開が必須で、非公開のWeb公開はできません。 - Professional
小〜中規模チーム向け。
コミュニティに公開せずにWeb公開でき、チームライブラリなども使いやすくなります。 - Business（Organization）
部門横断やガバナンス重視。
SSOや監査など管理機能が拡張されます。 - Enterprise
大規模運用前提のエンタープライズ機能一式。
注意：Figma Makeの全機能（公開やコード編集・ZIPダウンロードなど）を使うには「フルシート（Full seat）」が必要です。
チームで導入する際は、公開やコード編集を行うメンバーにだけフルシートを割り当てると、コストを最適化できます。
Figma Makeの基本的な使い方
準備が整ったら、いよいよ実際に使ってみましょう。
ここでは初心者が3分で体験できる手順から、具体的な作成ステップまでを解説します。
3分で試す最初の一歩
まずはFigma Makeファイルを開き、チャット欄に簡単なメッセージを送ってみましょう。
AIが応答すれば準備完了です。
シンプルなプロンプトを入力するだけで、1画面のプロトタイプが数十秒〜数分で生成されます。
生成されたプロトタイプはその場でクリックやスクロールして動作確認でき、インタラクティブな体験が可能です。
エラーが出たときは、プロンプトを短く・具体的に修正するのが解決の近道です。
UI生成の4ステップ
Figma Makeでの基本的な作成フローは、大きく次の4ステップに分けられます。
- ステップ1：Figma Makeを開く
Figmaのダッシュボードから「Make」を選ぶか、新規ファイル作成時にFigma Makeを選択します。 - ステップ2：プロンプトを入力
チャットエリアに「タスク管理アプリを作って。入力欄、リスト表示、完了チェックボックスが必要」のように指示を入力します。
日本語プロンプトにも対応しています。 - ステップ3：プレビューで確認・修正
AIがReactとTypeScriptのコードを生成し、即座にプレビュー表示されます。「ポイントして編集」機能を使えば、プレビュー上の特定のUI要素をクリックして直接修正できます。 - ステップ4：共有・エクスポート
チームスペースに配置して共有できます。
フルシートであれば公開も可能で、コードをエクスポートして開発環境に持ち込めます。
下記は、Figma Makeに渡すプロンプトの一例です。
日本語でこのように具体的に書くと、意図に近い出力を得やすくなります。
シンプルなタスク管理アプリのホーム画面を作成してください。
画面上部にアプリ名のヘッダー、中央にタスクリスト（3項目）、各項目に完了チェックボックス、画面下部に「追加」ボタンを配置。
配色はミニマルで、余白を広めにとってください。プレビューとコードの切り替え
Figma Makeでは、見た目（プレビュー）だけでなく実際のコードを見ながら修正できます。
プレビュータブの横にある「コード」タブに切り替えると、現在生成されているデザインのソースコードが表示されます。
「このクラス名を変えて」「Reactの構造を整理して」といった、より論理的で正確な修正指示が可能になります。
また、プレビュー画面のボタンからPC・モバイル・タブレットの表示をワンクリックで切り替えられるため、わざわざ別フレームを作らなくてもマルチデバイス対応を確認できます。
効果的なプロンプトの書き方
Figma Makeの出力品質は、プロンプトの質に大きく左右されます。
ここでは、思いどおりのUIを得るためのプロンプト設計のコツを紹介します。
具体的に指定すべき5つの要素
質の高いプロンプトは、一般的に次の5つの領域をカバーしています。
最初のプロンプトにこれらの重要情報を盛り込むことが、出力品質を高める最も重要なポイントです。
- コンテキスト：誰が、どんな目的で使うアプリ・サービスなのか
- 説明：必要な画面や機能の一覧（例：ホーム画面、検索画面）
- プラットフォーム：モバイルかPCか、対象デバイス
- ビジュアルスタイル：モダン、ミニマル、洗練されたなどの方向性
- UIコンポーネント：ボタン、入力欄、カードなど配置したい部品
最初に渡すコンテキストの質が、AIが生成する出力の質を直接左右します。
曖昧な指示はAIに推測を強い、結果として汎用的で当たり障りのないUIが生まれやすくなります。
役割を与えるシナリオ型プロンプト
プロンプトを格上げする簡単な方法のひとつが、シナリオのように枠組みを与えることです。「あなたはシニアUXデザイナーです」「〜として振る舞ってください」といった一文から始めると、AIに特定の役割や視点を持たせられます。
たとえば「あなたはシニアUXデザイナーとして、モバイルアプリのオンボーディング画面を作成してください。ユーザーエンゲージメントのベストプラクティスに基づいてワイヤーフレームを生成してください」のように書くと、より構造化された詳細な結果が得られやすくなります。
既存デザインを起点にする
Figma Makeはテキストだけでなく、既存のFigmaデザインやコンポーネント、画像ファイルもインプットとして渡せます。
ゼロから文章だけで作らせるより、既存のデザインフレームを貼り付けてインタラクティブ化させるほうが、視覚的な参照がある分だけ良い結果になりやすい傾向があります。
ブランドの一貫性を保ったまま生成したい場合は、ライブラリのスタイル（色・タイポgrafi・余白）を取り込ませるとよいでしょう。
2026年の最新アップデート
Figma Makeは継続的に進化しています。
ここでは2026年に追加された主要なアップデートを紹介します。
古い情報のまま使うと機能を活かしきれないため、最新動向を押さえておきましょう。
プランモードで設計を固めてから生成
2026年6月に追加された「プランモード（Plan mode）」は、生成を始める前に方向性を整理するための新しいオプション機能です。
Makeがプロジェクトを確認し、いくつか質問を投げかけたうえで、生成前に編集・調整・承認できる計画案を提示してくれます。
複数セクションのレイアウトや詳細な仕様、デザインのインポートを伴う複雑な作業で特に効果を発揮します。
シンプルなプロンプトでは省略して直接生成することも可能です。
プロンプト欄のドロップダウンか「/plan」コマンドで有効化できます。
注意：プランモードは事前に余分な処理を行うため、通常の生成よりも多くのAIクレジットを消費します。
実行前に消費見込みの目安が表示されるので、必ず確認してから承認しましょう。
Web検索とローカル連携の強化
2026年のアップデートでは、Makeが生成の途中でWebからリアルタイムの情報を取得できるようになりました。
広く検索したり、特定のURLを取得したりして、最新のコンテンツに基づいてUIを構築できます。
情報がセッションに取り込まれる前にレビューできる承認の仕組みも備わっています。
さらに、Makeをローカルのコードベースに接続し、特定の要素に対して文脈に沿った指示を出すと、AIコーディングエージェントが対応するコード編集を行う機能も追加されました。
指示のスタック機能
生成中に追加の指示を積み重ねられる機能も登場しました。
Makeがまだ生成している最中でも、次の指示を先に入力しておくことができ、現在のビルドが終わると自動的に送信されます。
コミット前であれば編集や削除も可能なので、作業を止めずに次々とアイデアを反映できます。
AIクレジットの仕組みとコスト管理
2026年に大きく変わったのが課金体系です。
コストを意識して使うために、クレジット制の仕組みを理解しておきましょう。
2026年からのクレジット制移行
2026年3月18日から、Figma AIはクレジット制に移行しました。
すべてのプランにAIクレジットが含まれていますが、プランによって上限が異なります。
それ以前は有料プランのフルシートで実質無制限に近い使い方ができていたため、この変更は使い方とコストに直結します。
消費量の目安
Figma Makeはエージェント型AIのため、タスクの複雑さに応じて消費量が変動します。
シンプルなUI生成なら数十クレジット程度ですが、複雑なアプリ生成では数百クレジットを消費する場合もあります。
画像生成についても、選ぶモデルによって1枚あたりの消費量が変わります。
クレジットを節約するコツ
限られたクレジットを有効に使うためのポイントは次のとおりです。
- 明確で具体的なプロンプトを書く
曖昧な指示はAIの試行回数を増やし、クレジットを浪費します。 - 既存デザインを起点にする
ゼロから生成するより、既存デザインの修正のほうがクレジットを節約できます。 - モデル選択を活用する
画質が十分なら軽量なモデルを選ぶなど、Figma Make側でモデルを選んで消費量をコントロールできます。
正確なクレジット消費量は変動するため、注意：最新の消費量や上限はFigma公式ヘルプで必ず確認してください。
本記事の数値は2026年前半時点の目安であり、今後変わる可能性があります。
Supabase連携で動くアプリを作る
Figma Makeは見た目だけのデザインにとどまりません。
バックエンドと連携すれば、本番に近い「動くプロトタイプ」を作れます。
Supabase連携でできること
Supabaseは、Firebaseに似たオープンソースのデータベースプラットフォームです。
この連携を使うと、Figma Makeのプロトタイプを実際のデータベースバックエンドに接続できます。
その結果、プロトタイプ内のボタンが実際にデータベースへ書き込みを行ったり、リストが実データを読み込んだり、フォームの入力がセッションをまたいで保存されたりします。
つまり、シミュレーションではなく実際に機能するMVP（実用最小限の製品）のように振る舞うプロトタイプが作れるのです。
有効化の方法と公開
連携はFigma Make側の設定から接続するか、プロンプトで「認証を追加」などと指示するだけで有効化できます。
認証やデータ保存、シークレット管理といった簡易バックエンドを付与でき、見た目だけのデザインから一歩進んだ本番に近い検証が可能になります。
完成したものはFigma内からそのまま公開・共有でき、Figma Sitesと組み合わせればレスポンシブなWebサイトとしての発信まで一本化できます。
Figma Makeを使うときの注意点
便利なツールですが、AI生成ならではの落とし穴もあります。
実務で使う前に知っておきたい注意点をまとめます。
生成結果は「完成品」ではなく「出発点」
Figma Makeが返してくるのは、完璧な完成品ではなく、あくまでアイデアを生み出すための出発点です。
実際の利用者からも、静的なデザインが数分でコードとプロトタイプに変わる体験は驚きである一方、最初の出力は完璧ではなく、プロンプトを練り直す試行錯誤が必要だったという声があります。
AIはデザイナーを置き換えるものではなく、発想を加速させるパートナーとして捉えるのが現実的です。
視覚的な不具合と再修正の注意
ベータ段階を含め、コントラスト比が不十分といった視覚的な不具合が生じることがあります。
多くの場合は追加のプロンプトで修正できますが、注意点があります。
デザインを反復していくと、Figmaが過去の修正を上書きしてしまうことがあるのです。
たとえばボタンのラベルのコントラストを直した後、別のプロンプトで新しいセクションを追加すると、その変更とともに前回の修正が取り消されてしまう場合があります。
注意：重要な修正を加えた後は、その状態をこまめに確認し、必要なら都度プロンプトで再指示しましょう。
出力の正確性は必ず検証する
AIが生成する情報や結果は、誤りや不正確さを含む可能性があります。
Figma公式も、AIツールの出力は一般的な参考として扱い、事実や専門的助言の代わりにすべきではないと注意を促しています。
重要な意思決定や本番実装の前には、必ず自分でクロスチェックを行いましょう。
また、AI生成物を提示する際は、その旨を周囲に伝えることが推奨されています。
まとめ
Figma Makeは、プロンプトを書くだけでUIデザインから動くコードまでを生成できる、Figmaの革新的なAI機能です。
2025年7月に正式リリースされて以降、プランモードやWeb検索連携、Supabase連携など、実務に直結する機能が次々と追加されてきました。
基本の4ステップを押さえ、5つの要素を意識した具体的なプロンプトを書けば、初心者でも数分でインタラクティブなプロトタイプを形にできます。
一方で、2026年3月からのAIクレジット制移行により、使い方次第でコストが変わる点には注意が必要です。
具体的なプロンプト、既存デザインの活用、モデル選択を組み合わせて、賢くクレジットを節約しましょう。
そして何より、生成結果は完成品ではなく出発点であることを忘れず、最終的な品質は人の判断で磨き上げる姿勢が大切です。
まずは無料のStarterプランで小さく試し、Figma Makeがもたらす新しいデザインワークフローを体験してみてください。
なお、料金やAIクレジットの最新仕様は変更される場合があるため、導入前にはFigma公式のリリースノートやヘルプセンターで最新情報を確認することをおすすめします。
