デザイナーがFigmaで作ったLPのデザインを、エンジニア(または非エンジニアのコーディング担当)が 目で見ながら手で写経して実装する — これが今までの当たり前でした。

ところが2026年、Figmaが 公式MCPサーバー を出してきたことで、この「目で見ながら手で写経」がほぼ要らなくなりました。Claude CodeにFigmaのURLを渡すと、 デザインの構造・カラー・余白・フォントを直接読み取って コード実装してくれる。

3週間使ってみて、 デザイナーと非エンジニアの協業の質が変わった 実感があるので、その記録です。

Figma公式 — MCPサーバー

figma.com

何が変わったか — 「URLを渡すだけ」になった

これまでの典型的な流れ。

  1. デザイナーがFigmaでLP/管理画面/カードUIを完成
  2. デザイナーがエンジニアに「このページ作って」とFigma URL共有
  3. エンジニアが画面を見ながらCSSを書く(ここに 数時間〜数日 が消える)
  4. デザイナーが「あ、ここの余白16pxのはずだったんだけど…」と指摘
  5. 修正のループ

これが、Figma MCP連携後はこうなります。

  1. デザイナーがFigmaでデザインを完成
  2. デザイナーがClaude Codeに 「このFigmaのこのページを実装して。(URL)」 と1行頼む
  3. Claude Codeが get_design_context を呼び出し、構造・スクショ・トークンを取得
  4. プロジェクトの技術スタック(React/Vue/Next.jsなど)に合わせたコードが出力
  5. デザイナー本人が結果を見て微調整

工程3〜4が 数分 に短縮され、デザイナー本人がコードまで触れるようになる、という変化です。

cloud.config Tech Blog — Figma MCP × Claude Code

tech-blog.cloud-config.jp

設定 — リモート接続が標準

Figma MCPサーバーは クラウドにホスト されているので、自分のPCに何かをインストールする必要はありません。Claude Codeから直接URLで繋ぎにいく形です。

ターミナルで以下を実行。

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

このコマンドで、Claude Codeの設定にFigma MCPが追加されます。

その後、Claude Codeを再起動して /mcp を叩くと figma がリストに出てくる。これを選んで Authenticate すると、ブラウザでFigmaのOAuth認証画面が開きます。

サインインして許可するだけで完了。3分前後の作業です。

Qiita — VSCode + Claude Code + Figma MCP連携ガイド

qiita.com

使ってみた具体例 — カードコンポーネントの実装

3週間使ってみた中で印象的だった例を1つ。

社内ダッシュボードに使う 「KPIカード」コンポーネント をデザイナーがFigmaで作って、Claudeに以下のように頼みました。

このFigmaのKPIカードコンポーネントを実装してほしい。
URLは https://www.figma.com/design/xxx/yyy?node-id=123
プロジェクトはReact + TailwindCSSで、components/KpiCard.tsx として作成。
- 色は Figma のデザイントークンに合わせる
- 余白も忠実に
- レスポンシブ対応(スマホで縦積み)
- TypeScriptで型定義

Claudeが get_design_context を呼び出し、Figmaから以下を取得しました。

  • カードの構造(タイトル、数値、増減アイコン、トレンドグラフ領域)
  • カラー(背景 #FAFAFA、テキスト #1A1A1A、増 #00A86Bなど)
  • 余白(padding 24px、gap 12px)
  • フォント(Inter 14px / 32px)
  • レスポンシブのbreakpoint

その情報を元に、 TailwindCSSのクラス名で正確に再現したReactコンポーネント を出力。デザイナーが目視確認して、 微調整なしで採用 になりました。

これまでなら3〜4時間かかる工程が、 20分 で終わった感覚です。

ASCII — Figma MCP Server × Claude Codeでデザイナーと開発者を双方向に繋ぐ

ascii.jp

デザイントークンが揃っているプロジェクトほど効く

3週間で見えてきた使いどころと使えどころ。

よく効く

  • デザイントークンが揃っているデザインシステム
  • カードUIや管理画面など、規則的な構造のコンポーネント
  • アイコン・ボタン・フォーム要素などの再利用パーツ
  • 既存サイトに新しいページを追加する場面

あまり効かない

  • 1点もののクリエイティブな広告ビジュアル
  • 細かいアニメーション(SVGアニメや手書き風)
  • 写真主体のレイアウト
  • フリーレイアウトのアートワーク

要するに、 「ルールに従ってる/規則的なデザイン」 ほど効きます。逆に、デザイナーの感覚で配置を細かく決めた1点ものは、Claudeが汲み取りきれない部分が出る。

Code Connectでさらに深く繋がる

地味に強いのが、Figmaの Code Connect という機能。

これは、Figma上のコンポーネントと、コードベース内の既存コンポーネントを 紐づけられる 仕組み。Claude CodeはCode Connectの設定を読み取って、 「このFigmaコンポーネントは、コード上では <KpiCard> として既に存在する」と認識した上でコードを出してくれます。

つまり、 車輪の再発明をしない。既存のデザインシステムを尊重したコードが返ってくる。

これがあるかないかで、 デザインシステム運用の質 が変わります。

Zenn — MCP #6 Figma MCP

zenn.dev

デザイナー視点のメリット

エンジニア向けに紹介されがちな機能ですが、本当に効くのは デザイナー本人 だと感じます。

  • 自分のデザインを コード化した状態で確認 できる(実装後の見た目を実機で触れる)
  • エンジニアに依頼してからの 待ち時間がほぼゼロ
  • デザインシステムの整合性確認が コードレベル でできる
  • 簡単な実装は 自分で完結 できるようになる(コーディング担当が不在の小規模チーム向け)

私の知り合いのフリーランスデザイナーは、 クライアントへのプロトタイプ提案 をFigma → Claude Code → デモサイト公開、まで1人で完結させる流れに切り替えていました。これまではエンジニアに頼まないと無理だった工程。

注意点

完璧ではない部分も書いておきます。

1つ目 — Figmaの有料プラン推奨

無料プランでも基本機能は使えますが、Code Connectや一部の高度な機能は Professional / Organization プラン が前提。デザインシステム運用するなら、結局有料プランが現実的です。

2つ目 — Claude Codeでの権限管理

FigmaはOAuth経由で全ファイルにアクセスする権限を取りに来ます。会社のFigmaアカウントで連携する場合、 どのファイルが見られる状態か を意識しておく必要があります。気になる場合は、専用の「AI連携用」アカウントを作って、必要なファイルだけ共有する運用が安全。

3つ目 — 大規模ファイルでの遅延

ノード数が数千を超える巨大なデザインファイルだと、 get_design_context の応答に時間がかかることがあります。 特定のフレーム に絞って依頼するのがコツ。

まとめ

  • Figma公式MCPサーバーで、Claude CodeがFigmaデザインを 直接読める ようになった
  • 設定は claude mcp add --transport http figma https://mcp.figma.com/mcp の1コマンド + OAuth
  • デザインシステムが整っているほど、コード生成の精度が高い
  • Code Connectで既存コンポーネントを尊重したコードを生成
  • 効くのは規則的なUI、効きにくいのは1点もののクリエイティブ
  • デザイナー本人が 実装まで自走 できるようになるのが大きな変化

「デザイナーとエンジニアの間に時間が溶けている」チームほど、この連携の恩恵が大きいです。導入は5分。試してみると、来週のスプリントの空気が変わるかもしれません。