「FigmaにAI機能が追加された」とは聞いたものの、Figma Makeで実際に何ができるのか、どう使えばいいのかピンと来ていない方も多いのではないでしょうか。

Figma Makeは、プロンプト（テキスト指示）を入力するだけで、動くWebサイトやツールを自動生成してくれるFigmaの新機能です。本記事では、Figma Makeの基本的な使い方から、駆け出しデザイナーが業務に活かすためのコツ、実際に何度も試行錯誤して分かった限界点まで徹底解説します。

📺 動画でも解説しています（25分）

この記事を読めば、以下のことが分かります。

• Figma Makeでできること・できないこと

• 料金プランと2026年5月時点の利用条件

• 基本操作から実践活用例まで

• デザイナーが現場で活かすための4つのコツ

Figma Makeとは？AIでデザインから動くものまで作れる新機能

Figma Makeは、Figmaが提供するAI駆動の自動生成ツールです。 自然言語でプロンプト（指示文）を入力するだけで、実際に動作するWebサイトやWebサービス、Webツールを自動的に作ってくれます。

例えば、以下のような指示を出すと…

「タスク管理ができるシンプルなWebアプリを作ってください」

AIがコードを生成し、ブラウザですぐに動作するアプリケーションが完成します。生成されるのは単なる絵やモックアップではなく、コードベースの実装物なので、ボタンを押すと実際にアクションが起こりますし、そのままWeb上に公開することも可能です。

Figma Makeの中身は「Claude（Anthropic製AI）」

Figma Makeは独自AIではなく、Anthropic社のClaudeシリーズを中核に採用しています。2025年5月のリリース当初はClaude 3.7 Sonnetが標準でしたが、その後アップデートが進み、2026年5月現在は複数のClaudeモデルから用途に応じて選択して使用可能です。

強力なモデルほど推論能力が高く、生成されるコードの精度も向上しますが、その分消費するAIクレジット量も多くなる点に注意が必要です。日常的な作業はSonnet 4.5、複雑な構造のものを作るときだけOpus系を使う、といった使い分けがおすすめです。

なお、指示を出した内容以外の部分も、Claudeが「ユーザーの意図ならおそらくこうだろう」と推測して補完してくれるため、簡素なプロンプトでもそれなりに完成度の高いアウトプットが得られます。

Figma Makeはこんな人におすすめ

Figma Makeの料金とAIクレジット【2026年5月最新】

Figma Makeは、Figmaの月間AIクレジット制で利用する仕組みになっています。2026年3月から正式にクレジット上限が適用され、無料・有料問わずすべてのプランにクレジット枠が割り当てられました。

各プランの月間AIクレジット上限

無料プランでも500クレジットが付与されるため、「まず触ってみたい」という方も気軽に試せます。一方で本格的に業務利用するならProfessional以上が現実的なラインです。

Figma Makeのクレジット消費目安

つまり、Starterプラン（500クレジット）だと0→1の生成は月5回程度が限界ということ。修正を含めると体感的にもっと早く尽きます。

追加クレジット購入オプション

月間枠を使い切った場合、追加クレジットを購入することができます。

クライアントワークでガッツリ使うなら月額サブスクの方が割安です。

駆け出しデザイナーのプラン選びの目安

クレジット制が導入されたことで、「使い放題」の感覚から「コスト意識を持って使う」モードへの移行が必要になっています。1回のフル生成に100クレジット消費する前提で、プロンプトを練ってから送信する習慣をつけるのがおすすめです。

最新情報はこちらを確認してください：https://help.figma.com/hc/ja/articles/33459875669015-AI%E3%82%AF%E3%83%AC%E3%82%B8%E3%83%83%E3%83%88%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF

Figma Makeの主要機能を徹底解説

Figma Makeには、デザイナーが効率的に活用できる便利な機能が複数搭載されています。基本的な使い方を押さえる前に、何ができるかを把握しておきましょう。

1. プロンプト入力でWeb生成

最も基本となる機能です。チャット欄に作りたいものをテキストで指示すると、AIがコードを生成して実際に動くWebサイト・サービス・ツールを作ってくれます。

2. Figmaフレームの貼り付け

Figmaで作成済みのデザインデータをコピーして、Figma Makeのチャット欄にそのまま貼り付けることができます。「このデザインを再現してください」と指示するだけで、デザインデータからコード化してくれる、デザイナーには最も嬉しい機能です。

