Figma MCPの使い方：接続からデザイン実装まで

Figma MCPは、AIエージェントがFigmaのデザイン情報を取得し、実装などの作業に利用するための接続手段です。使い始めるには、対応するAI開発ツールをFigma MCPに接続して認証し、対象フレームのリンクと実装条件を渡します。画面の画像だけでなく、レイアウトや変数、コンポーネントの情報を参照できる点が特徴です。

ただし、接続できれば完成した製品が自動でできるわけではありません。どの画面を対象にするか、既存の部品をどう使うか、操作がどう動くかを伝える必要があります。Pixsoでデザインを作成しているチームは、Pixso MCPによるデザインとAIの連携でも同じように、デザイン情報をAI開発の作業に渡せます。

MCP（Model Context Protocol）とは何か

MCPは、AIを利用するアプリが外部のデータやツールとやり取りするための共通プロトコルです。接続先のツールが提供する機能を、対応するAIアプリから利用できるようにします。「AIのためのUSB-C」と説明されることがありますが、共通になるのは接続の仕組みであり、どの製品でも同じ機能や利用条件になるわけではありません。

仕組みは、次の3つの役割に分けると理解しやすくなります。

• ホスト：利用者が操作するAIアプリです。指示を受け取り、必要な情報やツールを使って作業を進めます。
• クライアント：ホスト側でMCPサーバーとの接続を担当する部分です。
• サーバー：外部のサービスやデータにアクセスするための機能を提供します。Figma MCPなら、対象のデザイン情報を取得する機能などを提供します。

APIも外部の機能を呼び出す仕組みですが、MCPはAIアプリからツールを利用する際の共通のやり取りを定めます。APIを不要にするものではなく、MCPサーバーの内部でAPIが使われる場合もあります。認証、ファイルへのアクセス権限、送信するデータの扱いは、それぞれの接続先とAIサービスに従います。

また、デザイン情報を受け取ることと、その意図を正しく判断することは別です。MCPで色や余白の値を取得しても、その画面がどの業務に使われ、どの状態を表示するべきかは、要件として伝える必要があります。

Figma MCPでできることと接続の選び方

Figma MCPは、デザイン情報をAIエージェントに渡すための機能を提供します。デザインから実装を進める場面では、主に次の情報を使います。

フレームの構造とレイアウト

対象のフレームやレイヤーから、実装の手がかりになる構造を取得できます。get_design_contextの既定の出力はReactとTailwindですが、指示の中で別のフレームワークを指定できます。Reactを必ず一度生成しなければならない、という意味ではありません。

変数、スタイル、既存のコンポーネント

デザインに使われている変数やスタイルを参照し、コード側で利用する値と照らし合わせられます。Code Connectでデザインと実装済みコンポーネントの対応を設定している場合は、その対応情報も活用できます。名称が似ているだけで自動的に正しい部品に結び付くわけではないため、既存部品の場所や使い方も伝えます。

スクリーンショット

対象範囲のスクリーンショットを取得し、実装後の表示と比較できます。構造情報だけでは見落としやすい余白、折り返し、画像の見え方などを確認する材料になります。

各機能はFigma公式のツール一覧（英語）で確認できます。AIエージェントが必要なツールを選ぶこともありますが、対象のレイヤーや目的が曖昧なら、先に指示を具体化します。

リモート接続とデスクトップ接続

リモート接続では、対応クライアントをFigmaが提供するhttps://mcp.figma.com/mcpに接続し、Figmaアカウントで認証します。Figmaデスクトップアプリは不要で、対象フレームやレイヤーのリンクを渡して作業します。

デスクトップ接続では、Figmaデスクトップアプリを通じて接続し、アプリ上の選択範囲を利用できます。利用できる機能や必要な席種はリモート接続と同一ではありません。まずは使用するクライアントに対応した公式手順を選び、チームのアカウントと権限で利用できるかを確認します。

使い方：まず1つの画面を実装につなげる

最初の対象は、ファイル全体よりも、操作と内容が分かる1つのフレームが適しています。ここでは「通知を受け取る項目を選び、保存する設定画面」を例にします。完成画面を渡すだけでなく、選択を変更した状態と保存結果も説明します。

1. 対象フレームと要件を整理する

画面の見出し、設定項目、保存ボタンを意味の分かる名前で整理し、共通部品やAuto Layoutの設定を確認します。未使用の案を大量に含めず、今回実装する画面と必要な状態を選びます。

通知設定なら、保存前は変更を保留するのか、選ぶたびに保存するのかを決めます。画面が似ていても、この違いは実装に影響します。入力値や保存先など、デザインだけでは分からない条件も用意します。

2. MCPを接続して認証する

使用するAI開発ツールの設定からFigma MCPを追加し、認証を完了します。クライアントによって追加方法が異なるため、Figmaのリモート接続手順（英語）から自分のツールに対応する方法を選びます。接続後は、ツールが利用可能になっていることと、対象ファイルを開く権限があることを確認します。

3. フレームのリンクと実装条件を渡す

Figmaで対象のフレームやレイヤーを右クリックし、選択範囲へのリンクをコピーします。リモート接続では、このリンクを指示に含めます。ファイル名だけを渡すより、対象を特定しやすくなります。

このフレームの通知設定画面を、既存のReactプロジェクトに実装してください。既存のCheckboxとButtonを再利用し、色と余白はプロジェクトのトークンに合わせてください。チェックの変更は「保存」を押すまで確定しません。保存中は重複送信を防ぎ、失敗したら選択内容を残して再試行できるようにしてください。利用できるAPIが不明な場合は、実装前に確認してください。

この指示では、見た目に加えて、再利用する部品と保存時の振る舞いを指定しています。実際のプロジェクトでは、使用するフレームワーク、部品の場所、API、既存の実装方針に置き換えます。

