この記事では、Figmaの生成AIツール「Figma Make」の機能や使い方について、基礎から応用まで体系的に解説します。プロンプトによるデザイン生成だけでなく、コードの書き出しや外部ツールとの連携など、実務で役立つ活用法を網羅しました。
これからFigma Makeを使い始める方や、デザイン業務の効率化を目指す方の参考になれば幸いです！

Figma Makeとは

Figma Makeは、デザインツールのFigmaが提供する生成AIツールの一つです。最大の特徴は、自然言語による指示（プロンプト）を入力するだけで、UIデザインやインタラクティブなプロトタイプ、さらには実際に動作するフロントエンドのコードを自動生成できる点にあります。
デザイナーが静的なデザインを作り、エンジニアがそれをコードに書き起こすという、一連の手間が削減され、アイデアを瞬時に「動く形」で確認・検証できるようになります。

公式サイト
あなたのアイデアをFigma Makeで実現しましょう

Figma Makeの主な特徴

  • AIチャット形式：会話を通じてAIに要望や修正指示を伝え、デザインの生成や調整を行います。
  • コードベースの生成：生成されるものは単なる画像ではなく、コード（Reactなど）に基づく動的なUIです。
  •  デザインとコードの統合：プレビュー画面で動作を確認しながら、タブを切り替えて生成されたコードを直接確認・編集することも可能です
  • インプットの柔軟性：テキストプロンプトだけでなく、既存のFigmaデザイン、コンポーネント、または画像ファイルをAIへのインプットとして利用できます。

Figma Makeでできることを解説！

Figma Makeの詳細な機能を、基礎編と応用編に分けて解説します！

【基礎編】

〜デザイン作成の3つの方法〜

Figma Makeの最大の特徴は、プロンプトや対話を通じて、ゼロからのデザイン生成とそのブラッシュアップができる点にあります。

1. プロンプトで作成する
まずは、自然言語で「何を作りたいか」をプロンプトとして入力します。
下記のような情報を具体的に指定することがポイントです。

  • 必要な画面一覧：例）ホーム画面、XXの検索画面
  • デザインテイストやコンセプト：モダン、洗練された、ミニマル
  • スタイル：色、フォント、形など
  • ターゲットやペルソナ：年代、性別、リテラシー、活用シーン、悩みやペインポイントなど、画像を制作イメージとして添付することもできます。

2. 特定の要素をピンポイントで修正する
プロンプト入力欄の左側にある矢印ボタン（要素指定ボタン）を使うと、画面全体ではなく、特定のパーツだけを指定して修正指示が出せます。

使い方は、矢印ボタンをクリックしてから、修正したいボタンやテキストを選択し、プロンプトを入力するだけです。「もっと角を丸くして」「ボタンを中央に配置して」といった指示を出すことで、手作業なしで簡単に微調整が可能です。
手作業で修正する手間が省けるだけでなく、「ここだけ変えたかったのに、他の場所までAIに書き換えられてしまった」という事故を防げるのが大きなメリットです。

3. コードから修正
Figma Makeでは、見た目（プレビュー）だけでなく、実際のコードを見ながら修正を加えることができます。

プレビュータブ横の「コード」タブに切り替えると、現在生成されているデザインのソースコードが表示されます。
ここからコードの修正が可能です。
見た目のニュアンスだけでなく、「このクラス名を変えて」「Reactの構造を整理して」といった、より論理的で正確な修正指示が可能になります。

〜レスポンシブも簡単に確認できる〜

マルチデバイス対応の確認もそのままできます。Figma Makeなら、わざわざ別フレームを作る必要はありません。

  • ワンクリックで切り替え
    プレビュー画面の左上の「モバイルプレビュー」ボタンをクリックするだけで、PC、モバイル、タブレットの表示を切り替えることができます。
    数値を指定して任意の幅でレイアウトが崩れないかチェックすることも可能です。
  • カスタムサイズ対応
    自由なサイズに引き伸ばして画面挙動を確認できるため、意図しないレイアウト崩れもその場で発見できます。

