Figma MCP: Write to Canvas を使用したAIエージェントによるFigmaデザインの操作

2026年4月4日(土)3時間前読了時間: 12分

本記事はFigmaのベータ版機能「Write to Canvas」について解説しています。仕様は予告なく変更される場合があるため、最新情報は公式ドキュメントを参照してください。

概要

Agentic Codingが一般化してきており、デザインを行わずにコードだけでUIを構築するワークフローも増えてきています。そうした中で、コードベースの変更をFigmaのデザインシステムや画面設計に反映させるために、AIエージェントがFigmaキャンバスに直接書き込む「Write to Canvas」機能がFigma MCPに追加されました。

The Figma canvas is now open to agents - Figma Blog

本記事では、Write to Canvasと同時に追加されたFigma Skillsの紹介に加え、Write to Canvasを使い始めるために必要な基本情報（利用要件・Figma Skills・使い方・データ仕様）をまとめます。なお、Figma MCPを操作するクライアントとしてVS Code（GitHub Copilot Agent）を使用することを前提としています。

Figma MCP Serverのセットアップや読み取り機能については以下の記事を参照してください。

追加されたツール一覧

今回のアップデートで追加されたツールは以下のとおりです。generate_figma_design はCode to Canvasとして2週間前に先行リリースされており、use_figma をはじめとする残りのツールが今回のアナウンスで追加されました。

use_figma: Write to Canvasの中核ツール。Plugin APIを通じてFigmaアプリ内でJavaScriptを実行し、ページ・フレーム・コンポーネント・変数・スタイルを作成・編集・削除・検査する
search_design_system: 接続済みデザインライブラリをテキストクエリで検索し、コンポーネント・変数・スタイルを取得する。use_figmaでキャンバスに配置する前の素材探しに使う
create_new_file: 認証ユーザーのドラフトに新しいFigma DesignファイルまたはFigJamファイルを作成する
generate_figma_design: Code to Canvas機能。ブラウザで動作中のライブUIをキャプチャしてFigmaデザインレイヤーとして取り込む（Remote Serverのみ・一部クライアントのみ対応）
get_code_connect_suggestions: FigmaコンポーネントとコードのCode Connectマッピング候補を自動検出・提案する（Figmaアプリ側から起動して使用）
send_code_connect_mappings: get_code_connect_suggestionsで提案されたマッピングを確定してCode Connectに適用する（Figmaアプリ側から起動して使用）

Figma Skills

Figma Skillsは、GitHub CopilotなどのAIエージェントがFigma MCPを適切に使えるよう補助するためのスキル（解説と手順書）です。AIエージェント自身はMCPツールの呼び出し方を学習していますが、use_figmaのような複雑な操作が必要なツールは正しい操作手順を理解させる必要があります。エージェント向けの内容になっていますが、人が読んでもどのような処理を行っているのかを理解するのに役立つので、一度読むことをおすすめします。

Skill一覧

公開されているFigma Skillsは以下の通りです。

figma-use: Write to Canvasの基盤Skill。use_figmaツールの呼び出し手順を定義しており、フレーム・コンポーネント・変数・オートレイアウトをキャンバスに正しく作成・更新するためにほぼ常に必要になる
figma-create-new-file: 新しいFigma DesignファイルまたはFigJamファイルをドラフトに作成するSkill
figma-implement-design: FigmaデザインをCode Connectで読み取り、プロジェクトのコードとして実装するSkill
figma-code-connect-components: コードベースのコンポーネントとFigmaコンポーネントをCode Connectで一括紐付けするSkill
figma-create-design-system-rules: コードベースを解析してデザインシステムのルールファイル（.github/instructions/配置）を生成し、Figmaとコードのコンポーネントの対応関係を定義するSkill

また、figma-useを活用した応用例として以下の2つのサンプルSkillも提供されています。

figma-generate-library: コードベースのコンポーネントを解析してFigmaデザインシステムライブラリを構築・更新するサンプルSkill。独自Skill作成の参考として活用できる
figma-generate-design: コードベースからFigmaの画面（ページ・スクリーン）を生成するサンプルSkill。独自Skill作成の参考として活用できる

これらのサンプルSkillはそのまま使用可能ですが、チーム固有のワークフローに合わせて独自のSkillを作成する際の参考としても活用できます。詳しくは下記ドキュメントを参照してください。

