Figma Makeとは？使い方・料金と、作った試作を共有・持ち出すときの注意（Figma AI）

Figma Makeは、文章の指示やFigmaのデザインから、動く試作やWebアプリを作るFigmaのAI機能です。 使えるプランとAIクレジットは、調査時点の2026年10月の公式情報に基づき、最新条件は公式で確認します。 作った試作は共有・公開でき、コードも確認できますが、持ち出しと引き継ぎの範囲を先に確かめます。

Figma Makeとは

Figma Makeとは、文章や既存のデザインを基にコードを生成し、操作できる試作を作るAIツールです。

完成イメージに加え、ボタンを押したときの動作や画面の切り替えまで検討できます。会話を続けながら、生成した画面の見た目や動作を修正する仕組みです。

Figma AIは、Figmaの各製品に組み込まれたAI機能全体を指す名称です。Makeだけの別名ではなく、文章の調整や画像の生成・編集なども含みます。

Makeには独自の公開機能があり、公開のために必ずSitesへ移す必要はありません。Figma Makeの公式概要で、製品の位置づけを確認できます。

Figma Makeでできること

Figma Makeでは、画面の生成と修正に加え、データ保存やログインを含む試作も作れます。

用途欄は、公式機能を踏まえた活用例であり、完成を保証するものではありません。商品一覧やカートが表示されることだけで、販売業務全体の確認は済みません。決済、在庫、受注、配送との連携は、実際の運用条件に合わせて確認します。

CMSは、担当者が管理画面で文章や画像を更新するための仕組みです。MakeにはPayloadを使うバックエンドと、Supabaseを接続する選択肢があります。

Figma Makeの使い方の流れ

Figma Makeは、ファイルを作成し、指示やデザインを渡して、生成された画面を確認する順に進めます。

1. Figmaのファイルブラウザで「Drafts」を開き、「Make」からファイルを作成します。
2. チャットに、作りたいページの目的、掲載内容、必要な操作を入力します。
3. 既存デザインを使う場合は「Add context」から資料を添付します。
4. 指示を送信し、生成された画面を実際に操作して確認します。
5. チャットや画面上の編集機能で修正し、必要に応じて「Files」でコードを確認します。

指示は「法人の贈答担当者に商品を紹介し、相談ページへ案内する」といった要件に分けます。価格や納期は支給資料に限定し、不明な事実を補わないよう指定するのが実務上の提案です。

Figma Designやワイヤーフレームを取り込む

既存のFigma Designは、フレームやコンポーネントを添付して生成の参考にできます。ワイヤーフレームを渡す場合も、確定した構成と未確定の表現を指示で伝えます。

チャット本文にURLだけを貼る操作と、添付機能でデザインを渡す操作は異なります。 公式FAQでは、チャットにURLを貼るだけではデザイン内容を取得できないと説明しています。

有料プランでは、MakeのプレビューをデザインレイヤーとしてDesignにコピーできます。ただし、その時点の見た目を取り出す機能であり、操作や自動同期を引き継ぐものではありません。Design側で修正しても元のMakeへ自動反映されず、デザインシステムにも自動接続されません。

Figma Makeの料金とAIクレジット

Figma Makeの費用は、プランとシートの料金に加え、AIクレジットの消費量を分けて確認します。

プランはチームの契約区分で、シートは利用者ごとの製品利用範囲です。以下は、調査時点の2026年10月に確認した米ドル建ての公表額です。年払いの月額換算と月払いを区別し、最新は公式料金ページで確認してください。

Dev・Collab・Viewの付属枠は月間500で、Viewには日次150の上限もあります。利用できる機能はクレジット残量だけでなく、シートやファイルの編集権限にも左右されます。

生成回数とクレジット消費は同じではない

AIクレジットは、Make以外の対象AI機能でも使う共通の利用枠です。Makeでの消費量は、モデル、作業の複雑さ、添付資料、会話履歴などで変わります。

この例は2026年2月時点のデフォルトモデルによる参考値で、固定の消費量ではありません。実行前の正確な量は予測できず、完了後に確認するため、LPの制作本数には換算できません。

