glips/figma-context-mcp
Developer toolsこのページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る
CursorのようなAIコーディングエージェントにFigmaレイアウト情報を提供するMCPサーバー
概要
Figma用のFramelink MCP コーディングエージェントにFigmaデータへのアクセスを与えましょう。どんなフレームワークでもワンショットでデザインを実装できます。 このModel Context Protocolサーバーで、カーソルやその他のAI搭載のコーディングツールにFigmaファイルへのアクセスを与えましょう。 CursorがFigmaのデザインデータにアクセスできる場合、スクリーンショットを貼り付けるなどの代替方法よりも、一撃で正確にデザインを撮る能力があります。 Figmaの設計データを使ってカーソルでUIを構築するデモをご覧ください 1. IDEのチャットを開く(例:カーソルのエージェントモード)。2. Figmaファイル、フレーム、グループへのリンクを貼り付ける。3. カーソルにFigmaファイルで何かを依頼する—例えば設計の実装。4. カーソルはFigmaから関連するメタデータを取得し、それを使ってコードを書く。 このMCPサーバーはCursorでの使用を特別に想定して設計されています。Figma APIからコンテキストを入力する前に、応答を簡略化・翻訳し、モデルに最も関連性の高いレイアウトやスタイリング情報のみが提供されます。
概要（AI 翻訳）
Figma用のFramelink MCP コーディングエージェントにFigmaデータへのアクセスを与えましょう。どんなフレームワークでも一度に設計を実装できます。
このModel Context Protocolサーバーで、カーソルやその他のAI搭載のコーディングツールにFigmaファイルへのアクセスを与えましょう。
CursorがFigmaの設計データにアクセスできる場合、スクリーンショットを貼り付けるなどの代替方法よりも、一撃で正確にデザインを撮るのがはるかに優れています。
クイックスタートの手順はこちらをご覧ください→
デモ
Figmaの設計データを使ってカーソルでUIを構築するデモをご覧ください
仕組み
- IDEのチャットを開く(例:カーソルのエージェントモード)。
- Figmaファイル、フレーム、グループへのリンクを貼り付けます。
- カーソルにFigmaファイルに対して何かを依頼します。例えば、デザインの実装などです。
- カーソルはFigmaから関連するメタデータを取得し、それを使ってコードを書きます。
このMCPサーバーはCursorでの使用を特別に想定して設計されています。Figma APIからコンテキストを入力する前に、応答を簡略化・翻訳し、モデルに最も関連性の高いレイアウトやスタイリング情報のみが提供されます。
モデルに与えるコンテキストの量を減らすことで、AIの精度が高まり、応答がより関連性が高まります。
始めて
このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。
README
以下は原文 README の抜粋です。原文を見る。
Give Cursor and other AI-powered coding tools access to your Figma files with this Model Context Protocol server.
When Cursor has access to Figma design data, it’s way better at one-shotting designs accurately than alternative approaches like pasting screenshots.
See quickstart instructions →
Demo
Watch a demo of building a UI in Cursor with Figma design data
How it works
- Open your IDE’s chat (e.g. agent mode in Cursor).
- Paste a link to a Figma file, frame, or group.
- Ask Cursor to do something with the Figma file—e.g. implement the design.
- Cursor will fetch the relevant metadata from Figma and use it to write your code.
This MCP server is specifically designed for use with Cursor. Before responding with context from the Figma API, it simplifies and translates the response so only the most relevant layout and styling information is provided to the model.
Reducing the amount of context provided to the model helps make the AI more accurate and the responses more relevant.
Getting Started
Many code editors and other AI clients use a configuration file to manage MCP servers.
The figma-developer-mcp server can be configured by adding the following to your configuration file.
インストール
npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio設定
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}