Figma MCPの書き込み機能（use_figma）を使うと、Claude CodeからFigmaの下書きに、ワイヤーフレームやバナーを直接組ませることができます。指示は「ドラフトでテストでワイヤーフレーム作ってみて」のような短い日本語で足り、Claudeがファイルの作成からレイヤーの配置、オートレイアウトの設定までを進めます。
Figma MCPは「Figmaのデザインを読み取ってコードにする」使い方が知られていますが、2026年10月時点では、反対にAIがFigmaのキャンバスへデザインを書き込む機能も公式に提供されています。実際にどこまで作れるのか、無料のStarterプランでも試せるのか、気になっている方も多いはずです。
この記事では、筆者がClaude CodeとFigma MCPをつないで、ブログ記事ページのワイヤーフレーム（PC・スマホ）とバナー3サイズを作らせた手順を、実際の指示文と完成画像つきで紹介します。消費した呼び出し回数と、公式ドキュメントに書かれている制約もあわせて整理しました。Figmaのデザインをコードにする方向の使い方はFigmaとClaude Codeを連携する方法で解説しています。記載の内容は2026年10月11日時点の情報です。
Figma MCPの「書き込み」でできること
Figma MCPの書き込みとは、AIがFigmaのファイルを新しく作り、フレームやテキスト、図形をキャンバスに配置する使い方です。デザインを読み取ってコードにする使い方とは、データの流れる向きが逆になります。
| 比べる点 | 読み取り（デザイン→コード） | 書き込み（AI→Figma） |
|---|---|---|
| 主なツール | get_design_context／get_screenshot | use_figma／create_new_file |
| 入力 | Figmaのフレームのリンク | 日本語の指示 |
| 出力 | React＋Tailwindなどのコード | Figma上のフレーム・レイヤー |
| 向いている作業 | デザインカンプの実装 | ワイヤーフレーム・バナーのたたき台作り |
| 使えるサーバー | リモート・デスクトップの両方 | リモートサーバーのみ |
Figma公式ドキュメント（Write to canvas）によると、use_figmaは「Plugin APIを通じて、Figmaファイルの中でJavaScriptを実行する」ことでキャンバスに書き込みます。Figmaのプラグインと同じ仕組みでレイヤーを作るため、できあがるのは画像ではなく、あとから人が編集できるFigmaのネイティブなフレームです。
書き込み用のツールはリモートサーバー専用です。Code to canvasのページには、use_figmaとgenerate_figma_designは「どちらもリモートMCPサーバーだけが提供し、デスクトップサーバーは提供しない」と書かれています。
今回の環境と準備
今回は、無料のStarterプランとViewシートのアカウントで、Figmaの下書きに書き込みました。使った環境は次のとおりです。
| 項目 | 内容 |
|---|---|
| AIツール | Claude Code（Figmaプラグインを導入済み） |
| 接続先 | Figmaのリモートサーバー（https://mcp.figma.com/mcp） |
| Figmaのプラン | Starter（無料） |
| シート | View |
| 書き込み先 | 自分の下書き（Drafts） |
Figma公式のリモートサーバーのインストール手順では、Claude Codeへの導入方法として、MCPの設定とスキルがまとめて入るFigmaプラグインを推奨しています。
claude plugin install figma@claude-plugins-official導入後に初めてFigmaのツールを使うと、Claude Codeが認証用のURLを表示します。ブラウザでそのURLを開き、Figmaにログインしているアカウントを確かめてから「Allow」を押すと接続が完了します。筆者の環境では、Claudeが接続後に「whoami」ツールを実行し、メールアドレス・プラン・シートの種類を表示してくれたので、意図したアカウントでつながったことをその場で確認できました。
手動で追加するコマンドや、認証がうまくいかないときの対処はFigmaとClaude Codeを連携する方法にまとめています。
手順1：下書きに新しいファイルを作る
最初の指示は「ドラフトでテストでワイヤーフレーム作ってみて」の一文だけでした。Claudeはcreate_new_fileツールで「テスト_ワイヤーフレーム」という名前のデザインファイルを下書きに作りました。
Figmaのヘルプセンター（Starter plan overview）によると、Starterプランでも下書きのファイルは数の制限なく作れます。一方、チームのプロジェクト（フォルダ）に置けるデザインファイルは3つまでなので、試すときは下書きを使うのが手軽です。
シートの条件も確認しておきましょう。Figmaのヘルプセンター（Figma MCP server FAQs）には、use_figmaの書き込み機能について「下書き以外のFigmaファイルに書き込むにはFullシートが必要」とあります。筆者がViewシートで書き込めたのは、書き込み先が下書きだったためです。下書き以外の既存ファイルを編集する場合は、Fullシートに加えて、そのファイルの編集権限も必要です。
手順2：ワイヤーフレームを作らせる（PC・スマホ）
PC版は1回の呼び出しで1ページ分が組み上がった
最初の指示ではページの種類を指定しなかったため、Claudeは作業中のプロジェクト（このブログのWordPressテーマ）から、ブログ記事ページのワイヤーフレームを作ると判断しました。use_figmaを1回呼び出しただけで、幅1440pxのPC版が1ページ分そろいました。
- ヘッダー：ロゴとナビゲーション
- 記事の頭：パンくずリスト、カテゴリのラベル、タイトル、公開日、アイキャッチの枠
- 本文：冒頭の直接回答、目次、見出しと本文の行、画像・コードの枠、ツールへのボタン
- サイドバー：広告枠（300×250）、人気記事（月間・週間・日のタブ）
- フッター：コピーライトとリンク
配色はグレーだけで、文字は16px以上、日本語はNoto Sans JPで組まれていました。どのブロックもオートレイアウトで作られているため、Figma上で要素を足したり消したりしても、ほかの要素が自動で詰まり、レイアウトが崩れません。
スマホ版は「横に並べて」の一言で追加
続けて「スマホ版も横に並べて」と指示すると、Claudeは既存のPC版の位置と幅を読み取り、その右側に幅390pxのスマホ版を追加しました。各フレームの上には「PC（1440）」「SP（390）」のラベルも付けています。
| 要素 | PC版 | スマホ版 |
|---|---|---|
| ナビゲーション | 横並びのリンク | ハンバーガーメニュー |
| タイトル | 40px・1行 | 26px・3行に折り返し |
| サイドバー | 本文の右に固定 | 本文とボタンの下へ移動 |
| 広告枠 | サイドバーの先頭 | 本文の流れの中に配置 |
| フッター | 横並び・左寄せ | 縦積み・中央寄せ |
PC版からスマホ版への置き換えは、どれも筆者が指示したものではありません。サイドバーを本文の下へ回す、ナビゲーションをハンバーガーメニューにまとめるといった定番の判断を、Claudeが自分で行っていました。
手順3：バナーを3サイズ作らせる
次の指示は「figmaでワイヤースマホの右に作ってみて」で、バナーを作るよう頼んだものです。サイズや文言は指定しませんでしたが、Claudeは用途の多い3サイズを選び、スマホ版の右側に並べました。
| サイズ | 想定した用途 | 構成 |
|---|---|---|
| 1200×630 | OGP・SNSのシェア画像 | サイト名、見出し2行、サブコピー、ボタン |
| 728×90 | 横長の広告枠 | 左にサイト名と1行コピー、右にボタン |
| 300×250 | 四角い広告枠 | サイト名、見出し3行、ボタン |
配色はダークネイビーのグラデーションを背景にし、アクセントは黄色1色に絞って、ボタンにだけ使っています。見出しは字間を少し詰め、文字はすべて16px以上です。コピーはClaudeが仮で入れたものなので、実際に使うときは差し替えが必要です。
バナーもオートレイアウトで組まれているため、文言を差し替えても配置は崩れません。仕上げの段階では、バナーデザインの構図パターンを基準に、視線の流れやボタンの位置を人の目で確かめると完成度が上がります。
Claudeが裏で実行していたこと
use_figmaの正体は、Figma Plugin APIのJavaScriptです。Claudeは指示を受けるたびにスクリプトを書き、それをFigmaのファイルの中で実行していました。ワイヤーフレームの作成では、次のような処理が中心でした。なお、このコードはuse_figmaの中で実際に動いたもので、createAutoLayoutのようにuse_figma向けに用意された書き方を含みます。通常のFigmaプラグインにそのまま貼ると動かない場合があります。
// 日本語フォントを読み込んでから文字を書く
const font = { family: "Noto Sans JP", style: "Regular" };
await figma.loadFontAsync(font);
// オートレイアウトの枠を作り、子要素を縦に積む
const hero = figma.createAutoLayout("VERTICAL", {
name: "Hero",
itemSpacing: 16,
paddingLeft: 80,
paddingRight: 80,
});
const title = figma.createText();
title.fontName = font;
title.characters = "記事タイトルが入ります";
title.fontSize = 40;
hero.appendChild(title);このやり取りで分かった要点は次の3つです。
- フォントは先に読み込む：Plugin APIでは、文字を書く前にフォントを読み込む必要があります。Claudeは最初にNoto Sans JPを読み込み、使えなかった場合はInterに切り替える処理まで入れていました
- オートレイアウトを基本にする：座標を直接指定するのではなく、縦横の並びと余白で配置するため、あとから人が直しやすい構造になります
- 確認用のスクリーンショットも同じ呼び出しで撮れる：スクリプトの最後でフレームのスクリーンショットを返すため、Claudeは組み上げた直後に見た目を確かめ、文字の切れや重なりがないかを点検していました
AIに作らせるUIの品質を上げたい場合は、配色や書体のルールを先にまとめておく方法もあります。考え方はDESIGN.mdとはで紹介しています。
今回使った呼び出し回数
今回の作業で、Figma MCPのツールは合計6回呼び出しました。そのうち、公式に回数制限の対象外と書かれているツールが2回です。
| ツール | 回数 | 用途 | 回数制限 |
|---|---|---|---|
| whoami | 1回 | アカウント・プランの確認 | 対象外と明記 |
| create_new_file | 1回 | 下書きにファイルを作成 | 対象外と明記 |
| use_figma | 3回 | PC版・スマホ版・バナーの作成 | 公式に記載なし |
| get_screenshot | 1回 | 記事に載せる画像の書き出し | 対象（読み取り系） |
Figma公式ドキュメント（Rate limits & access）によると、Starterプランと、有料プランのViewシート・Collabシートでは、MCPのツール呼び出しは月20回までです。制限の対象は「Figmaからデータを読み取るツール」で、create_new_file・add_code_connect_map・whoamiなど、一部のツールは対象外とされています。
ただし、use_figmaは対象外のツールとして名前が挙がっていません。そのため、筆者の今回の作業は、多く見積もっても月20回のうち4回の消費と考えています。プラン別の詳しい上限は、FigmaとClaude Codeを連携する方法の表にまとめています。
回数を節約するには、一度に頼む範囲を広くするのが効果的です。今回は「ヘッダーから下まで1ページ分」をまとめて1回で組ませたため、PC版のワイヤーフレームは1回の呼び出しで済みました。
やってみて分かった制約と注意点
書き込み機能はベータ版で、use_figmaだけでは画像を入れられないなどの制約があります。2026年10月時点の公式ドキュメントに書かれている制約は次のとおりです。
| 制約 | 内容 | 出典 |
|---|---|---|
| 画像 | use_figmaは画像に未対応（画像はupload_assetsで追加する） | Write to canvas／Tools and prompts |
| フォント | Figmaアカウントにアップロード済みのフォントは使える。パソコンにだけ入っているフォントは使えない | MCP server FAQs |
| 1回の出力 | レスポンスは1回あたり20KBまで | Write to canvas |
| 編集できるファイル | 下書き以外はFullシートと編集権限が必要 | MCP server FAQs |
| 料金 | ベータ期間中は無料。将来は従量課金になる予定 | MCP server FAQs |
料金については、Figmaのヘルプセンター（Figma MCP server FAQs）に「いずれは従量制の有料機能になるが、ベータ期間中は無料で利用できる」と書かれています。金額や開始時期はまだ発表されていません。
実際に作業してみて気づいた点もあります。
- use_figmaだけでは写真を入れられない：今回のバナーも文字とグラデーションだけで構成しました。Figma MCPには画像をファイルに追加するupload_assetsというツールもありますが、筆者はStarterプランでは試していません
- ページの種類は指定したほうがよい：今回は作業中のプロジェクトからブログ記事ページだと推測してくれましたが、LPや料金ページを作りたいなら最初に伝える必要があります
- コピーは仮の文言として扱う：見出しやボタンの文言はClaudeが仮で入れたものなので、公開する前に必ず人が書き直します
写真や商品画像を入れたバナーを作りたい場合は、画像生成AIで素材ごと作る方法もあります。DomoAIで商品バナーを作り、日本語の文字や価格表記がどこまで崩れずに出るかを検証した結果はAI画像で商品バナーは作れるかで紹介しています。
写真の合成や細かい仕上げが必要なバナーは、Photoshopを操作させる方法が向いています。手順はClaudeでPhotoshopを操作する2つの方法で紹介しています。
作ったワイヤーフレームを次にどう使うか
AIが組んだワイヤーフレームは「たたき台」として使い、構成を詰めてから本番のデザインやコードに進むのが効率的です。次の3つの使い方があります。
- 定番の構成と見比べる：ファーストビュー、料金表、FAQなどの定番パーツと並べ、足りないセクションがないかを確かめる
- AIへの指示を具体的にする：使いたいパーツの組み合わせを決めてからClaude Codeに渡すと、1回の呼び出しで狙いどおりの構成に近づく
- コードに起こす：Figma MCPの読み取り機能で、組み上がったフレームをHTMLやReactのコードにする
定番パーツの一覧は、当サイトの「ワイヤーフレーム パターン集」で確認できます。ヘッダーやファーストビュー、料金表など64種のパーツから選んで1ページ分を組み、AI用のプロンプトとして書き出せるので、そのままClaude Codeへの指示に使えます。ツールの詳しい使い方はワイヤーフレームのテンプレート集で解説しています。
よくある質問
Q. Figma MCPでデザインを作らせるのに有料プランは必要ですか？
書き込み先が自分の下書きなら、無料のStarterプランでも試せます。Figmaのヘルプセンター（Figma MCP server FAQs）には、Fullシートが必要なのは下書き以外のファイルに書き込む場合だと書かれており、筆者もStarterプランのViewシートで下書きに書き込めました。ただし、ツールの呼び出しは月20回までです。
Q. use_figmaは回数制限に数えられますか？
2026年10月時点の公式ドキュメントには、はっきりとは書かれていません。回数制限の対象はFigmaからデータを読み取るツールで、create_new_file・whoamiなど一部のツールは対象外と明記されていますが、use_figmaは対象外のツールとして名前が挙がっていません。
Q. 写真入りのバナーも作れますか？
use_figmaだけでは作れません。Figma公式のWrite to canvasのページに、use_figmaは画像アセットに未対応と書かれています。一方、Figma MCPには画像をファイルに追加するupload_assetsというツールがあり、PNG・JPG・GIF・WebPを1点10MBまで入れられると公式に書かれています（筆者はStarterプランでは試していません）。
Q. 日本語のフォントは使えますか？
Figmaで標準的に使えるNoto Sans JPは、今回の作業で問題なく使えました。Figmaのヘルプセンターによると、自分のFigmaアカウントにアップロード済みのフォントは使え、パソコンにインストールしただけでアップロードしていないフォントは使えません。
Q. チームの既存ファイルに書き込めますか？
書き込めますが、Fullシートとそのファイルの編集権限が必要です。Viewシートなど、ほかのシートで書き込めるのは自分の下書きにあるファイルだけです。
Q. 作ったワイヤーフレームはそのままコードにできますか？
できます。Figma MCPの読み取り機能（get_design_context）にフレームのリンクを渡すと、ReactとTailwind CSSなどのコードを生成できます。手順はFigmaとClaude Codeの連携記事で解説しています。
まとめ
Figma MCPの書き込み機能を使えば、Claude Codeに短い日本語で頼むだけで、Figmaの下書きにワイヤーフレームやバナーのたたき台を作らせることができます。今回の作業で分かったことを整理します。
- use_figmaはPlugin APIのJavaScriptを実行し、編集できるFigmaのフレームを作る
- 下書きならStarterプランのViewシートでも書き込める（下書き以外はFullシートが必要）
- 1ページ分のワイヤーフレームが1回の呼び出しで組み上がり、スマホ版やバナーも追加の一言で並べられる
- Starterプランの呼び出しは月20回まで。まとめて頼むと回数を節約できる
- use_figmaは画像に未対応で、フォントはFigmaアカウントにアップロード済みのものに限られる。コピーは仮の文言として人が書き直す
関連記事
- FigmaとClaude Codeを連携する方法｜Dev Mode MCPでデザインをコード化するワークフロー
- Claude CodeのMCP連携ガイド一覧｜Figma・WordPress・Chrome DevTools・Notion
- ワイヤーフレームのテンプレート集｜LPの定番構成を組む無料ツール
- ClaudeでPhotoshopを操作する2つの方法｜公式コネクタとExtendScript
- DESIGN.mdとは｜AIが作るUIを「それっぽい」で終わらせない設計ファイル
- AI画像で商品バナーは作れるか｜DomoAIで日本語と価格表記を検証
- バナーデザインの構図パターン｜三分割・対角線・日の丸で視線を操る基礎