追加購入単価は管理画面で確認する案内のため、公開料金表だけで総額を決めないようにします。Professionalの追加サブスクリプションは月次契約です。Organization・Enterpriseは既存契約に合わせた年次契約で、減額・解約は年間更新前の30日間に制限されます。

2026年8月25日の改定では、同額で買える追加分がProfessionalで2倍になりました。Organization・Enterpriseは1.6倍ですが、シート付属量は変更されていません。

作った試作の公開と共有

作った試作は、画面だけを公開するか、AIとの会話を含む制作ファイルを共有するかで扱いが変わります。

StarterからWebへ公開するには、Communityにも公開する必要があります。 有料プランのFullではCommunityへ載せずに公開でき、Dev・Collab・Viewでは公開できません。

Makeファイルは「Publish」から公開し、専用のfigma.siteサブドメインが割り当てられます。公開後の修正は「Update」で反映し、タイトルや説明文、言語、検索への表示設定も確認します。

検索除外と閲覧制限の違い

検索除外は、検索エンジンに掲載しないよう指示するもので、アクセス制限にはなりません。URLを知る人の閲覧も制限したい場合は、公開範囲やパスワード設定を確認します。

公式FAQには公開後の閲覧を制限できない記述がある一方、公開手順には制限の説明があります。公式ページ間で説明が異なるため、実際の公開設定とプラン条件を確認して判断します。 パスワード保護は公開版の設定で、Figmaのヘッダーが付くプレビューは共有権限に従います。

独自ドメインの接続枠はSitesと共通ですが、公式ガイドには過去の無料条件が残っています。Professionalは10件、Organization・Enterpriseは無制限という記載にも、2025年以降の変更可能性が添えられています。2026年も同じ条件で無料と断定せず、契約時に現行の枠と追加料金を確認します。公式の公開手順も併せて確認してください。

コードの確認と持ち出し

Figma Makeのコードは確認・取得できますが、外部サービスのデータまで一括移行できるとは限りません。

2026年7月の新基盤は、対応するWebフレームワークを広げました。

ダウンロードは「Files」の「File actions」から「Download code」を選びます。データベース、アップロード画像、認証、独自ドメインも、移行対象として別々に整理します。

GitHub連携は方式を確かめる

GitHub連携には異なる方式があり、すべてを一方向送信や自動同期とは説明できません。

Makeと外部開発環境のどちらを更新の基準とするかを決め、修正を再送信で消さないようにします。

ProfessionalのGitHub接続先はひとつで、Organization・Enterpriseは複数接続に対応します。既存コードを読み込む方式では、GitHub権限がない人でもMakeの編集権限でソースを見られる場合があります。GitHub側の権限だけで判断せず、Makeファイルの共有先まで確認してください。既存コードを扱う公式手順で条件を確認できます。

Supabase連携とPayloadの持ち出し条件

Supabaseは、データ保存、認証、ファイル保管などを担う外部サービスです。接続は「Make settings」→「Integrations」→「Supabase」から行います。組織を認可して既存プロジェクトをつなぐか、新規作成時に保存地域やパスワードを指定します。

公式は、Makeが現在使う方式を、完全なSQLデータベースではなくキーバリューストアと説明しています。名前と値の組で保存するため、Supabaseの機能全体と生成内容を混同しません。

Supabaseのデータベースバックアップには、Storage APIで保存したファイル本体は含まれません。強い権限を持つsecretキーやservice_roleキーも、ブラウザーに配るコードやソース管理に入れません。

Payload利用時はFigmaがアプリとデータをホストし、現時点でGitHub連携とローカルコードベースは未対応です。

AIの学習とデータの扱い

AI学習への参加は管理者が設定でき、AI機能を使えるかどうかとは別に管理します。

Professionalは有料でも初期設定がオンなので、契約料金だけで学習利用を判断しないようにします。Starterでは「View settings」→「Settings」→「AI」→「Manage AI settings」を確認します。Professionalでは「Admin」→「Settings」→「AI」から確認し、下書きも所属チームの設定に従います。

