Figmaでデザインしながら、開発者を待ち続けた経験はありませんか。プロトタイプが静的すぎてチームを説得できなかった経験は。Figma Makeが7月24日、全有料プランに正式公開されました。 テキストのプロンプトだけで、ログイン・データベース・実際に動くアプリまで、Figmaの外に出ることなく作れます。
これは何のツール？
Figma Makeは、自然言語プロンプトでFigma内から直接動くアプリを生成するvibe codingツールです。 2025年5月のConfig 2025でベータ公開後、7月24日にProfessional・Organization・Enterpriseプラン全ユーザーに正式提供開始。開発者でなくても、コードを知らなくても使えます。
Bolt・Lovable・v0との決定的な違いがあります。他のツールはFigmaファイルを「参考資料」として扱いますが、Figma MakeはFigmaデザインライブラリ自体がソース・オブ・トゥルースです。 チームのカラーパレット、タイポグラフィ、コンポーネントスタイルが生成されたアプリにそのまま反映されます。
GA時点での2つの新機能：
- Figmaデザインライブラリのインポート
既存のFigmaデザインシステム（カラー、タイポグラフィ、スタイリング要素）をMakeファイルに直接読み込めます。チームのブランドガイドラインが自動適用されたアプリが生成されます。 - Supabaseバックエンド接続
プロンプトにデータ保存が必要と記述すると、AIが自動でSupabase接続を提案します。ワンクリックでプロダクションレベルのPostgres DB・メール/ソーシャルログイン・ファイルストレージが設定されます。
Figmaの社内チームの実事例も公開されました。リサーチャーのRie McGwierは数理モデルとUIを組み合わせた調査トラフィック計算ツールを作成。 PMのTara Nadellaはデザインシステムコンプライアンスチェッカーを試作し、仕様書作成前に前提を検証しました。 プロダクトデザイナーのKelly HuとGiorgio Cavigliaは、数日かかっていたグリッドレイアウトのプロトタイピングを1.5時間で完成させました。
Figma Makeが内部で生成するもの
React + Tailwindコードです。Supabase連携時はPostgres DB・メール/ソーシャル認証・ファイルストレージ・Edge Functions・ベクトル埋め込みまで自動設定されます。 エンジニアが受け取って拡張できる実際のコードベースです。
Bolt・Lovableとどう違うの？
vibe codingツールが溢れる市場で、Figma Makeのポジションは明確です。出発点が違います。
| Bolt / Lovable / v0 | Figma Make | |
|---|---|---|
| デザインソース | AIが新規生成（Figmaは参考のみ） | 既存Figmaライブラリがソース・オブ・トゥルース |
| 作業環境 | 別プラットフォームへの移動が必要 | Figma内で完結 |
| デザインシステム | 別途設定が必要 | チームライブラリを自動適用 |
| プロトタイプ共有 | デプロイURLが必要 | FigmaリンクでOK |
| チームコラボ | プラットフォーム固有の機能 | 既存のFigmaコラボをそのまま活用 |
シニアUXデザインリーダーのレビューにあった一文が核心をついています: "BoltやReplitはコードが製品です。Figma Makeはデザインが製品です。" デザインをハンドオフの起点としてではなく、製品そのものとして捉える視点が、他のツールと根本的に異なります。
実際の使用レビューでは共通した限界も指摘されています。
| 項目 | 現状 |
|---|---|
| コード構造 | 単一ファイル — 大規模プロダクションには限界 |
| GitHub連携 | 未対応（2025年時点） |
| Make→Figma Design逆変換 | 不可（一方向のみ） |
| Supabase適性 | シンプルなCRUDはOK、複雑なリレーショナルDBは限界あり |
| クレジット透明性 | 消費量の追跡が不明確というユーザー指摘 |
"デザインは損失の多いプロセスです。言葉というのは、滑りやすい生き物ですから。"
— Gui Seiz、Figma デザインディレクター
FigmaのデザインディレクターGui Seizは「これはマインドセットのシフトです。より面白いソリューションを見つけるために、リスクを取り、遊ぶことを促します」と語っています。 言葉だけでは誤解されるものを、動くプロトタイプで見せることで、意思決定が速まるわけです。
はじめ方：最小限のステップ
- Makeファイルを開く
Figmaで新しいファイルを作成し、ファイルタイプから「Make」を選択します。Professionalプラン以上であればすぐ使えます。Starterプランでも作成はできますが、共有・公開にはFull Seatが必要です。 - プロンプトで最初の画面を作る
欲しいアプリを説明します。「ユーザーが目標を入力するとAIが段階的なプランを提案するアプリ」のように具体的なほど良い結果が出ます。 参考画像を添付するとスタイルも反映してくれます。 - Figmaライブラリを接続する
サイドバーでDesign Librariesを開き、既存のチームライブラリをインポートします。以降に生成されるUIに、チームのカラー・タイポ・スタイルが自動適用されます。 - Supabase連携（任意）
データ保存が必要な機能をプロンプトに記述するとAIがSupabase接続を提案します。承認するとDB・認証・ストレージが自動設定されます。Supabaseアカウントは無料で作れます。 - 共有リンクでチームフィードバックを得る
Shareボタンでリンクを生成すると、チームメンバーやクライアントがインタラクティブなプロトタイプをすぐ体験できます。アカウント不要で閲覧可能です。
使い始める前に知っておくこと
Professionalプランの3,000クレジットで月50〜70プロンプトが目安です。複雑な機能を盛り込むほどクレジットの消費が速くなります。 最初はシンプルな機能から検証するのが得策です。Figmaファイルのレイヤー名が統一されており、auto-layoutが整理されているほど良い結果が出るというユーザーの声もあります。
もっと深く学びたい方へ
Figma Make 公式発表ブログ GA機能とプラン別クレジットポリシーの公式情報 figma.com
Supabase + Figma Make 連携公式ガイド Supabaseチームによる詳細な連携ガイド。Postgres DB・認証・ストレージの設定まで解説 supabase.com
Figma Make Review 2025: How AI + Design Is Redefining App Creation UXリーダーによるBolt・Replit比較と実務向け詳細レビュー medium.com
Build an App With Figma Make — Real Backend, Real AI Supabase連携で5時間でAI目標分解アプリを完成させたフルスタック事例 medium.com
피그마 AI 웹 제작 도구 '피그마 메이크' 정식 공개 韓国語のGA機能まとめと事例レビュー designcompass.org
