Figma MCP Server (Framelink)注目

Figma MCP Server (Framelink) とは？

Figma MCP Server (Framelink) は、Figma のレイアウトとスタイルのデータを Cursor や Claude Code などの AI コーディングエージェントに渡すオープンソースの Figma MCP サーバーです。スクリーンショットから推測させるのではなく、貼り付けたリンクをもとにデザインを実装できます。

GLips によるコミュニティプロジェクトで、Figma 公式のサーバーではありません。npm パッケージ名は figma-developer-mcp、ライセンスは MIT です。モデルに渡す前に Figma REST API のレスポンスを整理・変換し、コードに必要なレイアウト、スタイル、コンテンツだけを残します。コンテキストが少ないほど出力の精度は上がります。

Figma MCP Server (Framelink) の使い方

前提条件：

• Node.js 20 以降（npx で実行します）。
• Figma のパーソナルアクセストークン。Figma の Settings → Security → Personal access tokens で作成します。Framelink のドキュメントに選択すべきスコープが記載されており、最低限必要なのは file_content:read と file_dev_resources:read です。

トークンは --figma-api-key=YOUR-KEY で渡すか、env ブロックで FIGMA_API_KEY に設定します。OAuth トークンも --figma-oauth-token または FIGMA_OAUTH_TOKEN で使えます。--stdio フラグを付けると、ローカルの stdio MCP サーバーとして動作します。

Claude Code

claude mcp add Framelink_Figma_MCP -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

Claude Desktop

Settings → Developer を開き、claude_desktop_config.json を編集して次を追加します：

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Cursor

Cursor Settings → MCP → Add new global MCP server から追加するか、~/.cursor/mcp.json を編集します（特定のプロジェクトだけに設定する場合は .cursor/mcp.json）。上と同じ JSON が使えます。環境変数を使う書き方もあります：

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

VS Code

"mcp": {
  "servers": {
    "Framelink_Figma_MCP": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windsurf

Windsurf では Claude Desktop と同じ mcpServers JSON を使います。

Windows ではほとんどのクライアントが npx を直接起動できません。"command": "cmd" に変更し、args の先頭に "/c", "npx" を追加してください。

使い方：Figma でフレームまたはグループを右クリックし、Copy/Paste as → Copy link to selection を選びます。そのリンクをエージェントのチャットに貼り付け、実装を依頼します。

Figma MCP Server (Framelink) の主な機能

• リンクから Figma のファイル、フレーム、グループを読み取ります。ファイルキーと node-id は URL から取得されます。
• Figma API の出力をレイアウト、スタイル、テキスト、コンポーネントのデータに絞り込み、トークン消費を抑えます。デフォルトの出力形式はコンパクトな tree で、--format=yaml や --format=json も選べます。
• 変更履歴によると、オートレイアウト、CSS Grid、リッチテキストのスタイル、グラデーション、エフェクト、ストロークに対応しています。
• SVG と PNG のアセットをプロジェクトにダウンロードできます。書き込み先は --image-dir 内に限られ、デフォルトは作業ディレクトリです。
• 読み取りだけが必要な場合は、--skip-image-downloads でダウンロードツール自体を無効にできます。
• ローカルの HTTP サーバーとしても動作します（StreamableHTTP は /mcp、デフォルトポートは 3333）。この場合、リクエストごとに独自の X-Figma-Token ヘッダーを送れます。
• 社内ネットワーク向けにプロキシ（--proxy、FIGMA_PROXY）に対応しています。
• 無料で、MIT ライセンスです。テレメトリーはデフォルトで有効で、--no-telemetry、FRAMELINK_TELEMETRY=off、DO_NOT_TRACK のいずれかで無効にできます。

Figma MCP Server (Framelink) のツール

このサーバーが提供するツールは 2 つです：

• get_figma_data：fileKey と任意の nodeId を受け取り、そのファイルまたはノードのレイアウト、コンテンツ、ビジュアル、コンポーネント情報を整理して返します。Figma のリンクを貼り付けたときにエージェントが呼び出すのはこのツールです。
• download_figma_images：画像の塗りやアイコンのノードを SVG または PNG（PNG のデフォルト倍率は 2x）としてエクスポートし、画像ディレクトリ内の localPath に保存します。生成されたコードから実際のアセットを参照できます。

Figma MCP Server (Framelink) のユースケース

• ランディングページのフレームをコンポーネント化する：「この Figma フレームを React と Tailwind で実装して：」。
• 既存のデザインシステムに合わせる：「既存の Button と Badge コンポーネントでこのカードを作って。余白は Figma に合わせて。」
• プレースホルダーではなく実際のアイコンや画像を使う：「このフレームのアイコンを public/icons にダウンロードして使って。」
• 出力が特定のフレームワークに依存しないため、1 つのデザインを SwiftUI、Vue、素の HTML/CSS など複数のスタックに移植できます。
• 実装をデザインと照合する：「このページを Figma フレームと比較して、余白や色の違いを挙げて。」

Figma MCP Server (Framelink) と代替ツールの比較

Figma には公式の Figma MCP server（旧称 Dev Mode MCP server）があります。形態は 2 つで、Figma アカウントでサインインして使うリモートサーバー（https://mcp.figma.com/mcp）と、Figma デスクトップアプリ経由で動くデスクトップサーバーです。デスクトップサーバーには有料プランの Dev シートまたは Full シートが必要です。公式サーバーのツールははるかに多く、get_design_context、get_screenshot、get_variable_defs、Code Connect 関連のツール、キャンバスへの書き込みツールなどがあります。Claude Code での設定コマンドは claude mcp add --transport http figma https://mcp.figma.com/mcp です。

パーソナルアクセストークンでローカルに動き、デスクトップアプリが要らない、読み取り中心の小さな figma context MCP が欲しいなら Framelink が向いています。出力はコンパクトで、どの MCP クライアントでも同じように動きます。Code Connect や変数が必要な場合、またはデザインを Figma に書き戻したい場合は、Figma 公式サーバーを選んでください。

Figma MCP Server (Framelink) のトラブルシューティング

• 403「Invalid scope(s)」または「Invalid token」：file_content:read と file_dev_resources:read を含むパーソナルアクセストークンを作り直し、設定にタイプミスやプレースホルダーの文字が残っていないか確認します。
• 403「File not exportable」：ファイルのオーナーが閲覧者にコピー・共有・エクスポートを許可する必要があります。または、ファイルを自分のワークスペースに複製します。
• 429／レート制限：Figma API の上限はファイルオーナーのプランとシートによって決まり、無料プランではリクエスト数がごくわずかです。ファイルを有料チームに移すか、時間をおいて再試行します。
• プロキシ環境での fetch failed／ECONNRESET：--proxy=http://your-proxy:8080 を追加するか、FIGMA_PROXY を設定します。--proxy=none を指定すると、プロキシ関連の環境変数を無視して直接接続します。
• Cannot find module エラー：クライアントを閉じて npx clear-npx-cache を実行し、もう一度開きます。