Figma MCPの新ツール「use_figma」でAIエージェントがキャンバスに直接書き込み可能に — オープンベータ開始、始め方完全ガイド

Figmaが3月24日、MCPサーバーの新ツール 「use_figma」 のオープンベータを開始した。これにより、Claude Code、Codex、Cursor などのAIエージェントが Figmaキャンバスに直接書き込み できるようになる。

公式Xアカウントの発表投稿は24時間で 503万インプレッション、6,500いいね、4,700ブックマーク超 を記録しており、開発者・デザイナー双方から極めて高い関心を集めている。

この発表の何が重要なのか

これまでのFigma MCPサーバーは主に「読み取り」が中心だった。デザインのコンテキストをコードエディタに渡してコード生成に活用する、という一方向の流れだ。

今回の use_figma ツールは、この関係を 双方向 にする。AIエージェントが:

• フレーム、コンポーネント、変数、オートレイアウト を直接作成・更新できる
• 既存の デザインシステム（コンポーネントライブラリ、変数、トークン） を参照しながら生成できる
• 生成結果は ネイティブなFigma構造 であり、スクリーンショットや静的画像ではない

つまり、AIが生成したデザインをそのままFigma上でチームがレビュー・編集・拡張できるということだ。

2つのツールの使い分け

ツール	方向	機能
generate_figma_design	コード → Figma	ライブUI（HTML）をFigmaの編集可能レイヤーに変換
use_figma ✨NEW	エージェント → Figma	デザインシステムを使ってキャンバスに直接書き込み

この2つは補完的な関係にある。コードとデザインが乖離した場合、generate_figma_design で最新UIをFigmaに取り込み、use_figma でそれを編集・新規作成するという流れだ。

2月の「Claude Code to Figma」から何が変わったか

Figmaは2月17日に Claude Code to Figma（generate_figma_design ツール）をリリースしている。こぎそ氏（@kgsi）の検証記事で詳しく解説されているが、このツールはローカルのdev serverで動くUIをキャプチャし、DOMをFigmaのノードツリーに変換する仕組みだった。

今回の use_figma は、こぎそ氏が最新の調査で「以前のClaude Code to Figmaで欠けていたピースが一定埋まった」と評価しているように、2月時点の制約を大きく補完するものだ。

3段階の進化を整理

時期	ツール	できること
2月17日	generate_figma_design	ライブUIをFigmaレイヤーに変換。Auto Layout再現、レイヤー名自動整形
同時期	get_design_context 等	Figmaノードのスタイル情報を読み取り、コードに反映
3月24日 ✨	use_figma	既存のコンポーネント・変数・トークンを使ってキャンバスに直接書き込み。Self-Healing Loopで自己修正

2月に「欠けていたピース」とは

こぎそ氏の2月検証で指摘されていた主な課題:

1. コンポーネント/Variantが再現されない — キャプチャされるのはフラットなフレームとレイヤーの集合で、Figmaのデザインシステムとは接続しなかった
2. 変数・トークンとの連携がない — カラートークンやスペーシング変数は反映されず、生の値がコピーされるだけだった
3. 一方向 — コード→Figmaの取り込みはできたが、エージェントがFigma上で能動的にデザインを作成・編集することはできなかった

今回の use_figma + Skills は、まさにこの3つを埋めるアップデートだ:

• ✅ 既存コンポーネントを参照して生成 — フラットなレイヤーではなく、ライブラリのコンポーネントインスタンスとして配置
• ✅ 変数・トークンを直接操作 — /sync-figma-token Skillでコードとの同期も可能
• ✅ 双方向の書き込み — 読み取りだけでなく、Plugin API相当の操作をエージェントが実行

つまり、2月の時点では「コードの見た目をFigmaに写す」だったものが、3月には「デザインシステムを理解してFigma上でデザインする」に進化したと言える。

Skills — エージェントに「良いデザインとは何か」を教える

use_figma と同時に発表された Skills は、エージェントの出力品質を制御する仕組みだ。Markdown形式の指示書で、プラグインの開発やコーディングは不要。

Skillsが解決する問題

