figma-mcp-server

omiomiov3/figma-mcp-server

3.1

If you are the rightful owner of figma-mcp-server and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

The Figma MCP Server allows natural language manipulation of Figma design files using the Model Context Protocol.

Figma MCP Server

Claude Codeから自然言語でFigmaデザインファイルを操作できるMCP（Model Context Protocol）サーバーです。

できること

  • 🎨 デザイントークン（色、フォント、スペーシング）の抽出
  • 🧩 コンポーネント一覧の取得と詳細情報の確認
  • 💻 Vue.jsコンポーネントのprops自動生成
  • 📦 アイコンや画像のエクスポート（SVG/PNG/JPG）
  • 🏗️ レイアウト構造の分析とCSS変換
  • 🔤 テキストスタイルの取得
  • 🎯 CSS変数の自動生成

セットアップ

1. 環境変数の設定

cp figma-mcp-server/.env.example figma-mcp-server/.env

.envファイルを編集してFigma Personal Access Tokenを設定：

FIGMA_TOKEN=your-figma-personal-access-token

2. Dockerで起動

# MCPサーバーを起動
docker-compose up -d figma-mcp

# ログ確認
docker-compose logs -f figma-mcp

Claude Code設定

このプロジェクトには.mcp.jsonが含まれているため、Claude Codeが自動的にMCPサーバーを認識します。

確認方法

Claude Code内で /mcp と入力すると、「figma」サーバーが表示されます。

使い方

Claude Codeで自然言語で指示するだけです：

例

「https://www.figma.com/file/ABC123/Design このFigmaファイルを分析して」

「コンポーネント一覧を見せて」

「デザイントークンを抽出して」

「ボタンコンポーネントからVue propsを生成」

「CSS変数を作って」

「アイコンをSVG形式でエクスポート」

実践例

デザインシステムの実装

「このFigmaファイルからデザインシステムを実装したい」
→ デザイントークン抽出 → CSS変数生成 → コンポーネント作成

Vueコンポーネント作成

「ボタンコンポーネントをVueで実装して」
→ コンポーネント詳細取得 → props生成 → Vueコード作成

トラブルシューティング

MCPサーバーが接続できない場合

  1. Dockerコンテナが起動しているか確認：

    docker ps | grep figma-mcp

  2. コンテナを再起動：

    docker-compose restart figma-mcp

  3. Claude Code内で /mcp → 「Reconnect」をクリック

Figma APIエラー

  • Figma Personal Access Tokenが正しく設定されているか確認
  • ファイルへのアクセス権限があるか確認