Amazon10/19まで!プライム感謝祭開催中!セール会場へ

Figma Makeの使い方|画面の作成・修正・公開まで

Figma Makeの使い方(Figmaメソッドのロゴと記事タイトル)

Figma Makeは、AIとの会話で、動くプロトタイプやWebアプリを作るFigmaの機能です。

ファイルブラウザーの下書きで[Make]をクリックし、作りたいものをチャットで伝えると、コードが作られて、その場で動くプレビューが表示されます。

修正は会話を続けるか、[ポイントして編集]で画面の一部を選んで直し、仕上がったら[公開]でWebに公開できます。

この記事は、Figma Makeを初めて使う方や、使う前にプランとクレジットの条件を確かめたい方に向けたものです。

内容は、2026年10月15日にFigmaの公式ヘルプセンター(Figma Learn)で確認したものです。

実際のアカウントでの操作や、クレジットの消費量の測定はしていません。

目次

使えるプランとシート

Figmaの公式ヘルプでは、Figma Makeは有料プランのフルシートで使え、ほかのシートやプランでも試すことができると説明されています(Figma Learn:機能的なプロトタイプまたはWebアプリを作成して編集する)。

Figma Makeを使うとAIクレジットを消費し、毎月使えるクレジットの量はプランとシートで決まっています(Figma Learn:AIクレジットの仕組み)。

シートスタータープランプロフェッショナルプランビジネスプランエンタープライズプラン
フルシート5003,0003,5004,250
Dev、コラボ、閲覧シート500500500500
1か月に使えるAIクレジット(Figma公式ヘルプより、2026年10月15日確認)

公式ヘルプでは、スタータープランと閲覧シートには、1日あたり150クレジットの上限もあると説明されています。

クレジットは毎月リセットされ、翌月に繰り越すことはできません。

足りない場合は、管理者がサブスクリプションか従量課金で追加のクレジットを購入できます。

作る手順

  1. ファイルブラウザーで下書き(ドラフト)を開き、右上の[Make]をクリックする
  2. AIチャットに、作りたいものを書く
  3. 必要なら、Figmaのデザインを添付したり、デザインライブラリのスタイルを取り込んだりする(ライブラリは有料プランのみ)
  4. [送信]をクリックする
  5. 生成が終わったら、変更の概要と、動くプレビューを確かめる

公式ヘルプでは、仕上がりの複雑さによって、生成に数分かかることがあると説明されています。

伝え方のコツ

公式ヘルプでは、求める結果を具体的に書くと、AIが推測で余計な機能を足すことが減ると説明されています。

伝え方例
避けたい伝え方ノートを取れるアプリを作って
よい伝え方ファイルに名前を付けられる、文字を書いて編集できる、太字や斜体を付けられる、リンクを貼れる、Markdownで保存できるノートアプリを作って
プロンプトの例(Figma公式ヘルプの例をもとに要約)

最初は大まかに作り、会話を重ねながら細かい機能を足していくほうが、うまくいきやすいとも説明されています。

デザインを添付するときは、オートレイアウトを使ったデザインにし、1度に添付するのは1〜2画面に絞ると、再現しやすくなります。

秘密の情報は入力しない

公式ヘルプでは、APIキー、メールアドレスや住所、個人のデータ、ID番号などをチャットに入力しないよう注意しています。

APIを使うアプリが必要な場合は、キーを貼り付ける入力欄を作ってほしいと伝え、データを扱う場合はバックエンドを追加します。

直す方法

方法使う場面
会話を続ける機能を足したい、動きを変えたい
ポイントして編集特定のボタンや文字の色・大きさ・余白を直したい
バージョン履歴前の状態に戻したい
Figma Makeでの直し方

[ポイントして編集]は、プロンプトの入力欄の下にあり、プレビューで直したい要素をクリックして、色や余白、文字のスタイルなどを変えられます。

公式ヘルプでは、Figma Makeではカスタムフォントは使えず、文字はオープンソースのGoogleフォントから選ぶと説明されています。

会話の各段階で保存されたバージョンは、[このバージョンを復元]で戻せ、復元してもその後のバージョンは消えません。

公開する

公式ヘルプでは、次の手順で公開すると説明されています(Figma Learn:Publish, update, or unpublish a Figma Make file)。

  1. 公開したいFigma Makeのファイルを開く
  2. 右上の[公開]をクリックする
  3. 公開の画面でタイトルを決める
  4. [公開]をクリックする

公開すると、「三つの英単語.figma.site」のような、自動で作られたURLでWebに公開されます。

公開した後に直した内容は、もう一度公開の画面を開いて更新するまで、公開中のページには反映されません。

独自ドメインも設定でき、使えるドメインの数はプランで決まっていて、Figma Sitesと合わせた数が上限になります。

独自ドメインの考え方は、Figma Sitesの公開方法も参考になります。

公開する前に確かめること

  • 載せている文章や画像を使う権利があるか
  • Figma Makeが入れた画像は、Unsplashの画像で、Unsplashの規約に従う必要がある
  • 利用者から情報を集める場合、その扱いに責任を持てるか
  • 公開してよい内容か(公開するとWebで誰でも見られる)

公式ヘルプでは、Figma Makeで使われる画像はUnsplashのものであり、使う場合は自分の用途に合うかを確かめる責任があると説明されています。

公開をやめるときは、右上の[Make settings]から[Unpublish]を選びます(英語版のヘルプの表記)。

クレジットの使いすぎを防ぐ

公式ヘルプでは、Figma Makeのようなエージェント型の機能は、使うモデル、頼む内容の複雑さ、添付やチャット履歴などの量によって、消費するクレジットが変わると説明されています。

2026年2月時点の既定のモデルでの目安として、フォントの変更で約30クレジット以上、ゼロからアプリを作ると約100クレジット以上と紹介されています。

  • 1回のプロンプトで頼むことを絞る
  • 添付するデザインを、必要な画面だけにする
  • 色や余白の小さな修正は[ポイントして編集]で行う
  • 使ったクレジットは、プロンプトの下のAIクレジットのアイコンにカーソルを合わせて確かめる
  • 残りのクレジットは、ファイルのメインメニューの[AIバランス]で確かめる

公式ヘルプでは、エラーの自動修正や修正の依頼はクレジットを追加で使わないと説明されています。

一方で、問題を直すために新しいプロンプトを送ると、クレジットを使います。

サービス

Service

デザイン制作に関心がありましたら、ぜひ詳細をご覧ください。

次に学ぶ・作業環境を選ぶ

学習を続けたい方や、作業環境を整えたい方は、目的に合うガイドをご覧ください。

Figmaのおすすめ書籍

Figma用PCの選び方

周辺機器の優先度

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次