3. ライブラリ連携

自分のチームやブランドで作ったFigmaライブラリを公開している場合、Figma Makeと連携できます。自分のデザインシステムに沿ったUIを生成してくれるため、ブランド一貫性のあるアウトプットを保てます。

4. ポイント編集

生成された画面の特定の要素を選んで、その部分だけを修正できる機能です。「この文字の色を変える」「このボタンのサイズを変える」といった局所的な修正は、全体修正より精度が高いため、ポイント編集を活用するのが効率的です。

5. 画像アップロード

PCにある画像をアップロードして、その画像を参考にデザインを作ってもらうこともできます。ムードボードやリファレンスを渡しながら指示できる感覚です。

Figma Makeの使い方【画像つき5ステップ】

ここからは、Figma Makeの基本的な使い方を実際の操作手順に沿って解説します。

ステップ1：新規ファイルを作成する

Figmaのトップページから「新規作成」ボタンをクリックします。デザインファイル・FigJamと同じ階層に「Make」というメニューが表示されているので、それを選択します。

ステップ2：プロンプトを入力する

テキスト入力欄が出るので、何かつくってみたいものを打ち込んでみましょう。入力すると画面が切り替わり、コードの生成が始まります。

ステップ3：生成を待つ

初回の生成は数分かかります。 AIが推論を重ねながら大量のコードを書いているため、しばらく待つ必要があります。使用するモデル（Sonnet 4.5かOpus 4.7か）や生成内容の複雑さによって時間は前後しますが、生成中は他の作業をしながら待つのが効率的です。

ステップ4：プレビューを確認する

生成が完了すると、メイン画面に動くWebサイトがプレビューされます。ボタンをクリックすればちゃんと反応するし、ホバー効果も自動で追加されている。

Figma Makeの画面は大きく3つに分かれています。

プレビューと「コード」のタブを切り替えることで、生成中のソースコードを直接確認することもできます。

ステップ5：修正する

変えたい箇所があれば、チャット欄に指示を入れて修正します、例えば以下のような指示をしてみます。

ダークテーマにしてください

すると以下の画像のようにAIが修正してくれました。このように修正を何回も繰り返して完成まで持っていきます。

ここまでがFigma Makeの基本的な使い方の流れです。

Figma Makeの修正方法 — ポイント編集が便利

生成された画面はそのまま完成形ではなく、修正を重ねながら理想に近づけていくのが基本フローです。修正方法は2種類あります。

方法1：チャットでの全体修正

チャット欄に修正指示を追加で書くと、AIがコード全体を書き直して反映します。

背景の色を黒から白に変えてください

ただし全体修正は「指示していない部分まで変わる」リスクがあります。意図しない箇所まで変更されることがあるため、大きな構造変更がないときは次の方法がおすすめです。

方法2：ポイント編集（おすすめ）

ポイント編集モードに切り替えると、画面内の要素を直接クリックして個別に指示できます。

ポイント編集なら「変えたい部分だけ」をピンポイントで修正できるため、誤って他の部分が変わるリスクが減ります。実務で使うなら、ポイント編集をメインに据えるのがおすすめです。

Figma Makeの実践活用例3選

実際にFigma Makeで作られている事例を3つ紹介します。それぞれ用途が異なるので、自分の使いたいシーンと照らし合わせてみてください。

事例1：インタラクティブなアンケート結果ページ（自作）

ウェビナーで使用する用に、インタラクティブなアンケート結果ページを作成してみました。静止画で見せるよりも見てる側も楽しくなるように、インタラクティブな要素を入れています。

カテゴリーをクリックすると詳細画面が見れるようになっています。

これくらいの簡単なページであれば６回のやりとりで作成できました。

事例2：AI縛りLP（一休デザインのnote記事より）

一休デザインさんが、Figma MakeだけでLP（ランディングページ）を制作した事例。78バージョン目で完成しており、AIに縛られた状態でどこまでクオリティが出せるかの実験として非常に参考になります。記事内では「シンプルなLPなら完成できたが、世界観・ストーリー・ブランド哲学を反映させたいプロジェクトには人間の介入が必要」と結論づけており、AIと人間の役割分担についても示唆に富んだ内容です。

📝 参考記事：Figma Makeで"AI縛りLP"を作ってみた｜一休デザイン