Write to Canvas とは

Write to Canvasは、AIエージェント（GitHub Copilot等）がFigmaキャンバスにネイティブコンテンツを直接生成・編集できるFigma MCPの機能です。Figma MCPのuse_figmaツールを通じて Plugin API を呼び出し、フレーム・コンポーネント・バリアント・変数・オートレイアウトといった本物のFigma構造を操作できます。実装コードに関わらず、エージェントがデザインを理解できる状態であれば、人が手動でFigmaを操作しなくてもデザインを作成・更新できるため、コードとデザインの二重管理の手間を省けます。

利用要件

Full seat・Figmaデスクトップアプリの起動・Remote MCP Server接続の3つがすべて揃っていないと動作しません。 ブラウザ版FigmaやLocal MCPサーバーでは書き込みは行えません。

シートタイプ: Full seatが必要。Dev seatは読み取り専用のためキャンバスへの書き込みは不可
ファイル権限: 書き込み先は編集権限を持つFigma Designファイル（FigJamファイルへの書き込みは不可）
接続方式: Remote MCP Server経由のみ対応。Local MCPサーバーでは読み取りのみ
Figmaアプリ: Figmaデスクトップアプリを起動して対象ファイルを開いておく必要がある。Plugin APIサンドボックスはデスクトップアプリ内で実行されるため、ブラウザ版Figmaでは動作しない
料金: ベータ期間中は無料。正式リリース後は従量課金制になる予定

対応クライアント

クライアント	設定方法
GitHub Copilot	`.vscode/mcp.json`でRemote Figma MCP Serverを追加して利用する
Copilot CLI	設定ファイルに手動でRemote MCP Serverを追加する
Cursor	FigmaプラグインからMCPを自動設定するか、手動でMCP設定を追加する
Claude Code	FigmaプラグインからMCPを自動設定するか、手動でMCP設定を追加する
Claude Desktop	設定ファイルに手動でRemote MCP Serverを追加する
Codex by OpenAI	Codexアプリ経由で設定するか、手動でMCP設定を追加する

現時点の制限事項

ベータ版のため、以下の制限がある点に注意してください。

1回の呼び出しあたりの出力レスポンスは20KB上限
画像/動画アセットの取り込みは未対応（画像を含むコンポーネントのインポートや、GIF作成も不可）
カスタムフォントは未対応
Code Connect完了前にコンポーネントを手動でパブリッシュする必要がある
ベータ品質のため、出力結果は手動での確認・修正が必要な場合がある

詳細はWrite to canvas — Limitationsを参照してください。

使い方

Remote Figma MCP Serverのセットアップを完了する。
Figmaで操作対象のDesignファイルを開き、ファイルURLまたは特定の選択範囲へのリンクをコピーする。
AIエージェントにプロンプトを送信する（Copilotの場合はAgentモードで送信）。

プロンプト例:

TEXT

src/components/Button.tsx を参照し、下記FigmaファイルにButtonコンポーネントを作成して。
作成する際にバリアント（size: sm/md/lg、variant: primary/secondary/outline）を揃えてコンポーネントセットにまとめるように。
https://www.figma.com/design/[ファイルキー]/...

TEXT

src/components/Badge.tsx を参照して、このFigmaファイルの「Components」ページに Badge コンポーネントセットを追加して。
variant（default/success/warning/error）のバリアントを揃えて:
https://www.figma.com/design/[ファイルキー]/...

Copilotはプロンプトに応じて必要なSkillを自動的に読み込み、use_figmaツールを呼び出す前に操作手順を把握します。キャンバスへの書き込みには常に figma-use Skillが呼び出されます。

use_figma 使用時の流れとデータ仕様

エージェントとFigma MCPサーバーがどんな流れで何をやり取りしているのかを整理します。

作業の流れ

use_figmaツールを呼び出す際、GitHub CopilotとFigma MCPサーバーの間でやり取りされるのはJSON-RPC 2.0を使用したメッセージです。簡単にシーケンスを表すと以下のようになります。

Sequence Diagram

Figmaのノードオブジェクト本体はネットワーク上を流れません。エージェントが送った指示はFigma MCP Serverが受け取り、code （スクリプト）はFigmaアプリ内のPlugin APIサンドボックスで実行され、returnした値のみが文字列としてエージェントに返ってきます。

