Framelink Figma MCP Server

このModel Context Protocolサーバーを使うと、Cursor、Windsurf、ClineなどのAI搭載コーディングツールから、Figmaファイルにアクセスできます。

CursorがFigmaのデザインデータにアクセスできると、スクリーンショットを貼り付けるといった別の方法と比べて、デザインを正確に一度の指示で実装する能力がはるかに向上します。

クイックスタートの手順はこちら →

デモ

Figmaのデザインデータを使ってCursorでUIを構築するデモを見る

仕組み

1. IDEのチャットを開きます（例：Cursorのエージェントモード）。
2. Figmaファイル、フレーム、またはグループへのリンクを貼り付けます。
3. Figmaファイルに対して実行したいこと（例：デザインの実装）をCursorに依頼します。
4. Cursorは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"]
    }
  }
}

Windows

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

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

スターの推移

詳細情報

Framelink Figma MCPサーバーはシンプルながら強力です。Framelinkのサイトでさらに詳しく学び、最大限に活用しましょう。