4. 見た目と動作を分けて確認する

まず、余白、文字の折り返し、部品の使い方が元のデザインと合っているかを確認します。次に、キーボード操作、保存中の表示、失敗時の再試行、狭い画面幅での表示を試します。通知設定なら、保存に失敗したのに成功と表示されないこと、選択内容が失われないことが重要です。

比較の結果は「もっと近づけて」ではなく、「補足文が2行になると次の項目に重なる」「保存中でも再送信できる」のように具体的に伝えます。修正の対象を絞れば、すでに合っている箇所まで変えてしまうことを避けやすくなります。

接続できないとき、期待した実装にならないとき

問題が起きたら、接続、対象の指定、実装の判断を分けて調べます。デザインを大きく作り直す前に、どの段階で止まっているかを確認します。

Figmaのプランや席種による利用条件と、AI開発ツールの利用料は別です。MCPがオープンなプロトコルでも、接続するサービスがすべて無料になるわけではありません。また、生成されたコードには、既存のデータ処理や権限管理との接続、動作確認が必要です。MCPサーバーとAIエージェントの役割（英語）を分けて考えると、どこを人が指定する必要があるかが明確になります。

Pixso MCPでデザイン情報を渡す方法

Pixso MCPにもローカルとリモートの接続があります。どちらもPixsoのデザイン情報をAIエージェントの作業に利用するためのものですが、接続する場所と対象の指定方法が異なります。

ローカルMCP：デスクトップで開いているデザインを使う

PixsoのローカルMCPは、デスクトップクライアント内で動作します。対象のデザインファイルを開き、MCPを有効にして、AI開発ツールにクライアント上で表示される接続先を設定します。標準の接続先はhttp://127.0.0.1:3667/mcpですが、ポートが変わる場合があるため、実際の表示を使います。

選択中のレイヤーを利用する場合は、対象のコンテナを選び、そのファイルのタブを開いたままにします。別のファイルに切り替えたり、デスクトップクライアントを閉じたりすると、想定した対象を取得できなくなる場合があります。

ローカル接続という名称は、MCPサービスの実行場所を表します。接続先のAIサービスにどの情報を送るかは別の問題なので、「ローカルだから情報が外部に送られない」と判断せず、利用するAI環境と社内のデータ取り扱い方針を確認します。

リモートMCP：認証とレイヤーのリンクを使う

PixsoのリモートMCPはPixsoのクラウドサーバーで動作します。公開クラウド向けの接続先はhttps://pixso.net/mcpで、公式手順ではOAuth 2.1による認証が推奨されています。必要に応じてアクセストークンを使う方法もありますが、トークンを記事、共有画面、公開リポジトリなどに載せないようにします。

認証後は、対象のレイヤーを右クリックしてリンクをコピーし、AI開発ツールに渡します。ファイル共有リンクやページのリンクではなく、対象レイヤーを特定できるリンクを使います。プライベート環境では接続先が異なるため、公開クラウドのURLをそのまま設定せず、導入環境の手順に従います。

クライアント別の設定、必要なバージョン、ツールごとの権限は、Pixso開発者ドキュメント（英語）のMCPセクションで確認できます。

Figma MCPとPixso MCPを選ぶときの判断軸

最初に見るべきなのは、どちらが安そうかではなく、作業の元になるデザインとチームの実装環境がどこにあるかです。既存のFigmaファイルとCode Connectを中心に運用しているなら、その資産を使う流れから試します。Pixsoで画面や部品を管理しているなら、Pixso MCPで必要な範囲を渡す方が、作業対象をそろえやすくなります。

比較には、同じ種類の小さな画面を使います。通知設定画面なら、既存の部品を使えたか、画面の状態を表現できたか、修正指示を適切な範囲に適用できたかを見ます。接続にかかった時間だけでなく、取得できた情報、生成後の修正、チームで再現できる手順まで比べると、日常の作業に合うかを判断できます。

ローカルは個人用、リモートはチーム用と決めつける必要もありません。開いている画面を選択しながら作業したいか、リンクで対象を指定したいか、どの認証と運用方法を使うかで選びます。利用料や席種、権限は各サービスと組織の契約条件に分けて確認します。

よくある質問

Figma MCPは完全に無料で使えますか？

MCPというプロトコルの公開条件と、FigmaやAI開発ツールの利用条件は別です。使用する機能、アカウントのプランや席種、呼び出し上限を確認します。Pixso MCPについても、接続できることと、すべての機能を無制限に使えることは同じではありません。

コードを書かないデザイナーでも使えますか？

接続方法には画面から設定できるものもあります。デザイナーは対象フレーム、部品、画面の動作条件を整理し、開発者はプロジェクトの構成や実装ルールを確認する、という分担が可能です。生成されたコードを本番で使う際の確認は、開発担当者と行います。

スクリーンショットをAIに渡すだけの場合と何が違いますか？

スクリーンショットは見た目を伝えられますが、レイヤーや変数などの情報は画像から推測することになります。MCPでは接続先が提供する構造情報を取得できます。ただし、保存の条件やエラー時の動作など、デザインに書かれていない仕様は別に伝える必要があります。

デザイン情報と操作条件をそろえてから始める

Figma MCPを使う最初の一歩は、接続を増やすことよりも、実装したいフレームを1つに絞り、既存の部品と操作条件を伝えることです。取得したデザイン情報を基に実装し、見た目と動作を分けて確かめます。

Pixsoを使うチームも、同じ考え方でMCPを取り入れられます。まずは小さな設定画面を用意し、デザインの構造、使いたい部品、保存や取り消しの条件をそろえて、AI開発ツールとのやり取りを始めましょう。

PixsoでMCPに渡すデザインを準備する