Figma MCPでサムネイルを作る方法｜Claude Code接続・編集可能なレイヤー・エラー対処

2026年10月31日

Figma MCPでは、デザインの読み取りに加え、対応するリモートサーバーからキャンバスへ書き込む機能が提供されている。サムネイル制作では、文字・背景・画像を別レイヤーに保ち、人が最後に文字詰めや余白を直せる形を目指すと実用的だ。

ただし「Figma MCPにつなげば誰でも無料で何でも編集できる」わけではない。利用クライアント、席、ファイルの編集権限、ベータ機能の条件を先に確認する。この記事ではClaude Codeからの公式接続と、サムネイルを3案作るための指示・検品方法を整理する。

接続前に確認する条件

項目	確認内容
サーバー	書き込みはリモートMCPを使用
接続先	https://mcp.figma.com/mcp
クライアント	Figma MCP Catalogに掲載された対応クライアント
編集権限	対象ファイルの編集権限が必要。Drafts外への書き込みはFull席が必要
課金	キャンバス書き込みはベータ中無料。AI画像生成などのクレジットは別

書き込み対象プランなどはWrite to canvas、席と呼び出し上限はRate limits & accessを確認する。古い「読み取り専用」という解説と、現在のリモート機能を混同しない。

Claude Codeから公式Figmaプラグインを接続する

編集してよいテスト用Figmaファイルを準備する。既存の本番デザインは複製して使う。
Claude Codeが起動できる状態で、公式プラグインをインストールする。組織で禁止されている場合は管理者へ確認する。
Claude Codeを再起動し、/pluginのInstalledからfigmaを開く。
表示されるブラウザで、利用アカウントとアクセス内容を確認して接続する。
Installedで接続状態を確認する。対象ファイルURLを渡し、まずページ名だけを取得させる。
書き込み機能が利用できることを確認してから、テスト用ページへ1案だけ作成する。

claude plugin install figma@claude-plugins-official

この方法にはMCP設定とFigmaのスキルが含まれる。手動でサーバーだけ追加した場合はスキルが別になる。根拠：公式リモート接続手順。

サムネイルの制作仕様を先に固定する

対象：自社動画「AI議事録を公開前に確認する方法」
キャンバス：1280×720pxの作業用フレーム
主文：AI議事録の落とし穴
補助文：公開前の3チェック
色：濃紺の背景、白文字、黄色のアクセント
素材：権利を確認した自社画像のみ
制約：文字は編集可能なテキストレイヤーにする
禁止：架空の数値・ロゴ・実績を追加しない
出力：同じページ内のA/B/Cフレーム。既存ページは変更しない

寸法はこの作例の制作指定であり、特定サービスの投稿要件を保証するものではない。納品先の仕様に合わせて変更する。レイアウト案を増やす前に、文言・素材・変えてよい範囲を決めることが重要だ。

段階別に使う6つの依頼文

1. 接続確認

Figma MCPでこのファイルのページ名と閲覧可能なフレーム名を確認する。編集はまだしない。URL：[対象ファイルURL]

2. 初稿

指定仕様で新しい作業用ページにA案を作る。背景、主文、補助文、画像を別レイヤーにし、レイヤー名を付ける。完成後は作成場所と変更内容を報告する。

3. 比較案

A案を残してB案を作る。文言、色、画像は固定し、主文と画像の左右配置だけを変える。比較したい変数を増やさない。

4. 縮小確認

A案とB案を縮小表示で比較するため、主文が読みにくくなる箇所を確認する。細い文字や背景との境界が弱い箇所を挙げ、修正案を示す。

5. 修正

B案の主文だけを2行に整える。画像と背景は変更しない。改行の前後で意味が分断されないようにする。変更前後の差を説明する。

6. 引き継ぎ

採用したフレームのURL、使用した文言、素材、残っている確認事項を一覧にする。公開や既存素材の削除は行わない。

完成したように見えても確認する5項目

観点	確認方法
編集可能性	文字が画像化されず、選択して修正できるか
文字と内容の一致	動画で説明していない効果を約束していないか
縮小時の読みやすさ	小さい表示でも主文と被写体を識別できるか
素材	指定外の人物・ロゴ・画像が追加されていないか
納品	採用案と比較案を区別し、書き出し対象を間違えないか

よくあるエラーと直し方

症状	確認すること
Reactコードだけ返る	デザインからコード化ではなく、Figmaの指定ページにフレームを作る依頼だと明示する
ファイルにアクセスできない	URL・接続アカウント・編集権限を確認する。whoamiで認証アカウントを確かめる
書き込みツールがない	デスクトップサーバーではなく、対応するリモート接続か確認する
生成でクレジットを要求される	MCPの利用条件と画像生成・MakeのAIクレジットを分けて確認する

FigmaとCanvaを使い分けるサムネイル制作

Figmaでレイヤーや部品の構造を整え、Canvaで承認済みテンプレートの展開を進める、という分担を設計できる。ただし、PNGを書き出して渡すだけで、Figmaの部品や変数がCanvaで同じ編集構造になるわけではない。

工程	成果物	確認
Figmaで基本構成	文字・写真・余白を分けた編集用ファイル	対象レイヤーが個別に編集できる
担当者が採用	採用版URLと仕様メモ	未採用案を混ぜない
Canvaで展開	承認済みテンプレートの複製	差し替え箇所と固定要素が一致
公開用書き出し	画像と原本URL	文字切れ・素材・サイズを確認

Prepare a handoff for the approved thumbnail: source URL, dimensions, exact title, fonts, colors, image rights, fixed elements, and editable fields. Explain which structure will not survive a flattened image export.

Figma公式のWrite to canvasは編集可能な内容を作る機能で、対応プラン・編集権限・リモートMCP接続が条件になる。Canva側の接続とテンプレート利用条件はCanva×Claudeの手順で別に確認する。2026年10月31日追記。この分担は独自設計で、両製品間の変換テストや制作速度の実測ではない。

よくある質問

Figma Makeと同じ？

Makeのアプリ制作と、MCPから既存ファイルを読む・編集することは別の用途だ。

デスクトップサーバーでも同じ機能？

リモート専用の機能がある。キャンバス書き込みの条件を確認する。

無料枠は無制限？

席・プランによる読み取り上限などがある。書き込みベータ無料とも別の条件だ。

画像は自動生成が必要？

必須ではない。自社の確認済み素材を指定すれば、素材選定を固定してレイアウトだけ比較できる。

AI案をそのまま公開してよい？

文字、素材、内容との一致を人が確認してから採用する。作成成功と公開判断は分ける。

小さく始めて運用に移す

今日：テスト用ファイルで読み取りだけ確認する。
今週：同じ文言と素材で2案作り、編集しやすさを比較する。
来月：採用した仕様を自社テンプレートにする。

LIFRELLへの相談

サムネイルや広告バナーの制作仕様、AIへの指示、公開前確認を一つの制作工程として設計する。

AI活用の業務設計をLIFRELLに相談する

公式資料と確認日

企画の参考：monograph「【続】僕達のAIの使い方、全部見せます。」。本記事の設定例・プロンプト・確認表はLIF Tech編集部が独自に構成した。出演者の実践結果を本記事の検証結果として扱っていない。

公式情報の確認日：2026年10月31日。実機での導入・生成・性能測定は本記事では未実施。手順は公式資料に基づき、作例は実施用の設計例として掲載している。画面、料金、利用条件は変更される場合がある。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！