https://github.com/glips/figma-context-mcp
MCP server to provide Figma layout information to AI coding agents like Cursor
https://github.com/glips/figma-context-mcp
ai cursor figma mcp typescript
Last synced: about 1 month ago
JSON representation
MCP server to provide Figma layout information to AI coding agents like Cursor
- Host: GitHub
- URL: https://github.com/glips/figma-context-mcp
- Owner: GLips
- License: mit
- Created: 2025-02-13T02:55:06.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-05-06T05:23:32.000Z (about 2 months ago)
- Last Synced: 2025-05-13T17:13:13.493Z (about 2 months ago)
- Topics: ai, cursor, figma, mcp, typescript
- Language: TypeScript
- Homepage: https://www.framelink.ai/
- Size: 437 KB
- Stars: 6,701
- Watchers: 44
- Forks: 529
- Open Issues: 21
-
Metadata Files:
- Readme: README.ja.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Framelink Figma MCP サーバー
🌐 利用可能な言語:
English |
한국어 (Korean) |
中文 (Chinese)
コーディングエージェントにFigmaデータへのアクセスを提供。
ワンショットで任意のフレームワークにデザインを実装。
[Cursor](https://cursor.sh/)と他のAI搭載コーディングツールに、この[Model Context Protocol](https://modelcontextprotocol.io/introduction)サーバーを通じてFigmaファイルへのアクセスを提供します。
CursorがFigmaデザインデータにアクセスできる場合、スクリーンショットを貼り付けるなどの代替アプローチよりも**はるかに**正確にワンショットでデザインを実装できます。
クイックスタートガイドを見る →
## デモ
[FigmaデザインデータでCursorでUIを構築するデモを見る](https://youtu.be/6G9yb-LrEqg)
[](https://youtu.be/6G9yb-LrEqg)
## 仕組み
1. IDEのチャットを開きます（例：Cursorのエージェントモード）。
2. Figmaファイル、フレーム、またはグループへのリンクを貼り付けます。
3. CursorにFigmaファイルで何かをするように依頼します（例：デザインの実装）。
4. CursorはFigmaから関連するメタデータを取得し、コードを書くために使用します。
このMCPサーバーは、Cursorで使用するために特別に設計されています。[Figma API](https://www.figma.com/developers/api)からコンテキストを応答する前に、応答を簡素化して翻訳し、モデルに最も関連性の高いレイアウトとスタイリング情報のみを提供します。
モデルに提供されるコンテキストの量を減らすことで、AIの精度を高め、応答をより関連性のあるものにするのに役立ちます。
## はじめに
多くのコードエディタやその他のAIクライアントは、MCPサーバーを管理するために設定ファイルを使用します。
`figma-developer-mcp`サーバーは、以下を設定ファイルに追加することで設定できます。
> 注：このサーバーを使用するには、Figmaアクセストークンを作成する必要があります。Figma APIアクセストークンの作成方法については[こちら](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)をご覧ください。
### MacOS / Linux
```json
{
"mcpServers": {
"Framelink Figma MCP": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
```
### Windows
```json
{
"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ドキュメント](https://www.framelink.ai/docs/quickstart?utm_source=github&utm_medium=readme&utm_campaign=readme)を参照してください。
## スター履歴
## 詳細情報
Framelink Figma MCPサーバーはシンプルですが強力です。[Framelink](https://framelink.ai?utm_source=github&utm_medium=readme&utm_campaign=readme)サイトで詳細情報をご覧ください。