この記事の内容
Figma MCPは、AIクライアントがFigmaデザインのコンテキストを扱うための接続方法です。読み取りや変更の範囲は、クライアント、ファイル権限、ワークスペース設定で変わります。最初に使うファイルへ安全に接続しましょう。
要点:対応しているクライアントなら、まずFigmaのRemote MCPを試します。Desktop MCPは公式手順または組織の要件がある場合だけ選び、知らない第三者設定へトークンを貼り付けないでください。
1. Remote MCP:最初に確認する接続
- FigmaのFigma MCP Server公式ドキュメントを開き、利用するクライアントが対応しているか確認する。
- 対象ファイルを開けるFigmaアカウントでサインインする。リンクを知っているだけでは編集権限にならない。
- MCPクライアントの追加・接続フローを開始し、Figmaの認証画面で要求されるスコープを確認してから承認する。
- まず「選択したフレームを要約し、コンポーネントを列挙する」のような読み取り専用の依頼を送り、ファイル名、ページ、選択範囲を照合する。
- 編集するときは小さく元に戻せる変更を一つ依頼し、Figmaで結果を確認する。書き込みごとに明示承認が必要なクライアントもある。
2. Desktop MCP:必要な場合だけ使う
デスクトップクライアントや組織固有のコネクターを使うチームもあります。古い記事の設定をコピーせず、現在のクライアント公式手順に従ってください。ローカルランタイム、承認済みクライアント、アクセストークンが必要な場合があります。必須フィールドとトークンの有効期限はクライアントごとに違うため、秘密情報ストアや環境変数で管理し、公開リポジトリやスクリーンショットに残さないでください。
3. MCPとAPIは別物
- API:文書化されたエンドポイントへ定義済みのリクエストを送り、レスポンスを受け取る仕組み。
- MCP:MCPホストがAIクライアントへツールとコンテキストを公開する仕組み。モデルは接続サービスの権限と承認ルールの範囲で動作する。
MCPを接続しても、すべてのページ、コンポーネント、チームライブラリへ自動的にアクセスできるわけではありません。権限エラーは第二の秘密情報を追加するより、Figmaのファイルやチーム設定を確認することで解決できることが多いです。
4. 安全なdesign-to-codeフロー
- 書き込みテストの前に作業ファイルを複製またはブランチ化する。
- 変更前にクライアントへファイル、ページ、フレームを特定させる。
- 「ボタンの角丸を8pxにし、ラベルは変えない」のように受け入れ条件を明示して小さな変更を依頼する。
- Figmaでレイアウト、タイポグラフィ、変数、コンポーネント、プロトタイプリンクを確認する。
- クライアントのバージョン、日付、ファイル権限、結果を記録し、他のメンバーが再現できるようにする。
5. トラブルシューティング
Figmaのツールが一覧に出ない
クライアントの対応状況を確認し、更新、再ログイン、現在のワークスペースでMCP接続が有効かを確認します。
読み取りはできるが編集できない
ファイルの編集権限とクライアントの書き込み承認を確認します。読み取り専用接続が書き込み可能だと推測してはいけません。
リクエストが大きすぎる
選択範囲を限定し、1ページまたは1フレームずつ依頼します。大きなファイルはクライアントのコンテキストやリクエスト上限を超える場合があります。
秘密情報が漏えいした
発行元サービスで直ちに失効させ、ログから削除し、ローテーションしてから再接続します。
6. Pixsoの位置づけ
Pixsoは別の共同UIデザインワークスペースです。AI実験の後にUI、プロトタイプ、handoffを仕上げるなら、Pixsoワークスペースを開き、アカウントで現在のプランと権限を確認してください。PixsoのMCPやAIコネクターは独立した機能として扱い、Figma MCPの設定がそのまま移行すると考えず、現行ドキュメントと承認範囲を確認します。
参照
一次情報:Figma MCP Server公式ドキュメント。