Claude Code に Figma を読ませるなら、MCP 単体ではなく公式プラグインで入れる
Figma の公式プラグインは、リモートの Figma MCP サーバーとスキルをまとめて入れる。claude mcp add で MCP だけ入れる方法もあるが、その場合スキルは付いてこない。
どんな時に使う？
- Figma のデザインやフレームのリンクを渡して、コードを書かせたい
- 前に MCP を手で設定したが、思ったほどデザインどおりにならなかった
手順
- 入れる:
claude plugin install figma@claude-plugins-official - Claude Code を再起動する
/plugin→ Installed → figma を選んで Enter → 認証 → ブラウザで Allow access- Figma のフレームやレイヤーのリンクをコピーし、「この画面を実装して」と頼む
- MCP だけ手で入れる場合:
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcpのあと/mcpで Authenticate。この方法ではスキルは入らない
注意点
- いいねした投稿（2026-02）のコマンドは
figma@claude-plugin-directoryだった。今の公式ヘルプではfigma@claude-plugins-official。入れる前に公式ヘルプで確かめる - Figma デスクトップアプリのローカルサーバー（
http://127.0.0.1:3845/mcp）を使う方法もある。こちらは Dev か Full のシートが必要 - 公式とは別に、southleft/figma-console-mcp というサードパーティ製の MCP もある（@ryo_dg が紹介）。公式ではないので、入れる前に何ができるかと権限を確かめる
- 画面の作り方の指示は UI は「App Bar + Drawer + Card Grid + Tabs」のように部品の名前で指示する
出典
- @miyaponmm · 2026-02-18
- @shin_sasaki19 · 2026-02-17
- @ryo_dg 2026-02-18（figma-console-mcp）: @ryo_dg · 2026-02-18
- Figma ヘルプ（Claude Code との連携）: help.figma.com
- Figma 開発者ドキュメント（リモートサーバーの設定）: developers.figma.com