リクエスト

codeフィールドに実行したいJavaScript文字列を渡します。codeの中では通常のFigmaプラグインと同じPlugin API（figmaグローバルオブジェクト）が使えます。figma.createFrame()・figma.createComponent()・figma.combineAsVariants()・figma.variablesなど、プラグイン開発で使うAPIがそのまま使用可能です。

JSON

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "use_figma",
    "arguments": {
      "fileKey": "xyWCPoSS2bTUV0W4nAaiTE",
      "description": "ページ一覧を取得する",
      "code": "const pages = figma.root.children.map(p => `${p.name} id=${p.id}`);\nreturn pages.join('\\n');"
    }
  }
}

スタイル・色の指定方法

code スクリプト内では、直接プロパティを設定するか、ローカルスタイル・変数IDを参照する方法が使えます。

JavaScript

// 直接指定
node.fills = [{ type: "SOLID", color: { r: 0.2, g: 0.4, b: 1 } }];
node.cornerRadius = 8;

// ローカルスタイルを適用
const style = figma.getLocalPaintStyles().find(s => s.name === "Primary/500");
node.fillStyleId = style.id;

// 変数（デザイントークン）をバインド
const vars = await figma.variables.getLocalVariablesAsync();
const color = vars.find(v => v.name === "color/primary");
figma.variables.setBoundVariableForPaint(fill, "color", color);

実用上は search_design_system で変数・スタイルのIDを先に取得してから参照するのが基本です。

レスポンス

リクエストの codeで指定した return の内容がJSON化されてcontent[0].textに格納されて返ってきます。

JSON

{
  "jsonrpc": "2.0",
  "id": 1,
  "result": {
    "content": [
      {
        "type": "text",
        "text": "Components / LinkButton id=70:10\nPage 1 id=0:1"
      }
    ]
  }
}

複数のノードを作成した場合も同様に、returnに詰めたオブジェクトのみが返ってきます。

JSON

{
  "type": "text",
  "text": "{\"id\":\"87:490\",\"size\":\"1190×696\",\"count\":60}"
}

use_figma 使用時に理解しておくこと

エラー後の一時停止は正常な挙動

エラーが発生した場合、エージェントはすぐに再試行せず、エラーメッセージを読んで原因を分析してからスクリプトを修正します。エラー後にエージェントが止まっているように見えることがありますが、そのまま待つのが正しい対応です。

作業を工程ごとに分解してから作業させる

use_figmaは1回の呼び出しで返せるデータが20KB上限です。また、スクリプトがエラーになった場合はその呼び出し全体が無効になります（アトミック実行）。「デザインシステムを全部作って」のような大きな指示をそのまま渡すと、エージェントが途中でエラーになったときの原因特定が難しくなります。

指示する前に「変数設定 → コンポーネント作成 → レイアウト組み立て」のように工程を分解してタスク化してから作業を依頼すると、エージェントが各ステップを順番に処理でき、問題が起きた箇所を特定しやすくなります。

この手順は figma-use Skillに定義されており、Skillを読み込んだエージェントが自律的に実行しますが、プロンプトで「まずは変数を作成してからコンポーネントを作るように」と指示してあげるとより確実です。

出力結果は目視で確認する

ベータ品質のため、生成されたデザインには手動での確認・修正が必要な場合があります。get_screenshotで確認させるか、Figmaを直接確認してください。

まとめ

グラフィカルな表現が求められる環境や分業が進んだプロジェクトでは、ユースケースは限られるかもしれません。一方、コードをマスターとして開発するプロジェクトや、コードとデザインの二重管理の手間を減らしたい場合には有用な機能になりえます。

本記事では利用要件・Figma Skills・データ仕様・使用時の注意点までをまとめました。Tailwind CSSを使用している場合の実践例など、実際に試してみた内容は次の記事で紹介します。

この記事はお役に立ちましたか？

皆様のフィードバックが励みになります！

ボタンを押して記事が役に立ったことを伝える

筆者にコーヒーを奢る（Buy Me a Coffee）

コーヒーを奢る

この記事をシェア

Facebook

はてな

URLをコピー

utsusie

UI Designer / Web Director

Lv.0

STR

LDR

EXP

TEC

LCK

詳しく見る