AIモデルは本質的に非決定的（同じプロンプトで異なる結果が出る）。Skillsは以下を定義することで、出力を予測可能にする:

• どのステップを、どの順序で実行するか
• どの規約に従うか（命名規則、変数体系、コンポーネント構造）
• 「良い結果」とは何か の基準

公式・コミュニティSkills（ローンチ時9種）

Skill名	内容	提供元
/figma-use	基盤スキル。全スキルの土台	Figma
/figma-generate-library	コードベースから新しいコンポーネントを生成	Figma
/figma-generate-design	既存コンポーネントと変数を使って新規デザイン作成	Figma
/create-voice	UI仕様からスクリーンリーダー仕様を生成	Ian Guisard (Uber)
/cc-figma-component	JSON契約からFigmaコンポーネントを生成	Nick Villapiano (One North)
/apply-design-system	既存デザインをシステムコンポーネントに接続	Chris Goebel (Edenspiekermann)
/rad-spacing	変数とフォールバックで階層的スペーシングを適用	Nolan Perkins (Rad Collab)
/edit-figma-design	WarpとOzを使ったデザインワークフロー	Warp
/sync-figma-token	コードとFigma変数間のトークン同期（ドリフト検出付き）	Firebender
/multi-agent	並列ワークフローでデザインを実装	Augment Code

Self-Healing Loop（自己修正ループ）

Skillsの特に注目すべき機能は 自己修正ループ だ。エージェントが画面を生成した後、スクリーンショットを撮って「期待と一致しない部分」をイテレーションで修正できる。修正対象は見た目だけでなく、コンポーネント構造・変数・オートレイアウトというシステムそのものだ。

対応MCPクライアント一覧

use_figma（キャンバス書き込み）に対応しているクライアント:

クライアント	書き込み	コード→キャンバス	Skills対応
Claude Code	✅	✅	✅（Figmaプラグイン）
Claude Desktop	✅	✅	✅（Figmaプラグイン）
Codex (OpenAI)	✅	✅	✅（Codex Skills）
Cursor	✅	✅	✅（Figmaプラグイン）
VS Code	✅	✅	✅（Figmaプラグイン）
Copilot CLI	✅	✅	✅
Augment Code	✅	✅	✅
Warp	✅	✅	✅
Factory	✅	✅	—
Firebender	✅	✅	—
Gemini CLI	—	—	✅

🚀 始め方ガイド（Claude Code / Cursor / Codex / VS Code）

前提条件

• Figmaアカウント（Full席 が必要。Dev席は読み取り専用）
• 対応MCPクライアント
• ベータ期間中は 無料 で利用可能

---

Claude Codeで始める

方法1: プラグインで一発セットアップ（推奨）

claude plugin install figma@claude-plugins-official

これだけでMCPサーバー設定 + Skills（共通ワークフロー用）がすべてインストールされる。

方法2: 手動セットアップ

# プロジェクトスコープ（このプロジェクトのみ）
claude mcp add --transport http figma https://mcp.figma.com/mcp

# ユーザースコープ（全プロジェクトで使える）
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

セットアップ後:

1. Claude Codeを再起動
2. /mcp と入力 → figma を選択 → Authenticate で認証
3. 「Authentication successful. Connected to figma」と表示されればOK

---

Cursorで始める

方法1: プラグイン（推奨）

Cursorのエージェントチャットで:

/add-plugin figma

方法2: ディープリンク

ブラウザで以下を開く:

cursor://anysphere.cursor-deeplink/mcp/install?name=Figma&config=eyJ1cmwiOiJodHRwczovL21jcC5maWdtYS5jb20vbWNwIn0%3D

---

Codex (OpenAI)で始める

方法1: Codexアプリ（推奨）

1. Codexアプリの左上「Skills」をクリック
2. Figma関連スキルの「+」をクリック（Figma Implement Design, Figma Use, Figma Code Connect Components など）
3. 左下「Settings」→「MCP servers」→ Figmaサーバーの「Install and authenticate」

方法2: CLI

codex mcp add figma --url https://mcp.figma.com/mcp

---

