Figma MCP Server

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

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

デモ

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

Related MCP server: Figma MCP Server

仕組み

1. IDE のチャットを開きます (例: カーソルのエージェント モード)。

2. Figma ファイル、フレーム、またはグループへのリンクを貼り付けます。

3. Cursor に Figma ファイルで何かを実行するように指示します (例: デザインの実装)。

4. カーソルは 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 のサイトで詳細をご確認いただき、最大限に活用してください。

スポンサー

🥇 ゴールドスポンサー

🥈 シルバースポンサー

🥉ブロンズスポンサー

😻 少額の支援者