〜既存のFigmaデザインとの往復も！「AI × 人力」のハイブリッド制作が可能に〜

Figma Makeは、単体のツールとして完結するのではなく、デザインファイルとも自由に行き来できるのが強みです。

  • デザインファイルをFigma Makeへ

デザインファイルをコピーしてプロンプトへ直接ペーストできます。

  • Figma Makeからデザインファイルへ
    Figma Makeで生成されたデザインは、ワンクリックで自分の作業スペースに取り込めます。


生成画面の右上にある「デザインをコピー」ボタンを押すと、編集可能なレイヤーとしてクリップボードにコピーされます。Figmaファイル内にペーストすると、すぐに調整や実務利用ができます。
Figma Makeとデザインファイルとの柔軟な行き来ができるため、下記のようなハイブリッド制作スタイルもできます。

  • AIに土台を作らせてから手動で修正や調整を行う。
  • 自分が作ったデザインをFigma Makeに読み込ませてプロトタイプを制作する。
  • デザインファイルを読み込ませてバリエーション案を出してもらう。

〜コードのダウンロード〜

作成したプロトタイプは、デザインデータとしてだけではなく、実装可能なソースコードとして手元にダウンロードできます。

コード画面に切り替えると、右上に「コードをダウンロード」ボタンがあります。クリックすると、生成されたデザインのコード一式をダウンロードできます。
ReactコンポーネントやCSSファイルなどが含まれており、モックアップとしてだけでなく、エンジニアに実装のベースコードとしてそのまま渡すことができます。

〜ライブラリの活用〜

Figma Makeの真骨頂は、自社のデザインシステムやデザインルールをAIに学習させて使える点にあります。

プロンプト入力欄の左側にある「ライブラリ選択」をクリックするとライブラリを読み込ませることができます。

 

〜公開する〜

作成したFigma Makeファイルは、かんたんに公開・共有することができます。Figma Makeで公開することで、Figma Sitesと連携されWeb上に公開することができます。
公開後、更新（段階的な変更）、削除（公開を取り消す）、URL（ドメイン）を変更することもできます。
また、パスワードを設定することもできるため、一部の外部への共有や検証などにも利用することができます。

公開

公開したいFigma Makeファイルを開き、右上の「公開」をクリックするとモーダルが開きます。モダール内の「公開」ボタンをクリックすると公開されます。

更新

公開後、公開と同じ手順で「更新」ボタンをクリックすることで公開されているアプリを更新することができます。

非公開

公開後、右上の歯車アイコン内の「一般」を選択するとMakeの設定画面が表示されます。

「公開を取り消す」ボタンをクリックすると確認ダイアログが表示され、公開しているアプリを削除（非公開）することができます。

パスワードの設定

右上の歯車アイコン内の「一般」を選択するとMakeの設定画面が表示されます。

「アプリへのアクセス」内の「パスワードを要求する」をONにすると、パスワード設定欄が表示されます。
任意のパスワードを設定して保存することで、公開されたアプリへアクセスした際にパスワードを要求することができます。

ドメインの変更

右上の歯車アイコン内の「ドメイン」を選択するとMakeの設定画面が表示されます。

「基本ドメイン」は、Figma Makeがランダムに生成したURLを変更することができます。
公開しているURLを変更する場合は、非公開にする必要があります。

〜画面ごとのURL指定〜

設定からは画面ごとのURLの指定はできません。
画面ごとのURLを指定したい場合は、ルーティングの設定が必要なため、最初のプロンプトで指示することをオススメします！
「画面ごとにリンクを変えて」
などとプロンプトで指定することで、React Routerを使ってルーティングを自動で設定してくれます！

〜Github 連携（pushのみ）〜

Figma MakeではGitHubを接続し、変更時にコードを自動でリポジトリへプッシュできます。新規リポジトリ作成後、バックアップや変更管理、外部ツールでの開発継続が可能です。

【応用編】

〜Supabaseを活用したバックエンド連携〜

