Figma MCP サーバー

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Integrations

Enables Windsurf (a Codeium product) to connect to Figma design data through the MCP server for AI-powered code generation.
Provides access to Figma design data via the Figma API, allowing AI-powered coding tools to retrieve file metadata, node information, and design elements for code generation.

このモデルコンテキストプロトコルサーバーを使用して、 Cursorやその他の AI 搭載コーディングツールに Figma ファイルへのアクセスを許可します。

Cursor が Figma のデザインデータにアクセスできる場合、スクリーンショットを貼り付けるなどの他の方法よりも、デザインをワンショットで正確に作成する方がはるかに優れています。

デモ

Figmaのデザインデータを使ってCursorでUIを構築するデモをご覧ください

仕組み

IDE のチャットを開きます (例: カーソルのエージェントモード)。
Figma ファイル、フレーム、またはグループへのリンクを貼り付けます。
Cursor に Figma ファイルで何かを実行するように指示します (例: デザインの実装)。
カーソルは Figma から関連するメタデータを取得し、それを使用してコードを記述します。

このMCPサーバーは、Cursorとの使用に特化して設計されています。Figma APIからのコンテキストを返す前に、レスポンスを簡素化および変換し、最も関連性の高いレイアウトとスタイル情報のみがモデルに提供されます。

モデルに提供されるコンテキストの量を減らすと、AI の精度が向上し、応答の関連性が高まります。

はじめる

多くのコードエディターやその他の AI クライアントは、構成ファイルを使用して MCP サーバーを管理します。

figma-developer-mcpサーバーは、設定ファイルに以下を追加することで設定できます。

注意：このサーバーを使用するには、Figma アクセストークンを作成する必要があります。Figma API アクセストークンの作成方法については、こちらをご覧ください。

macOS / Linux

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

ウィンドウズ

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

または、 envフィールドにFIGMA_API_KEYとPORT設定することもできます。

Framelink Figma MCP サーバーの設定方法について詳しくは、 Framelink のドキュメントを参照してください。

スターの歴史

もっと詳しく知る

Framelink Figma MCPサーバーはシンプルながらも強力です。Framelink のサイトで詳細をご確認いただき、最大限に活用してください。

スポンサー

🥇 ゴールドスポンサー

🥈 シルバースポンサー

🥉ブロンズスポンサー

😻 少額の支援者

This server cannot be installed

-

security - not tested

A

license - permissive license

-

quality - not tested

Tools

Cursor がモデルコンテキストプロトコルを通じて Figma ファイルにアクセスできるようにすることで、コード生成のために設計データを正確に解釈して利用する能力が向上します。

Related Resources

Reddit Discussion about this server

Figma MCP Server