{"id":25807506,"url":"https://github.com/GLips/Figma-Context-MCP","last_synced_at":"2025-02-27T21:02:09.604Z","repository":{"id":277293449,"uuid":"931892749","full_name":"GLips/Figma-Context-MCP","owner":"GLips","description":"MCP server to provide Figma layout information to AI coding agents like Cursor","archived":false,"fork":false,"pushed_at":"2025-02-21T19:49:13.000Z","size":439,"stargazers_count":118,"open_issues_count":2,"forks_count":8,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-21T20:32:23.631Z","etag":null,"topics":["ai","cursor","figma","mcp","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GLips.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-13T02:55:06.000Z","updated_at":"2025-02-21T19:49:17.000Z","dependencies_parsed_at":"2025-02-14T12:32:36.418Z","dependency_job_id":null,"html_url":"https://github.com/GLips/Figma-Context-MCP","commit_stats":null,"previous_names":["glips/figma-context-mcp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GLips%2FFigma-Context-MCP","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GLips%2FFigma-Context-MCP/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GLips%2FFigma-Context-MCP/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GLips%2FFigma-Context-MCP/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GLips","download_url":"https://codeload.github.com/GLips/Figma-Context-MCP/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240271532,"owners_count":19774859,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","cursor","figma","mcp","typescript"],"created_at":"2025-02-27T21:01:34.785Z","updated_at":"2025-02-27T21:02:09.597Z","avatar_url":"https://github.com/GLips.png","language":"TypeScript","funding_links":[],"categories":["MCP Servers \u0026 Tools","Developer Tools","Data Access \u0026 Integration MCP Servers","MCP 服务器精选列表","TypeScript","📚 Projects (1974 total)","Community Servers","Legend","پیاده‌سازی‌های سرور","📦 Other","💻 \u003ca name=\"development-tools\"\u003e\u003c/a\u003eDevelopment Tools","MCP Servers","Mcp Servers","A01_文本生成_文本对话","Servers","Content Creation","Table of Contents","Uncategorized","可用服务","AI \u0026 ML (20)","🎨 Product / Design","🔌 External Integrations","服务器实现","🗂️ Extensions by Category","MCP Servers \u0026 Protocol","Other Domains","MCP Ecosystem","Extensions, Skills \u0026 Rules"],"sub_categories":["Browser \u0026 Automation","Design \u0026 UI","multimedia 多媒体与内容创作","MCP Servers","💻 \u003ca name=\"developer-tools\"\u003e\u003c/a\u003eDeveloper Tools","💻 \u003ca name=\"developer-tools\"\u003e\u003c/a\u003eابزارهای توسعه‌دهنده","💻 Developer Tools","integration","大语言对话模型及数据","Developer Tools","Other Tools and Integrations","Uncategorized","设计","Figma Integration","Browser and Web","系统与硬件","💼 Professional Apps","3D \u0026 Design Tools","Servers","Design \u0026 Visualization"],"readme":"# Figma MCP Server\n\nGive [Cursor](https://cursor.sh/) access to your Figma files with this [Model Context Protocol](https://modelcontextprotocol.io/introduction) server.\n\nWhen Cursor has access to Figma design data, it's **way** better at one-shotting designs accurately than alternative approaches like pasting screenshots.\n\nGet started quickly, see [Configuration](#configuration) for more details:\n\n```bash\nnpx figma-developer-mcp --figma-api-key=\u003cyour-figma-api-key\u003e\n```\n\n## Demo Video\n\n[Watch a demo of building a UI in Cursor with Figma design data](https://youtu.be/6G9yb-LrEqg)\n[![Watch the video](https://img.youtube.com/vi/6G9yb-LrEqg/maxresdefault.jpg)](https://youtu.be/6G9yb-LrEqg)\n\n\u003ca href=\"https://glama.ai/mcp/servers/kcftotr525\"\u003e\u003cimg width=\"380\" height=\"200\" src=\"https://glama.ai/mcp/servers/kcftotr525/badge\" alt=\"Figma Server MCP server\" /\u003e\u003c/a\u003e\n\n## How it works\n\n1. Open Cursor's composer in agent mode.\n1. Paste a link to a Figma file, frame, or group.\n1. Ask Cursor to do something with the Figma file—e.g. implement a design.\n1. Cursor will fetch the relevant metadata from Figma and use it to write your code.\n\nThis MCP server is specifically designed for use with Cursor. Before responding with context from the [Figma API](https://www.figma.com/developers/api), it simplifies and translates the response so only the most relevant layout and styling information is provided to the model.\n\nReducing the amount of context provided to the model helps make the AI more accurate and the responses more relevant.\n\n## Installation\n\n### Running the server quickly with NPM\n\nYou can run the server quickly without installing or building the repo using NPM:\n\n```bash\nnpx figma-developer-mcp --figma-api-key=\u003cyour-figma-api-key\u003e\n\n# or\npnpx figma-developer-mcp --figma-api-key=\u003cyour-figma-api-key\u003e\n\n# or\nyarn dlx figma-developer-mcp --figma-api-key=\u003cyour-figma-api-key\u003e\n\n# or\nbunx figma-developer-mcp --figma-api-key=\u003cyour-figma-api-key\u003e\n```\n\nInstructions on how to create a Figma API access token can be found [here](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens).\n\n### Running the server from local source\n\n1. Clone the [repository](https://github.com/GLips/Figma-Context-MCP)\n2. Install dependencies with `pnpm install`\n3. Copy `.env.example` to `.env` and fill in your [Figma API access token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens). Only read access is required.\n4. Run the server with `pnpm run dev`, along with any of the flags from the [Command-line Arguments](#command-line-arguments) section.\n\n## Configuration\n\nThe server can be configured using either environment variables (via `.env` file) or command-line arguments. Command-line arguments take precedence over environment variables.\n\n### Environment Variables\n\n- `FIGMA_API_KEY`: Your [Figma API access token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) (required)\n- `PORT`: The port to run the server on (default: 3333)\n\n### Command-line Arguments\n\n- `--version`: Show version number\n- `--figma-api-key`: Your Figma API access token\n- `--port`: The port to run the server on\n- `--stdio`: Run the server in command mode, instead of default HTTP/SSE\n- `--help`: Show help menu\n\n## Connecting to Cursor\n\n### Start the server\n\n```bash\n\u003e npx figma-developer-mcp --figma-api-key=\u003cyour-figma-api-key\u003e\n# Initializing Figma MCP Server in HTTP mode on port 3333...\n# HTTP server listening on port 3333\n# SSE endpoint available at http://localhost:3333/sse\n# Message endpoint available at http://localhost:3333/messages\n```\n\n### Connect Cursor to the MCP server\n\nOnce the server is running, [connect Cursor to the MCP server](https://docs.cursor.com/context/model-context-protocol) in Cursor's settings, under the features tab.\n\n![Connecting to MCP server in Cursor](./docs/cursor-MCP-settings.png)\n\nAfter the server has been connected, you can confirm Cursor's has a valid connection before getting started. If you get a green dot and the tools show up, you're good to go!\n\n![Confirming connection in Cursor](./docs/verify-connection.png)\n\n### Start using Composer with your Figma designs\n\nOnce the MCP server is connected, **you can start using the tools in Cursor's composer, as long as the composer is in agent mode.**\n\nDropping a link to a Figma file in the composer and asking Cursor to do something with it should automatically trigger the `get_file` tool.\n\nMost Figma files end up being huge, so you'll probably want to link to a specific frame or group within the file. With a single element selected, you can hit `CMD + L` to copy the link to the element. You can also find it in the context menu:\n\n![Copy link to Figma selection by right clicking](./docs/figma-copy-link.png)\n\nOnce you have a link to a specific element, you can drop it in the composer and ask Cursor to do something with it.\n\n## Inspect Responses\n\nTo inspect responses from the MCP server more easily, you can run the `inspect` command, which launches the `@modelcontextprotocol/inspector` web UI for triggering tool calls and reviewing responses:\n\n```bash\npnpm inspect\n# \u003e figma-mcp@0.1.0 inspect\n# \u003e pnpx @modelcontextprotocol/inspector\n#\n# Starting MCP inspector...\n# Proxy server listening on port 3333\n#\n# 🔍 MCP Inspector is up and running at http://localhost:5173 🚀\n```\n\n## Available Tools\n\nThe server provides the following MCP tools:\n\n### get_file\n\nFetches information about a Figma file.\n\nParameters:\n\n- `fileKey` (string): The key of the Figma file to fetch\n- `depth` (number, optional): How many levels deep to traverse the node tree\n\n### get_node\n\nFetches information about a specific node within a Figma file.\n\nParameters:\n\n- `fileKey` (string): The key of the Figma file containing the node\n- `nodeId` (string): The ID of the node to fetch\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGLips%2FFigma-Context-MCP","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGLips%2FFigma-Context-MCP","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGLips%2FFigma-Context-MCP/lists"}