あやね
デザインの現場でも、AIと一緒に作業するのが当たり前になってきました。「Figma MCP」という言葉を、SNSやデザイン系のコミュニティで見かけた人も多いのではないでしょうか。今回は、そもそもMCPとは何なのかという基本の部分から、Figma MCPで実際にできること、導入するときによくあるつまずき、そして料金プランに縛られず試せるPixso MCPという選択肢まで、順を追って紹介します。
MCP（Model Context Protocol）とは何か
MCPとは、Model Context Protocolの略で、AIモデルが外部のデータやツールと安全にやり取りするための、共通のルールのようなものです。よく「AIのためのUSB-C」と呼ばれていて、これがなかなか分かりやすいたとえだと思います。USB-Cが1本のケーブルで、いろいろなメーカーの機器を同じ規格でつなげられるように、MCPも1つの決まった方法で、AIとさまざまなアプリやツールをつなげられるようにする仕組みです。
たとえばClaudeのようなAIに「このデザインを見て、コードにして」とお願いしたいとき、AIはFigmaの中にあるデータ（コンポーネントの構造や、色、余白のルールなど）を、そのままでは読み取れません。MCPは、そのAIとFigmaのようなツールをつなぐ通り道を用意してくれる仕組みです。この通り道があることで、AIはデザインの中身を正しく理解した上で、作業を進められるようになります。
この仕組みは、もともとAnthropicが2024年の夏ごろに、Claude Desktopが手元のファイルなどをもっと扱いやすくするために作り始めたものです。プログラミングの世界で使われている「Language Server Protocol」という、いろいろなプログラミング言語に共通の便利機能（コード補完など）を提供する仕組みからヒントを得ていると言われています。その後、この考え方はオープンな標準として公開され、今ではCursorやWindsurfなど、多くのAI開発ツールが対応するようになりました。
もう少し仕組みの中身に踏み込むと、MCPには3つの役割が登場します。ひとつは「ホスト」で、これはClaude DesktopやCursorのような、私たちが実際に使うAIツールそのものを指します。もうひとつは「クライアント」で、ホストの中でMCPサーバーとの通信を担当する部分です。そして「サーバー」は、FigmaやGoogle Driveのような外部のツール側に用意されていて、AIが使えるデータや機能を提供します。私たちが普段目にするのは主にホストの部分ですが、裏側ではこの3つがやり取りをしながら、AIに必要な情報を届けています。
似た言葉に「API」がありますが、こちらは特定の機能を呼び出すための、あらかじめ決まったやり取りの方法を指します。違いを一言でいうと、APIはツールごとに少しずつ仕様が違うので、新しいツールとつなげるたびに、開発者はそのための専用のコードを書く必要がありました。MCPは、この「つなぎ方」そのものを共通化してしまおうという発想です。一度MCPに対応させておけば、あとから新しいAIツールが出てきても、比較的スムーズに連携できるようになります。
Figma MCPでできること
Figma MCPを使うと、AIエージェントがFigma上で選んだフレームやコンポーネントの情報を読み取り、それをもとにコードを書いたり、デザインの内容を説明したりできるようになります。具体的には、次のようなことができます。
フレームやコンポーネントから、コードを自動で生成する Figma上で選んだ範囲を、そのままコンポーネントのコードとして書き出せます。初期状態ではReactとTailwind CSSの組み合わせで出力される仕組みになっていて、そこから自分のプロジェクトで使っているフレームワーク（Vueだったり、CSS Modulesだったりします）に合わせて、AI側で変換していく、という流れになります。つまり、最初から自分のプロジェクトにぴったりのコードがそのまま出てくるわけではなく、いったん共通形式で受け取ってから、AIが「翻訳」してくれるイメージです。
変数やレイアウトの情報を、開発環境にそのまま取り込む 色、フォント、余白といった、いわゆるデザイントークンと呼ばれる情報を、値だけでなく「どういう意味を持つ値なのか」というところまで含めて取り込めます。これにより、AIが生成するコードも、ただ見た目が似ているだけでなく、デザインシステムのルールに沿ったものになりやすくなります。VS CodeやCursorのようなエディタの中で、デザインの詳細をいちいち確認しに行かなくても、必要な情報がその場で手に入るのは、実務上かなり助かるポイントです。
画面のスクリーンショットを取得して、見た目のズレを防ぐ コードだけでなく、選んだ範囲の見た目そのものをスクリーンショットとして取得する機能もあります。生成されたコードと、実際のデザインを見比べながら確認できるので、レイアウトの崩れなどに気づきやすくなります。
実際のコンポーネントとコードを紐づけて、デザインとコードのズレを防ぐ すでに実装済みのコンポーネントがある場合、それをFigma側のコンポーネントと対応づけておくことができます。こうしておくと、次に似たようなコンポーネントを生成するときに、ゼロから作るのではなく、既存のコードを再利用する形で出力してくれるようになり、コードベース全体の一貫性を保ちやすくなります。
こうした機能は、ひとつひとつを個別に呼び出すというより、AIツール側のチャットに「このデザインをコードにして」と話しかければ、必要な機能を自動的に選んで使ってくれる、という形で提供されています。細かい機能名を全部覚えておく必要はなく、まずは触りながら感覚をつかんでいくのがよいと思います。
接続の方法には、大きく分けて2つのタイプがあります。ひとつは「リモート型」で、Figma側が用意しているサーバーに、ブラウザ経由で直接つなぐ方法です。Figmaのデスクトップアプリを使っていない人や、ブラウザ中心で作業したい人に向いています。フレームや画面のリンクをコピーして、CursorやClaude Codeのようなツールに貼り付けるだけで、その部分の情報をAIに渡せます。デスクトップアプリのインストールが不要という点も、リモート型を選ぶ理由のひとつになります。
もうひとつは「デスクトップ型」で、Figmaのデスクトップアプリを通じて、自分のパソコンの中でMCPサーバーを動かす方法です。デスクトップアプリを普段から使っている人や、画面上でレイヤーやフレームを直接選びながら作業したい人には、こちらのほうが操作の感覚に近いかもしれません。どちらを選んでも、基本的にできることの多くは共通していますが、細かい機能に多少の違いがあるので、自分の作業スタイルに合わせて選ぶとよいでしょう。迷ったら、まずは設定が手軽なリモート型から試してみて、必要になったらデスクトップ型に切り替える、という進め方でも問題ありません。
使い方の細かいコマンドや設定項目は、時期によって更新されることも多いため、実際に導入する際は、Figmaの公式ドキュメントを確認しながら進めるのが、いちばん確実で分かりやすい方法です。
実際に使ってみると分かること
Figma MCPを実務で試してみた人たちの話を聞くと、ひとつ興味深いポイントがあります。それは、AIに渡す情報（コンテキスト）は、多ければ多いほどよいわけではない、ということです。
AIが一度に考えられる情報量には限りがあり、それを超えて詰め込んでしまうと、かえって事実と違う内容を作り出してしまう、いわゆる「ハルシネーション」が起きやすくなります。逆に言うと、Figmaのデザインをきちんと整理し、渡す情報を必要な範囲に絞ってあげることで、AIが生成するコードの精度がぐっと上がるということです。これは、AIに丸投げすれば終わり、という話ではなく、デザインの作り方そのものにも気を配る必要がある、ということを教えてくれます。
具体的には、オートレイアウトがきちんと設定されているか、余白のルールが構造化されているかといった、これまでもエンジニアに渡すときに気をつけていたポイントが、AIに渡すときにも同じように重要になってきます。逆にいえば、普段からきれいに整理されたデザインを作れているチームほど、Figma MCPの恩恵を受けやすいとも言えます。
開発のスピードという面でも、変化を感じている現場は少なくないようです。これまで人が時間をかけて行っていた実装作業の一部が、Figma MCPを使うことで大幅に短縮できたという声もあり、その分の時間を、デザインの議論やユーザー体験の改善など、より大事な部分に使えるようになった、という受け止め方をしているチームもあります。
Figmaを使う上で気になるポイント
ここまで読んで、「便利そうだけど、自分にもできるかな」と感じた方もいるかもしれません。実際、Figma MCPを導入するときによく聞かれる悩みが、いくつかあります。
ひとつは、設定の手間です。使う環境やエディタによって、接続の方法や設定ファイルの書き方が少しずつ違い、慣れるまでは戸惑うことがあります。リモート型とデスクトップ型のどちらを選ぶべきか迷う、という声もよく聞きますし、エンジニアが一人で試すだけならまだしも、チーム全員の環境を揃えようとすると、それなりに調整の手間がかかります。特にVS CodeとCursorのように、設定ファイルの書き方そのものが違うエディタが混在しているチームでは、最初のセットアップの段階で、誰かがつまずいたときにサポートする体制も考えておいたほうがよいでしょう。
もうひとつは、料金面です。Figma自体は無料プランでも使えますが、機能によっては有料プランが前提になっていることがあり、チームで本格的に使おうとすると、コストが気になってくる場合もあります。個人でちょっと試してみたいだけなのに、まずアカウントのプランから検討しないといけない、というのは、最初の一歩としては少しハードルに感じられるかもしれません。
さらに、これはFigma MCPに限った話ではないのですが、AIが生成したコードをそのまま本番環境に使うのは、現実的には難しい場合が多いです。レイヤーの構造がきれいに整理されたデザインであれば、かなり完成度の高いコードが出てくる一方で、複雑なレスポンシブ対応や、既存のビジネスロジックとのつなぎ込みは、結局のところ人の手による調整が必要になります。「AIが全部やってくれる」という期待値のまま導入すると、思っていたほど楽にならなかった、というギャップを感じることもあるようです。むしろ、簡単なUIパーツの実装や、プロトタイプをすばやく形にする場面で使う、という位置づけで考えるほうが、現実的な使い方に近いと思います。
こうした点がハードルに感じられる方には、Pixsoが提供しているMCPも、選択肢のひとつとして検討してみる価値があります。
無料で試せる選択肢：Pixso MCP
Pixsoは、Figmaと同じようにデザインを作成・管理できるツールで、独自のMCP機能を用意しています。特徴は、料金プランに縛られにくく、比較的シンプルな手順で導入できる点です。接続の方法は、Figmaと同じように、大きく分けてローカル型とリモート型の2種類があります。
ローカルMCP
ローカルMCPは、自分のパソコンの中でMCPサーバーを動かす方法です。Node.jsが動く環境があれば、Pixsoが提供しているMCPサーバーを導入し、ローカルホスト経由でデザインの情報をリアルタイムにやり取りできます。
この方法のメリットは、応答が速く、デザインデータが外部のサーバーを経由しないという安心感があることです。「まずは個人の作業や検証で試してみたい」「デザインデータの取り扱いには特に気をつけたい」という方には、ローカルMCPが向いています。
リモートMCP
リモートMCPは、デザインツールとAIの間に、専用のサーバーを立てて運用する方法です。チームで一緒に使いたい場合や、より高性能なAIモデルと安定した形でつなげたい場合に向いています。
接続する際は、Pixso側のリモートMCPの設定画面で、サーバーのURLと認証キーを入力する流れになります。細かい設定項目については、Pixsoの開発者向けドキュメントを見ながら進めると、迷わずに設定できるはずです。
Pixso MCPを選ぶメリット
ここまでの内容を踏まえると、Pixso MCPには次のようなメリットがあります。
まず、料金プランに縛られず、MCPの機能をひと通り試せることです。「まずは無料で使い勝手を確かめたい」というニーズに合っています。AIとデザインツールを連携させる、という体験そのものが初めての方にとって、いきなり有料プランを検討するのはハードルが高いものです。Pixso MCPであれば、そのハードルを下げた状態で、AIにデザインを読み取らせるという感覚を、実際に手を動かしながら確かめられます。
次に、ローカルとリモートを状況に応じて選べる柔軟さです。個人での検証はローカルで、チームでの本格運用はリモートで、というように、規模やフェーズに合わせて使い分けられます。たとえば、まずは自分ひとりでローカルMCPを試して、コードの生成結果や操作感に慣れてから、チームメンバーにも共有したいタイミングでリモートMCPに切り替える、という段階的な進め方ができるのも実務的で助かる点です。
また、デザインツール自体の学習コストという面でも、PixsoはFigmaと近い操作感で使えるように作られているため、Figmaに慣れている人であれば、あまり違和感なく移行しやすいというメリットもあります。Figmaのエコシステムを活かしたいけれど、まずはコストをかけずにMCPそのものの使い勝手を体感してみたい、という方の入り口としても向いています。実際に触ってみて、自分たちのワークフローに合うと感じたら、そのままPixsoを本格的に使い続けるのもよいですし、Figma MCPへの橋渡しとして位置づけることもできます。
よくある質問
Q. Figma MCPは完全に無料で使えますか？
MCPというプロトコル自体はオープンな仕組みなので、無料で公開されています。ただし、実際に接続するAIモデルの利用料や、Figma側のアクセス権限によっては、費用が発生することがあります。コストをできるだけ抑えたい場合は、Pixso MCPのような選択肢を検討してみるとよいでしょう。
Q. コードが分からないデザイナーでも、設定はできますか？
Figma MCPの設定には、多少ターミナル操作が必要になる場面があります。エディタの設定ファイルに接続先の情報を書き込んだり、認証のためのキーを発行したりと、普段コードを書かないデザイナーにとっては、少し身構えてしまう作業かもしれません。とはいえ、最近は画面の案内に沿って進められるガイドも増えてきていて、以前よりハードルは下がっています。もし社内にエンジニアがいる環境であれば、最初のセットアップだけ手伝ってもらい、そのあとの操作はチャットで指示を出すだけ、という分担にするのも現実的なやり方です。Pixsoの場合は、画面の指示に沿って進めるだけで設定が完了するよう作られているので、コードに慣れていない方でも一人で取り組みやすいはずです。
Q. Figma MCPとPixso MCPは、何が一番違うのですか？
基本的な仕組みそのものは共通していて、どちらもAIとデザインツールをつなぐという役割は同じです。大きな違いは、料金プランや設定の手軽さにあります。Figma MCPは機能が豊富な分、有料プランが必要になる場面があるのに対し、Pixso MCPは無料の範囲で試せる幅が広く、ローカル・リモートを気軽に切り替えられるのが特徴です。まずは無料で試してから、必要に応じてFigmaのエコシステムに移る、という使い方をしている人もいます。
まとめ
MCPは、一時的に注目されているだけの仕組みではなく、デザインとAIの関わり方そのものを変えていく技術だと感じています。Figmaが持つ豊富な機能とエコシステムを活かしたい方はFigma MCPを、まずは費用をかけずに試してみたい方や、ローカル・リモートを柔軟に使い分けたい方はPixso MCPを、というように、自分の状況に合った方を選んでみてください。
どちらを選ぶにしても、実際に手を動かしながら試すのがいちばんの近道です。まずは小さな作業からMCPを取り入れて、AIとの新しいデザインの進め方を体験してみてはいかがでしょうか。