事例3：ポートフォリオサイト（鈴木健太氏のnote記事より）

映像作家の鈴木健太さんが、1日でポートフォリオサイトを作った事例。Googleスプレッドシートに作品情報（番号・優先度・タイトル・制作年・ジャンル・動画URL・サムネイル画像・概要・スタッフ一覧など）をまとめ、それをClaudeで読み込ませてテキスト形式に変換したものをFigma Makeに渡して構築するという、複数ツール連携の好例です。これまでiWeb・Adobe Muse・Squarespace・Studioなど様々なポートフォリオサイトツールを試してきた鈴木さんが「Figma Makeが一番フィットした」と評価しています。

📝 参考記事：Figma Makeで1日でポートフォリオサイト作れた｜鈴木健太

これら3つの事例を見ると、「ツール／LP／ポートフォリオサイト」と用途は様々ですが、共通するのは『AIに任せきりではなく、人間が修正を重ねる』というスタンスです。

デザイナーがFigma Makeを使う4つのコツ — 校長の見解

NOT DESIGN SCHOOL校長として、駆け出しデザイナーがFigma Makeを実務に活かすための重要なコツを4つお伝えします。

コツ1：初期プロトタイプ作成に使う

Figma Makeは「最終プロダクトを作る」より「0→1で素早く形にする」ツールとして使うのがベストです。アイデアを言葉で説明するより、動くものを見せた方がチームメンバーやクライアントとの認識合わせが圧倒的に早くなります。

「こういうサービスがあったらいいんじゃない？」というアイデアを、即日で叩き台にできる。これがFigma Make最大の価値です。

コツ2：段階的に修正を重ねる前提でいる

一発で完成形は出てきません。先述の事例でも30〜80回のやり取りで完成しています。Claudeのモデル更新（Sonnet 4.5、Opus 4.7など）で初期生成の精度は確実に上がってきていますが、納得いくクオリティに仕上げるには複数回のやり取りが前提です。

最初から「複数回修正する」つもりで、長いラリーを覚悟することが大切です。1回目で諦めて「使えないツール」と判断するのはもったいない。シンプルなものなら数回、複雑なWebサービスなら数十回の修正が必要、と覚えておきましょう。

コツ3：他ツールと組み合わせる

本格的なWebサービスを開発するなら、Figma Make単独ではなく、他ツールとの組み合わせがおすすめ。

• 初期プロトタイプ → Figma Make

• コード書き出し → VS Code / Cursor / Claude Code

• データベース連携 → Supabase

• 公開・運用 → Vercel / Netlify

Figma Makeはあくまで「最も上流のプロトタイピング」に強いツールという認識で、適材適所で使い分けるのが現実解です。

コツ4：チーム内のフィードバック叩き台に活用する

社内会議やチームのアイデア出しで、「とりあえずFigma Makeで叩き台を作る」という運用も効果的です。

スライドで説明するより、実際に触れるプロトタイプを共有した方が「ここはこっちの方が使いやすい」「これはこっちの方が良さそう」といった具体的なフィードバックが集まります。フィードバック・ループを高速で回したいときに重宝します。

Figma Makeの限界と注意点。 試行錯誤して分かったこと

実際に何度も使ってみて分かった、公式ドキュメントには書かれていない正直な限界点を共有します。

1. 細部のクオリティはまだ甘い

ロゴやアイコンが崩れる、サイズ感が微妙、画像の位置がずれる——ピクセル単位の精度はまだ完璧ではありません。 全体の土台はしっかりしていても、細部を見ると粗が目立ちます。

2. インタラクションは限定的

ホバー効果やページ遷移は自動生成してくれますが、プルダウンが開かない、通知ボタンが反応しないなど、複雑なインタラクションは実装されていないことが多いです。

3. 修正中に「壊れる」ことがある

修正を重ねるうちに、一度直したはずの部分がまた崩れる現象が起こります。そのため、納得のいくバージョンが出たらすぐに保存・確定する運用が必要です。

4. 指示が反映されにくい場合がある

「このボタンをグラデーションにして」と複数回指示しても、AIが何度も無視することがあります。プロンプトの言い回しを変える、ポイント編集に切り替えるなどの工夫が必要です。

5.デザイン性の高いサイトは厳しい

ギャラリーサイトに載るようなデザイン性の高いWebサイトをつくるのは正直厳しいです。シンプルな構成＆デザインのLPとかであればキレイなものがつくれる可能性が高いです。

