Figma MCPは、AIアシスタントがFigmaファイルを直接読み取れるようにするコネクターです。貼り付けたスクリーンショットから推測するのではなく、フレーム、レイヤー、コンポーネント、スペーシング、カラースタイル、テキストを読み取れます。これはMCP、つまりModel Context Protocolを基盤としています。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がファイルから実際の値を取り出し、思いつきで進めるのではなく、方法論に沿って適用します。
トークンとコンポーネントを担当
$19
このSkill
トークンの命名、コンポーネントAPI、バリアント構造、そして何かをシステムに組み込む価値があると判断する基準。Figmaコネクタが渡す生データの上に位置する、まさに判断のレイヤーです。
Vashtiを見る →何かをデザインする前に
無料
このSkill
リサーチ計画、誘導しないインタビュースクリプト、そしてトランスクリプトをチームが実行に移せる知見へ変える方法を提供します。こちらも$19なので、Skillsによって出力が実際に変わるかを低コストで試せます。
Melisandeを見る →無料コレクションには合計32個の無料Skillsがあり、より幅広いデザインセットはクリエイティブ、コンテンツ、デザインのSkillsにあります。インストール手順をステップごとに確認したい場合は、Claude Skillのインストール方法をご覧ください。
まとめ：
Figma MCPはClaudeを実際のデザインファイルに接続し、スクリーンショットではなく構造に基づいて作業できるようにします。コードを定期的に生成したり、トークンを抽出したりするなら、設定する価値があります。ただし、Claudeのデザイン判断の質は変わりません。そこを補うのがSkillファイルです。まずはDenholm - UX/UI Product Designer（$19）から始め、トークンやコンポーネントが課題になったら、$19のVashti - Design Systems Architectを追加してください。
Figma MCP：よくある質問
Figma MCPは無料ですか？
このプロトコルはオープン標準で、サーバー自体は通常無料でインストールできます。必要なのは、ファイルへのアクセス権を持つFigmaアカウントと、MCPをサポートするAIクライアントです。AIクライアントによっては、これを有用にする機能に有料プランが必要なため、費用はコネクターではなくそちらにかかります。
MCPを通じてClaudeにFigmaファイルを編集させられますか？
選択した特定のサーバーが対応を明記していない限り、使えないものと考えてください。これらのコネクターの多くは、構造、値、コンテンツを抽出する読み取り用に作られています。書き込みアクセスはより希少で不安定なため、実際の作業ファイルではなく複製ファイルでテストすべきです。
Figma MCPはClaude Codeで使えますか？
はい。Claude Codeは一般的にMCPサーバーをサポートしており、デザインからコードへの作業で人気の組み合わせになっているのはまさにそのためです。一方でフレームを読み取り、もう一方でコンポーネントを書き込む作業を、同じセッション内で行えます。Claude Desktopや、AI対応エディターの多くにも同じことが当てはまります。
Figma MCPを設定していても、デザインSkillは必要ですか？
これらは異なる質問に答えるものです。MCPはClaudeが見られるものを決めます。SkillはClaudeが見たものをどう扱うかを決めるため、両者は競合するのではなく併用できます。2つのアプローチをClaude SkillsとMCPの比較で直接比較しました。