MCP サーバー　Figma

Figma MCP サーバー

Figma のデザイン情報をコーディングエージェントに渡す MCP サーバー。選んだフレームからのコード生成や、キャンバスへの書き込みもできる。

公式ページ ↗ドキュメント ↗
種類
MCP サーバー
提供元・作者
Figma
ライセンス
—
使えるところ
Claude Code・VS Code

何をするものか

どんなものか

Figma が提供する MCP サーバーです。Figma がホストするリモートサーバー（https://mcp.figma.com/mcp、推奨）と、Figma デスクトップアプリで動くデスクトップサーバーがあります。

できること

  • 選んだフレームからのコード生成と、Code Connect による一貫したコード
  • 変数・コンポーネント・レイアウトなどのデザイン情報の取り出し
  • Design・FigJam・Slides のキャンバスへのネイティブな書き込み（リモートサーバーのみ）
  • 動いている Web の UI からのデザイン作成

必要なプラン・シート

MCP サーバーのガイドは全プランが対象です。デスクトップサーバーは Professional 以上のプランの Dev または Full シートが必要です。キャンバスへの書き込みは、下書き以外に書くには Full シートが必要で、ベータ期間中は無料とされています。

こんな作業に

こんな作業に

  • デザインからのコード生成
  • 変数・コンポーネント・レイアウト情報の取り出し
  • 動いている Web 画面からのデザイン作成

入れ方

Claude Code（プラグインで入れる・推奨）

claude plugin install figma@claude-plugins-official

Claude Code を再起動し、/plugin の Installed タブで figma を選んでサインインし、ブラウザで Allow access を押します。

Claude Code（手動で追加する）

claude mcp add --transport http figma https://mcp.figma.com/mcp

新しいセッションで /mcp → figma → Authenticate を選び、ブラウザで許可します。全プロジェクトで使う場合は --scope user を付けます。

詳しい情報

動く環境
CLI、IDE、デスクトップ
料金
無料枠あり

内容は公式ドキュメントにもとづきます。更新されていることがあるため、使う前にリンク先で確かめてください。