Figma Makeの主要な拡張機能と今後の進化

Figma Makeは2025年5月のリリース以降、継続的にアップデートが重ねられ、現在では多くの連携機能が実装されています。実装済みの拡張機能と、今後さらに進化が期待される領域を整理しておきます。

✅ 実装済み：Figma Sites（フィグマサイト）との連携

Figma Sitesで作ったWebサイト内に、Figma Makeで作った機能を埋め込めるようになっています。デザインからWebサイト公開まで、Figma内で完結するワークフローが現実になりました。

✅ 実装済み：Supabase連携

バックエンドサービスSupabaseとの連携が実装済みで、ユーザー投稿機能、お気に入り機能、ブックマーク機能など、データを保持する高度なWebサービスが作れるようになっています。これにより「フロントエンドだけのプロトタイプ」から「実用可能なWebサービス」へと用途が大きく広がりました。

✅ 実装済み：デザインシステム（ライブラリ）との同期

自社デザインシステムを参照しながらAIが生成する機能が強化されています。Figmaライブラリを公開していれば、自動でブランド一貫性のあるUIが生成されるため、デザイントークンに沿った量産が可能です。

Figma Makeは今後もAnthropic社のClaudeモデル進化と連動して機能向上が見込まれるため、半年〜1年スパンで定期的にキャッチアップしておくのがおすすめです。

✅ 実装済み：Figmaデザインファイルへの書き出し

Figma Makeで生成したアウトプットを、「デザインをコピー」ボタンひとつでFigmaのデザインファイルに編集可能なレイヤーとしてエクスポートできます。AI生成 → Figma上で微調整 → 再びFigma Makeに戻して反映、というループが現実的になり、「コードベースの動くもの」と「デザインデータ」を行き来できるのが強みです。デザイナーが慣れたFigma上でディテールを詰めたいときに重宝します。

よくある質問（FAQ）

Q1. Figma Makeは無料で使えますか？

Starter（無料プラン）でも月500クレジット付与されるため、月5回程度の0→1生成は試せます。本格的な業務利用ならProfessional（月3,000クレジット）以上がおすすめです。2026年3月からクレジット制が正式適用されたため、無料でも有料でも上限を超えると追加クレジット購入が必要になります。

Q2. AIクレジットを使い切ったらどうなりますか？

月間クレジットを使い切ると、追加クレジットを購入するまでFigma Makeでの生成ができなくなります。追加クレジットは5,000で$150〜、月額サブスクなら$120/月から購入可能です。

Q3. 商用利用は可能ですか？

Figmaの利用規約に準拠する範囲で商用利用可能です。ただしAI生成物の特性上、ミッションクリティカルな商用プロダクトの本番運用前は十分なレビューと検証を推奨します。

Q4. 既存のFigmaファイルと連携できますか？

はい。既存のFigmaフレームをコピー＆ペーストでFigma Makeに渡せますし、ライブラリ連携で自社デザインシステムも活用可能です。

Q5. 生成されたコードはダウンロードできますか？

はい。コードのダウンロードが可能なので、Figma Makeで作った初期プロトタイプを他の開発環境（VS Code、Cursorなど）に持ち込んで本格開発に移行できます。

まとめ｜Figma Makeはデザイナーが気軽に使えるプロトタイピングツール

Figma Makeは、駆け出しデザイナーにとって「アイデアを即座に形にできる強力な味方」です。一発で完璧なものは出てこないものの、修正を重ねれば公開レベルのWebサービス・LP・ポートフォリオが作れます。Supabase連携やライブラリ同期などの拡張機能も整い、本格的な業務利用にも十分耐える段階に達しています。

ポイントは、「Figma Makeだけで何でも作る」のではなく「初期プロトタイプの強力な相棒」として使い倒すことです。チームの議論を加速させたいとき、クライアントに動くものを見せたいとき、個人で小さなツールを作りたいとき——様々な場面でデザイナーの仕事を底上げしてくれます。

まずは週末の自由研究感覚で、自分が「あったらいいな」と思うツールやサイトを1つ作ってみてください。1日あれば公開まで辿り着けます。

今回はFigmaMakeの紹介でしたが、もっと本格的にプロトタイピングするならClaudeを使うのもおすすめなので、また別の記事で紹介します！お楽しみに！