AI規約第4条は、オフにした後の新しい内容と編集を学習に使わないと定めています。過去の学習を取り消す設定とは説明されていないため、機密情報を入れる前に確認します。

Figmaは、外部モデル提供者が顧客データを自社モデルの学習に使うことを許可しないと説明しています。一方、AI機能の提供に外部事業者を使い、一時保存される場合があるとも説明しています。学習をオフにしても外部処理がなくなるわけではなく、保存期間や保存地域を独自に決めつけません。公式のAI方針と社内の情報管理基準を照合します。

Figma Makeの商用利用と素材の権利

商用のページに使う場合も、生成物の正しさと画像・フォントなどの権利を利用者が確認します。

Figma AI規約の第2条は、Figmaとの関係では入力と出力の権利を顧客が保持すると定めています。一方、第5条では出力の正確性などを保証せず、用途への適合性や必要な許諾の確認を求めています。

利用規約第2.4条は認証情報の共有を禁止しています。また、Figmaが権利を主張しないことと、生成物に必ず著作権が発生することは別です。文化庁の整理でも創作的寄与などに基づく個別判断とされており、独占的な権利を当然の前提にはしません。

会社のサイトで使うか決めるときの見方

会社のサイトに採用するかは、試作の作りやすさに加え、更新・公開・引き継ぎまで確認して判断します。

当社のAIによるサイト制作との違い

当社の場合はFigma Makeを制作に使っておらず、Claude CodeやCodexにHTMLとCSSを書かせています。文章や部品のデータなどの生成元と公開用HTMLを分け、修正は生成元へ戻して組み立て直します。色・書体・動きの決まりを文書で渡し、版を保存して確認用ページと公開後の実物を確かめます。共通CSSの干渉やスマホ表示、フォームの不達も確認対象であり、Makeの採用時にも更新経路と確認担当を比較する観点になります。

公開前と制作会社への引き継ぎ手順

1. 試作を見た目の参考として渡すか、継続開発するコードとして渡すかを決めます。
2. 公開画面だけか、AIとの会話を含むMakeファイルも共有するかを決めます。
3. スマホ表示、リンク、フォームの送信・到着・完了表示を実際に確認します。
4. コード、実行手順、接続先、素材の条件、データの管理者を引き継ぎます。
5. 公開後の更新、バックアップ、障害対応、費用負担の担当を取り決めます。

古いMakeファイルは、2026年10月下旬から編集継続にアップグレードが必要になる案内もあります。公開済みファイルはアップグレード後に再公開が必要なので、渡す前に更新状態を確認します。公開後は実際のURLを開き、表示と動作を確かめます。

よくある質問（FAQ）

無料利用、日本語、デザインシステム、他ツールとの違いは、利用条件と制作の進め方を分けて確認します。

Figma Makeは無料で使える？

Starterで制限付きの試用ができ、月間500クレジットと日次150の上限があります。Web公開にはCommunity公開も必要なので、会話履歴を含む共有条件まで確認してください。

Figma Makeは日本語で指示できる？

公式はFigmaの日本語表示と公開言語のja指定を案内していますが、指示言語の保証とは別です。日本語プロンプトの正式対応と英語との品質差は、今回の公開情報では確認できません。実際の原稿で表記や改行を確かめて検討します。

Figma Makeでデザインシステムは使える？

Designへコピーしたレイヤーは、デザインシステムに自動では接続されません。使う場合は、コピーした後に部品やスタイルをつなぎ直す手間を見込みます。

Figma MakeとClaude Codeの違いは？

MakeはFigma内で試作の生成・確認・共有を進められ、Claude Codeはコードを作成・修正するコーディングエージェントです。選定時は、どこを更新の基準とし、誰が公開後のコードを管理するかで比べます。

Figma MakeとLovableやv0はどう比べる？

Lovableやv0と比べる際も、Figmaの既存デザインの活用、コード取得、公開条件を確認項目にします。名前や生成例だけで優劣を決めず、データの保存先と引き継ぎ方まで比較してください。