歯車アイコンから、「Supabase」を選択し、新しいプロジェクトを作成することで、Supabaseとの連携を開始することができます。

Supabase側の操作も、Figma Makeのプロンプトベースで簡単に行うことができることが、大きな利点です。もちろん、Supabaseの管理ページからTableを作成したり、データを調整することも可能です。

実際に、Figma Makeで作成した２つのチャット画面を、supabaseを使用してリアルタイム連携したプロトタイプを作成することもできました！
詳細は、こちらの記事をご覧ください↓
AIで完結！？Figma Makeで作成した２つのチャット画面をリアルタイム連携！

〜モデル選択〜

2025年12月現在、Figma Makeでは、３つのモデルを選択できます。

デフォルトのモデルはSonnet 4.5になっています。

別記事では、Gemini 3 Pro とSonnetの比較記事も公開していますので、ぜひご覧ください！Gemini 3 Proは、通常よりも生成に時間がかかりますが、アニメーションが得意な印象がありました！
Figma MakeにGemini 3 Pro登場！さっそく使ってみた

〜connectors〜

Figma Makeを作成し始める時に、connectorを選択できます。
現在は、以下の6の外部ツールと連携が可能です。

  • Asana
  • Atlassian
  • GitHub
  • Linear
  • monday
  • Notion

例えば、Notionに接続した場合、Notionの製品要件ドキュメントをFigma Makeチャットにインポートし、プロトタイプ生成ソースとして活用できます。ドキュメントの内容に変更が生じた際も、コネクタを介して同期し直すだけで、プロトタイプへの迅速な反映が可能です。

〜ガイドラインの活用〜

デザインシステム・スタイルの指定、レイアウトと構造のルールなどを記載することで、AIがランダムなデザインを作るのを防ぎ、最初から組織のデザイン基準に近いものを出力させられます。

デフォルトで、「Guidelines.md」がファイル内に入っているため、そこに追記していくことで、ガイドラインを使用することができます。

〜デザインシステムの出力〜

Figma Makeで作成したプロトタイプのデザインシステムを、そのFigma Makeの中で出力することができます。

架空のコーポレートサイトを作成したFigma Makeで「デザインガイドラインを作成して」とプロンプトを投げると、以下のようなデザインガイドラインを出力しました。
指定していないブランドコンセプトを勝手に設定していたり、プロトタイプが実際にこのガイドラインに沿っているかどうかを確認する必要はありますが、ガイドライン作成の手間は省けそうです。

〜APIの接続〜

Figma Makeのコードにおいて、実在するAPIを呼び出す処理を追加すれば実際にそれを呼び出すことができます。
Figma Makeをこれまでのデザインツールと同じ感覚で使っていると、APIを呼び出せることは意外と盲点かもしれません。

〜デザインシステムパッケージの導入〜

ReactデザインシステムパッケージをFigma Makeにインポートして、ブランドに合ったアプリやプロトタイプを生成することができます。（記事公開時点では筆者のアカウントには展開されていませんでした。）

デザインシステムパッケージをFigma Makeに導入する

Figma Makeを使用するには

  • 2025年12月時点では、Figmaアカウントを作成すれば、無料でFigma Makeの利用が可能です。ただし、クレジットの制限があるため、数回のやり取りのみになります。
  • プロフェッショナル・ビジネス・エンタープライズのフルシートでは、現在無制限で使用可能です。しかし、2026年3月18日からFigma AIの機能全体に対してクレジット制限かかると発表されました。今後、継続的なサブスクリプションや従量課金で追加クレジットを購入できるようになるそうです。

Figma公式ページ
プランを選び、シートを選択してください
AIクレジットの仕組み

おわりに

本記事では、Figma Makeの使い方や機能を網羅的にご紹介しました！

AIによってデザインの進め方は大きく変わろうとしています。Figma Makeのような生成AIツールを使いこなすことは、これからのデザイン業務において重要なスキルになっていくのではないでしょうか。

本記事が、皆さんの制作プロセスをよりスムーズにするための一助となれば幸いです。
最後まで読んでいただき、ありがとうございました！