VS Codeで始める

1. ⌘ Shift P → 「MCP: Open User Configuration」（グローバル）or「MCP: Open Workspace Folder MCP Configuration」（ワークスペース限定）
2. mcp.json に以下を追加:

{
  "inputs": [],
  "servers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    }
  }
}

3. 「Start」をクリック → 「Allow Access」で認証

---

最初のプロンプト例

セットアップが完了したら、以下のようなプロンプトで試せる:

デザインシステムを使った新規画面作成:

「このFigmaファイル [URL] を使って、新しいページを作成し、既存のコンポーネントを使って設定画面をオートレイアウトで構築して」

変数への変換:

「このセレクション [URL] のハードコードされた値を変数に変換して、周囲のコンポーネントも更新して」

空の状態の追加:

「このFigmaファイル [URL] に、既存のデザインシステムに合ったエンプティステートを追加して」

Tips

• URLを必ず含める: エージェントはFigmaファイルのURLまたはノードのリンクが必要
• 段階的に進める: 大きな変更は一度にやらず、小さなステップで検証しながら進める
• デザインシステムを明示する: 使用するライブラリ、コンポーネント、変数、モードを具体的に指定すると精度が上がる

現在の制限事項

制限	詳細
レスポンスサイズ	1回のuse_figma呼び出しあたり20KB上限
画像未対応	画像・動画のインポート、GIF作成は不可
カスタムフォント未対応	フォントサポートは今後追加予定
コンポーネント公開	Code Connect完了前に手動でpublishが必要
ベータ品質	出力は手動レビュー・クリーンアップが必要な場合あり

料金

• ベータ期間中は無料
• 将来的には 従量課金制の有料API になる予定
• 書き込みにはFigmaの Full席 が必要（Dev席は読み取り専用）

個人開発者にとっての意味

デザインとコードの境界が消える

これまでの個人開発者のワークフロー:

1. Figmaでデザイン → コードに手動変換、または
2. コードで直接UIを作成 → デザインファイルなし

use_figma で可能になるワークフロー:

1. コードからFigmaへ: generate_figma_design でライブUIをFigmaに取り込み
2. FigmaからFigmaへ: use_figma でデザインシステムに沿った修正・追加
3. Figmaからコードへ: デザインコンテキストを使ったコード生成

この コード ⇄ キャンバスの双方向ループ が、デザインツールとコードエディタの境界を溶かしていく。

Skills は「デザインシステムのIaC」

Skillsは本質的に、デザインの意思決定をコードとして管理する仕組みだ。これはインフラのInfrastructure as Code (IaC) と同じ発想で、Design System as Code と言える。

個人開発者でも:

• 自分のプロダクトのデザイン規約をSkillとして定義
• エージェントが一貫したデザインを生成
• 規約の変更はSkillファイルの更新だけで反映

という運用が可能になる。

OpenAI CEO Ed Bayesのコメント

「OpenAIのチームはFigmaを使ってイテレーション、改善、プロダクトの仕上がりについての意思決定をしています。Codexが Figma内のすべての重要なデザインコンテキストを見つけて活用できるようになり、より高品質なプロダクトをより効率的に構築できるようになります」 — Ed Bayes, Design Lead at Codex (OpenAI)

まとめ

Figmaの use_figma オープンベータは、デザインツールとAIエージェントの関係を根本的に変える発表だ。

3つの核心:

1. 双方向: 読み取りだけでなく、書き込みが可能に
2. デザインシステム連携: 既存のコンポーネント・変数・トークンを活用した生成
3. Skills: エージェントの出力品質をMarkdown指示書で制御

ベータ期間中は無料なので、今すぐ試す価値がある。特にClaude CodeやCursorを日常的に使っている開発者にとっては、claude plugin install figma@claude-plugins-official の一行で新しいワークフローが手に入る。

---

ソース:

• Figma公式ブログ: Agents, Meet the Figma Canvas
• Figma Developer Docs: Write to Canvas
• Figma Help: Guide to the Figma MCP server
• Figma Developer Docs: Create Skills
• Figma (@figma) — X, 2026年3月24日

---