zudo-paper

Figma MCPのキャプチャ機能

Author: Takazudo | 作成: 2026/02/22

概要

Figma MCPが良くなったと聞いて試してみた。自分はFigmaにほとんど馴染みがない。個人用途では、デザインの微調整はブラウザスクショをAdobe Illustratorに貼り付けて適当にいじり、キャプってClaude Codeに渡してコードを書かせるというやり方をしていた。

Figma MCPにはウェブサイトをキャプチャしてFigmaの編集可能なファイルに変換する機能があり、これが自分のワークフローにかなりマッチしそうだった。キャプチャ→Figmaで微調整→Figmaファイルは破棄、という流れ。デザインシステムの真のソースはWebアプリ側にあるので、Figmaは「一時的なデザイン編集場所」として使えばいいというわけ。

Claude Codeのスキルも3つ作った。そのあたりのまとめ。

自分のデザインワークフロー

自分の個人プロジェクトでは、Tailwind CSSでデザイントークンを定義して、Reactコンポーネントで開発するというやり方をしている。デザインの真のソースはWebアプリのコード側にある。

Figmaは使っていない。デザインの微調整をしたいときは前述の通りで、最近はCAD的な作業でAdobe Illustratorをよく使っているので、その流れで適当にイラレでラフを作り、後はお願いとClaude Codeに任せ。その後自分で微調整。

Adobe Illustratorでの旧来のデザイン編集

まぁ要するにデザインファイルを整備するつもりは全くない。そうやって作った一時イラレファイルはただのログとして残してあるかも程度のもの。

Figma MCPの概要

Figma MCP Serverは、AIコーディングエージェントがFigmaデザインデータに直接アクセスするための標準化されたインターフェース。Claude CodeからFigmaのデザインデータを読み取ったり、Webページをキャプチャしたりできる。

接続方式が2つあり、Figmaのプランによって使えるものが異なる。

  • Devプラン以上: Remote ServerとDesktop Serverの両方が使える。Figmaデスクトップアプリの選択ベースのワークフローが可能。
  • Devプラン未満: Remote Serverのみ。FigmaのURLを貼り付けてアクセスする方式に限られる。

Remote Server

URLはhttps://mcp.figma.com/mcp。ブラウザのFigma WebアプリとURL指定で連携する方式。デスクトップアプリは不要で、FigmaのファイルURLを指定してデータにアクセスする。全プランで利用可能。

セットアップは以下。

claude mcp add --transport http figma https://mcp.figma.com/mcp

Desktop Server

URLはhttp://127.0.0.1:3845/mcp。Figmaデスクトップアプリ上のDev Modeで有効化する方式。Figmaアプリで選択した要素をそのままClaude Codeから読み取れる。URLの指定が不要で、選択ベースのワークフローになる。Devプラン以上が必要。

セットアップは、まずFigmaデスクトップアプリでDev Mode（Shift+D）に切り替えて、MCP serverを有効化する。

Figmaデスクトップアプリでのデスクトップ MCP Server有効化画面

その後、以下のコマンドでClaude Codeに追加。

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

両方セットアップすると、Claude Codeの/mcpコマンドでこんな感じに表示される。

Claude CodeのMCPサーバー一覧

既存のFigma MCP機能（Figma→コード方向）

Figma MCPには、Figmaのデザインデータをコードに変換する方向の機能がいくつかある。

  • get_design_context: 選択したノードのコード（React+Tailwind形式）、フォント、色、レイアウト情報を取得
  • get_screenshot: ノードのスクリーンショット取得
  • get_metadata: レイヤー構造、サイズ、位置をXMLで取得
  • get_variable_defs: デザイントークン（Variables/Styles）取得
  • get_figjam, generate_diagram: FigJam関連

たとえばget_design_contextを使うと、以下のようなReact+Tailwindのコードが返ってくる。

export default function UsbPdusb() {
  return (
    <p className="font-['Futura:Medium'] leading-[38.08px] text-[#d6d3d1] text-[22.4px]">
      USB-PDとは何か？ ― 普段使っているのに意外と知らないUSB電力供給の仕組み
    </p>
  );
}

get_metadataはXMLでレイヤー構造を返す。

<text id="0:120" name="USB-PDとは何か？..." x="0" y="1" width="403" height="115" />

操作方法は接続方式によって異なる。

  • Remote Server: FigmaのURLを貼り付けて、fileKeyとnodeIdを指定する
  • Desktop Server: Figmaアプリで要素を選択するだけでClaude Codeから読み取れる（URL不要）

Figmaアプリで選択した要素をClaude Codeから読み取れる

Desktop Serverのほうが手軽で、Figmaアプリ上でクリックして選択→Claude CodeのMCP経由で情報取得、という流れがスムーズ。

このFigma→コード方向のワークフローの前提として、Figmaファイルがきちんと構造化されていること（デザイントークン、Auto Layout等）が求められる。経験豊富なデザイナーが設計したFigmaファイルがあれば、開発者はFigma MCPで効率的に開発できる。ただ、自分はFigmaをそういう風に使ってはいない。

Webサイトキャプチャ（コード→Figma方向）

ここからが自分にとって本題。Figma MCPにはgenerate_figma_designという機能があって、ウェブページをキャプチャしてFigmaの編集可能なデザインファイルに変換できる。

