Figma MCPは、AIアシスタントがFigmaファイルを直接読み取れるようにするコネクターです。貼り付けたスクリーンショットから推測するのではなく、フレーム、レイヤー、コンポーネント、スペーシング、カラースタイル、テキストを読み取れます。これはMCP（Model Context Protocol）を基盤としており、アシスタントが共通のインターフェースを通じて外部ツールと通信できるようAnthropicが公開したオープン標準です。Figmaは公式サーバーを提供しており、コミュニティも複数のサーバーを開発しています。セットアップでは、AIクライアントに小さな設定ブロックを追加し、Figmaアカウントへのアクセスを認証します。設定ファイルの編集に慣れているかどうかによって、所要時間は10分程度から半日ほどです。その一文だけですでに気が重くなった方には、このページの下のほうにもっと簡単な方法があります。
Figma MCPとは、実際には何なのでしょうか？
MCPは製品ではなく標準です。AIアシスタントが外部システムに情報を求め、そのシステムがどのように応答するかを定義します。MCPに対応するものはMCPサーバーと呼ばれます。サーバーとは実際にはアダプターであり、一方ではFigmaと通信し、もう一方ではClaudeがすでに理解できる形式でClaudeと通信します。
つまり「Figma MCP」とは、アシスタントとデザインファイルの間に入るサーバーを指す略称です。起動すると、Claudeは平面的な画像をもとに作業するのではなく、構造をもとに作業できるようになります。ボタンがコンポーネントのインスタンスであること、パディングが15ではなく16であること、テキストスタイルの名前が body/regular 「小さい灰色のほう」ではなく
Figmaにはデザインからコードへのワークフローを想定した公式サーバーがあり、Figmaの公開API経由でファイルを読み取るコミュニティ実装もあります。認証方法や公開されるファイル情報の範囲は異なりますが、Claude側から見ると、どれも同じように見えます。リクエストに応じて呼び出せるツールの一覧です。まず背景を詳しく知りたい場合は、MCPとは何か、なぜ存在するのかをわかりやすく解説した記事をご覧ください。
Figma MCPでClaudeは実際に何ができるのでしょうか？
興味深いのは「Claudeがファイルを見られること」ではありません。手作業で行っていた作業の数々が、手作業ではなくなることです。
- 選択したフレームを、ファイルに一致するフロントエンドコードに変換します。 画像から大まかに再現するのではなく、デザインそのものから取得したスペーシング、階層、コンポーネント名を使います。最終的な確認は必要ですが、値を手入力し直す必要はなくなります。
- ファイルからデザイントークンを抽出します。 カラースタイル、タイプスケール、スペーシングの段階、角丸の半径を、コードベースで使っている形式の変数として書き出します。
- ファイルをそのファイル自身のシステムに照らして監査します。 スタイルではなくハードコードされた16進数を使っているレイヤー、ほかでは使われていないスペーシング値を使っているフレーム、切り離されてひそかに編集されたコンポーネントを特定できます。
- 引き継ぎ用メモや仕様書を書く。 状態、エッジケース、空の状態、エラー時の動作を、記憶ではなく実際のフレームに基づいて説明します。
- 文脈に沿ってUXコピーをレビューする。 フロー内のすべての文言を順番に読み、同じアクションに3種類の異なる言葉が使われていないか確認できます。
- 大きなファイルについて質問に答える。 このコンポーネントはどこで使われているのか、このブランチで何が変わったのか、どの画面がまだ古いロゴを参照しているのか。
これらすべてに共通する仕組みは、Figma MCPがデザインと、その後に続くあらゆる作業の間にあるコピー＆ペーストの手順をなくすことです。これは本当に便利ですが、メリットはそれだけです。デザイン上の判断をするわけではありません。
Figma MCPサーバーはどのように設定しますか？
詳細はサーバーやクライアントごとに異なり、どちらも頻繁に変わるため、ブログ記事に載っているコマンドをそのまま使うと、20分を無駄にすることになりかねません。手順の形は安定しているので、その形を覚えましょう。
- サーバーを選んでください。 エディター内でデザインからコードへの変換を行いたいなら、まず公式のFigmaサーバーから始めましょう。デスクトップアプリを起動せずにAPI経由でファイルを読み取りたい場合は、コミュニティ製サーバーを確認してください。どちらも公開MCPサーバーディレクトリに掲載されています。
- アクセスを整えてください。 公式ツールは通常、ログイン済みのFigmaセッションを使い、アプリ内で有効にする設定をオンにして動作します。コミュニティ製サーバーでは通常、Figmaアカウント設定で発行する個人用アクセストークンが必要です。そのトークンはパスワードと同じように扱ってください。自分が読み取れるすべての情報を読み取れるためです。
- サーバーをクライアントのMCP設定に追加してください。 Claude Desktop、Claude Code、そしてほとんどのAI対応エディターは、利用可能にしたいサーバーと、それぞれを起動するコマンド、必要な認証情報を記載した設定ファイルを読み込みます。エントリを1つ追加します。
- クライアントを再起動してください。 「動かない」という報告のほとんどは、設定を変更した後にクライアントを再起動していないことが原因です。
- 接続を確認してください。 クライアントには、接続されているサーバーと、それぞれが提供するツールが表示されます。ツール一覧が表示されていれば、接続は完了しています。
- 確認対象を指定してください。 ほとんどのワークフローでは、Figmaでフレームを選択するか、そのフレームへのリンクを貼り付けてから質問します。Claudeは、指定した対象だけを読み取ります。
初回の試行でつまずきやすい点が2つあります。Figmaデスクトップアプリを通じて動作するサーバーでは、アプリを開いてファイルを読み込んでおく必要があるため、閉じてしまうと何も起こりません。また、ほとんどのサーバーは読み取り中心です。ファイルの内容を教えることには非常に長けていますが、ファイルを変更するのはそれほど得意ではありません。
Figma MCPの正直な限界とは？
午後を使う前に知っておくとよいことです。
- MCPに対応したクライアントが必要です。 つまり、デスクトップアプリ、エディター、またはターミナルです。無料プランのブラウザ版チャットウィンドウでは使えません。
- 実際にはアクセスは全か無かです。個人用トークンは通常、アカウントからアクセスできるすべてのファイルに到達できます。アカウントが共有組織に属している場合は、トークンを生成する前にその点を考えてください。
- 物が移動すると壊れます。APIが変わったり、サーバーが書き換えられたり、クライアントの更新で設定形式が変わったりします。その上に構築するものには、時折メンテナンスが必要です。
- 大きなファイルはコンテキストを消費します。400個のレイヤーがある画面は、大量の構造化データを生み出します。1つのフレームを指定するとうまくいきますが、ファイル全体を指定すると、うまくいかないことがよくあります。
- 乱雑なファイルからは、乱雑な出力が生まれます。レイヤーがFrame 217という名前で、スタイルの半分が切り離されているなら、生成されるコードもそれを受け継ぎます。コネクタは存在するものを読み取るだけで、整理はしません。
- アクセスを与えるだけで、判断はしません。Claudeはデザインを見られるようになります。しかし、そのデザインをシニアデザイナーのように評価できるかどうかはまったく別の問題であり、次に解決する価値があるのはそこです。
MCPのセットアップが望む以上に大がかりだったら？
多くの時間を節約できる違いがここにあります。MCPはClaudeがアクセスできる範囲を決めます。アクセスした後にClaudeがどれだけうまく作業できるかについては、何も決めません。これは別々の問題であり、多くのデザインチームが抱えているのは前者ではなく後者です。
本当に求めているのが、Claudeによる適切なデザイン批評、リサーチ計画、またはデザインシステムアーキテクトが承認できるコンポーネントAPIなら、コネクタはまったく必要ありません。Claudeにその専門家のように働いてもらえばよいのです。それを可能にするのがSkillファイルです。一度アップロードするだけで、Claudeに1つの役割、1つの手法、1つの出力基準を与える短いMarkdownドキュメントです。インストールは約3分で完了し、MCPの有無にかかわらず、どのプランでも使えます。以下のデザインSkillのいくつかは現在無料なので、費用をかける前に試せます。
コネクタではなく、デザイナー
無料
このSkill
プロダクトデザイナーが進めるように、フロー、状態、階層、インタラクションロジックを批評します。画面の目的、不足しているもの、うまくいかなかったときにユーザーがすることを確認します。画面を貼り付けるか説明するだけでよく、コネクタは不要です。
Denholmを見る →実際に最も効果的な組み合わせは、読み取りにMCP、思考にSkillを使う方法です。Claudeがファイルから実際の値を取り出し、場当たり的に処理するのではなく、手法に沿って適用します。
トークンとコンポーネントを担当するもの
$29
このSkill
トークンの命名、コンポーネントAPI、バリアント構造、そして何かをシステムに採用する価値があるかを判断するルール。Figmaコネクタが渡す生データの上に成り立つ、まさに判断のレイヤーです。
Vashtiを見る →何かをデザインする前に
無料
このSkill
調査計画、誘導的でないインタビュースクリプト、そしてトランスクリプトをチームが実行に移せる知見へ変える方法を提供します。こちらも今なら無料なので、Skillによって出力が変わるかどうかを試す手頃な方法です。
Melisandeを見る →無料コレクションには合計32個の無料Skillがあり、より幅広いデザインセットはクリエイティブ、コンテンツ、デザインのSkillにあります。インストール手順をステップごとに確認したい場合は、Claude Skillのインストール方法をご覧ください。
まとめ：
Figma MCPはClaudeを実際のデザインファイルに接続するため、スクリーンショットではなく構造を基に作業できます。コードを定期的に生成したり、トークンを抽出したりするなら、設定する価値があります。ただし、Claudeのデザイン判断の質は変わりません。そこを補うのがSkillファイルです。まずはDenholm - UX/UI Product Designerを今なら無料で追加し、トークンやコンポーネントが課題になったら、$29のVashti - Design Systems Architectを加えてください。
Figma MCP：よくある質問
Figma MCPは無料ですか？
このプロトコルはオープンスタンダードで、サーバー自体は通常無料でインストールできます。必要なのは、ファイルへのアクセス権を持つFigmaアカウントと、MCPをサポートするAIクライアントです。一部のAIクライアントでは、これを活用するための機能に有料プランが必要な場合があるため、費用はコネクターではなくそちらにかかります。
ClaudeはMCPを通じてFigmaファイルを編集できますか？
選択した特定のサーバーが対応していると明記していない限り、対応していないと考えてください。これらのコネクターの多くは読み取り用に作られており、構造、値、コンテンツを抽出します。書き込みアクセスはよりまれで不安定なため、本番のファイルではなく複製したファイルでテストしてください。
Figma MCPはClaude Codeで動作しますか？
はい。Claude Codeは一般的にMCPサーバーをサポートしており、デザインからコードへの作業で人気の組み合わせになっているのはまさにそのためです。一方でフレームを読み取り、もう一方でコンポーネントを書き込むという作業を、同じセッション内で行えます。Claude Desktopや、AI対応のほとんどのエディターでも同様です。
Figma MCPを設定している場合でも、デザインSkillは必要ですか？
これらは異なる質問に答えます。MCPはClaudeが見られるものを決めます。SkillはClaudeが見たものをどう扱うかを決めるため、両者は競合するのではなく組み合わせて使えます。2つのアプローチをClaude SkillsとMCPで直接比較しました。
