Figma MCPサーバー

デザイン中級トランスポート: stdio

Figma MCPサーバーはClaude CodeをFigma APIに接続し、ターミナルから直接デザイン・トゥ・コードワークフローを実現します。コンポーネント階層の検査、カラー・タイポグラフィ・スペーシングトークンの抽出、デザイン仕様の読み取り、Figmaモックアップに合ったフロントエンドコードの生成が可能です。ファイル、ページ、個別フレームの閲覧をサポートし、値を手動でコピーすることなくビジュアルデザインをピクセルパーフェクトな実装に変換できます。

FigmaデザインUIデザイントークンコード生成

インストール

claude mcp add figma -- npx -y figma-developer-mcp --token=your_figma_token

設定例

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--token=figd_your_personal_access_token"
      ]
    }
  }
}

対応機能

デザイン読み取り

アセットエクスポート

コンポーネント一覧

デザイントークン取得

コメント読み取り

デザイン編集

プロトタイプ作成

チーム管理

実行プレビュー

Figma MCPサーバー

Figma MCPサーバーについて

MCP（Model Context Protocol）サーバーは、Claude Codeを外部ツール、API、データソースと接続します。Figma MCPサーバーはデザインカテゴリの中級レベルMCPサーバーで、Claudeが実際のサービスと連携し、ライブデータへのアクセスや組み込み機能を超えたアクションを実行できるようにします。