Framelink Figma MCP Server

このModel Context Protocolサーバーを使うと、Cursorやほかの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 MCP for Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows

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

または、envフィールドでFIGMA_API_KEYとPORTを設定できます。

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

スターの履歴

詳細情報

Framelink MCP for Figmaはシンプルながら高機能です。最大限に活用するには、Framelinkのサイトで詳細をご覧ください。