仕組みとしては、Figmaのcapture.jsスクリプトをページに読み込ませ、DOM全体をシリアライズしてFigma APIに送信する。

キャプチャ方法は2つある。

HTMLにスクリプトを埋め込む方式

HTMLに以下のスクリプトタグを追加する。

<script
  src="https://mcp.figma.com/mcp/html-to-design/capture.js"
  async
></script>

URL fragmentパラメータで自動キャプチャが可能。dev環境のみに限定すべきで、本番ビルドに含めないように注意が必要。

Playwrightで注入する方式

ヘッドレスブラウザでページを開き、CSPヘッダーを除去してcapture.jsを注入して実行する。ソースコード変更不要で、外部サイトにも使える。

// Playwrightでページを開き、CSPヘッダーを除去してcapture.jsを注入
const browser = await chromium.launch({ headless: false });
// ...
await page.route("**/*", async (route) => {
  const response = await route.fetch();
  const headers = { ...response.headers() };
  delete headers["content-security-policy"];
  await route.fulfill({ response, headers });
});
await page.goto(targetUrl, { waitUntil: "networkidle" });
// capture.jsを取得して注入
const r = await context.request.get(
  "https://mcp.figma.com/mcp/html-to-design/capture.js",
);
await page.evaluate(
  (s) => {
    const el = document.createElement("script");
    el.textContent = s;
    document.head.appendChild(el);
  },
  await r.text(),
);
// キャプチャ実行
await page.evaluate(() =>
  window.figma.captureForDesign({ captureId, endpoint, selector: "body" }),
);

Playwright方式はソースコードを一切変更しなくていいのが便利。外部のサイトもキャプチャできる。

実際にキャプチャしてみた結果

自分のzpaperブログ（takazudomodular.com/pj/zpaper/）のdev serverをローカルで起動して、キャプチャしてFigmaファイルに変換してみた。

約4MBのDOMデータがシリアライズされた。結果は完璧ではないが、一時的な編集用途には十分だった。Auto Layoutがそこそこ使われていて、ある程度の構造は保持されている。ただしつまんで動かすとただその座標に配置されていることもあり、あくまで参考程度と考えるのが妥当そうに思われた。（詳しくないけど）

キャプチャされたFigmaファイルの構造

新規ファイル作成も、既存ファイルへの追加も可能で、multi-page captureにも対応している。複数ページをキャプチャして1つのFigmaファイルにまとめることもできる。

Claude Codeスキルの作成

この一連の機能を使いやすくするために、Claude Codeのスキルを3つ作った。これらは公開している。

/dev-figma-script-install

Webプロジェクトにcapture.jsスクリプトを追加するガイダンスを出すスキル。React/Viteプロジェクト向けに、process.env.NODE_ENV === 'development'で制御して本番ビルドに含まれないようにするパターンを案内する。

/dev-figma-capture

URLを受け取って、キャプチャスクリプトの有無を検出するスキル。スクリプトがある場合はURL fragment方式で、ない場合はPlaywright注入方式で自動切り替えする。新規ファイル作成か既存ファイルへの追加かも選択可能。

/figrefer

Figmaデスクトップアプリで選択中の要素を読み取り、ユーザーの指示に従って作業を続行するスキル。スクリーンショット・デザインコンテキスト・メタデータを並列取得して、選択した要素の情報を一度に把握できる。

推奨ワークフロー

Figmaは成長してきたツールだが、きちんと構造化されたFigmaファイルを作るには経験豊富なデザイナーが必要、という印象がある。デザイントークン、Auto Layout、コンポーネント化など、Figmaを「デザインの真のソース」として運用するにはそれなりの知識がいる。

自分のやり方は違っていて、Tailwindのデザイントークンをビルド・微調整する。これがデザインシステムの真のソース。Figmaファイルとの双方向同期はオーバーキルだし、そもそもFigmaに詳しくない。

ただ、Figmaキャプチャ機能があればこういうワークフローが成立する。

  1. Webアプリでデザイントークンとコンポーネントを開発する
  2. 微調整したい部分があればキャプチャしてFigmaに変換する
  3. Figma上で色や配置を調整する
  4. 調整結果をWebアプリに反映する
  5. Figmaファイルは破棄する

デザインシステムをWebアプリに集約しつつ、ビジュアル調整はFigmaの力を借りる。Figmaファイルの保守は不要。

AI進化の流れでも自然なワークフローだと考えている。Claude Codeでプロンプトを書いてコンポーネントを作る→見た目を調整したい→キャプチャ→Figmaで編集→Webアプリに反映→Figmaファイル破棄、という流れ。

Figmaは「一時的なデザイン編集場所」として使う。デザイナーの使い方とは全然違うが、自分のワークフローにはこれが合う。Adobe Illustratorにスクショ貼り付けて雑にいじるよりかは明らかに良さそうと考え中。

しかしそういう方法が進化していったとき、既存のデザイナーはどういうフローで仕事をしていくことになるのであろうか。Claude Codeを始めとするAIエージェントの進化により、色々垣根が崩されていく感覚がする。

なお、HTMLとFigmaの完璧な同期ではないので、キャプチャ結果にはズレがある。フォントの差異やCSSプロパティの再現度など、完全一致は期待しないほうが良い。ただ「使い捨てのデザイン編集用」と割り切ると、これで十分かもという感じ。