{"id":29544582,"url":"https://github.com/ysocrius/talk-to-figma-cursor","last_synced_at":"2026-04-11T18:06:34.342Z","repository":{"id":303990087,"uuid":"1017414839","full_name":"ysocrius/Talk-to-Figma-Cursor","owner":"ysocrius","description":"Model Context Protocol (MCP) integration between Cursor AI and Figma","archived":false,"fork":false,"pushed_at":"2025-07-10T14:29:42.000Z","size":252,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-10T20:59:53.184Z","etag":null,"topics":["css","css3","cursor","figma","figma-design","figma-export","figma-free","figma-plugin","figma-to-code","figma-to-html","figma-to-react","figma-to-reactjs","front-end","frontend","html5","mcp","model-context-protocol","responsive","ui-ux"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ysocrius.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2025-07-10T13:51:42.000Z","updated_at":"2025-07-10T14:29:45.000Z","dependencies_parsed_at":"2025-07-10T21:00:04.185Z","dependency_job_id":"d37fbfd5-dcbb-46cf-84b8-30013ef2468a","html_url":"https://github.com/ysocrius/Talk-to-Figma-Cursor","commit_stats":null,"previous_names":["ysocrius/talk-to-figma-cursor"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/ysocrius/Talk-to-Figma-Cursor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ysocrius%2FTalk-to-Figma-Cursor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ysocrius%2FTalk-to-Figma-Cursor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ysocrius%2FTalk-to-Figma-Cursor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ysocrius%2FTalk-to-Figma-Cursor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ysocrius","download_url":"https://codeload.github.com/ysocrius/Talk-to-Figma-Cursor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ysocrius%2FTalk-to-Figma-Cursor/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265619529,"owners_count":23799445,"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":["css","css3","cursor","figma","figma-design","figma-export","figma-free","figma-plugin","figma-to-code","figma-to-html","figma-to-react","figma-to-reactjs","front-end","frontend","html5","mcp","model-context-protocol","responsive","ui-ux"],"created_at":"2025-07-17T15:02:37.031Z","updated_at":"2026-04-11T18:06:34.299Z","avatar_url":"https://github.com/ysocrius.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cursor Talk to Figma MCP\n\n\u003e **Note:** This repository was created solely to make the MCP integration work via the `npx` command instead of `bunx` for easier compatibility and setup.\n\nA Model Context Protocol (MCP) integration that allows Cursor AI to communicate with Figma for reading and modifying designs programmatically.\n\n---\n\n**Prerequisite:**\n\nYou need [Node.js](https://nodejs.org/) (which includes `npx`) installed on your system. Download and install it from the [official Node.js website](https://nodejs.org/). After installation, make sure the installation path for Node.js and npm is added to your system's environment PATH variable so you can run `node`, `npm`, and `npx` from any terminal window.\n\n\u003e **Default installation paths:**\n\u003e - **Windows:** `C:\\Program Files\\nodejs\\`\n\u003e - **macOS/Linux:** `/usr/local/bin/` (or wherever your package manager installs global binaries)\n\nYou can check your versions with:\n\n```bash\nnode -v\nnpx -v\n```\n\n---\n\n**Screenshots:**\n\n- ![Figma Plugin Localhost Enabled](screenshots/plugin_localhost.png)\n\n  *Figma plugin with 'Use localhost' enabled*\n- ![Running node_socket_server.mjs in Terminal](screenshots/npx_terminal.png)\n\n  *Running MCP via npx in terminal*\n- ![MCP Running via npx in cursor](screenshots/mcp_via_npx.png)\n\n  *MCP server running via npx*\n- ![MCP via cmd and npx in cursor](screenshots/mcp_via_cmd_npx.png)\n\n  *MCP server running via cmd and npx on Windows*\n\n---\n\n## Installation via NPX\n\nFollow these steps to install and set up the Cursor Talk to Figma MCP:\n\n### 1. Start the WebSocket Server\n\nThe WebSocket server facilitates communication between Cursor and Figma.\n\n1. Download the `node_socket_server.mjs` file to your computer\n2. Open a terminal/command prompt and navigate to the directory containing the file\n3. Start the server with Node.js:\n\n```bash\nnode node_socket_server.mjs\n```\n\nAlternatively, create a batch file (Windows) or shell script (Mac/Linux) for easy startup.\n\n### 2. Configure Cursor MCP Server\n\n1. In Cursor, navigate to Settings \u003e MCPServers\n2. Add a new MCP server configuration:\n\n```json\n{\n  \"mcpServers\": {\n    \"TalkToFigma\": {\n      \"command\": \"npx\",\n      \"args\": [\n        \"cursor-talk-to-figma-mcp@latest\"\n      ]\n    }\n  }\n}\n```\n\n\u003e **Tip:** You can also run this MCP using `cmd` for compatibility on Windows systems. Here is an example `mcpServers` configuration for Cursor:\n\u003e\n\u003e ```json\n\u003e {\n\u003e   \"mcpServers\": {\n\u003e     \"TalkToFigma-mcp\": {\n\u003e       \"command\": \"cmd\",\n\u003e       \"args\": [\n\u003e         \"bash\",\n\u003e         \"-c\",\n\u003e         \"cmd /c npx -y cursor-talk-to-figma-mcp@latest\"\n\u003e       ]\n\u003e     }\n\u003e   }\n\u003e }\n\u003e ```\n\u003e This allows you to invoke the MCP server through `cmd` using `npx`, which is especially useful if you encounter compatibility issues with other shells or environments on Windows.\n\n### 3. Install the Figma Plugin\n\nOption 1: Install from Figma Community\n1. Visit the [Cursor Talk to Figma MCP Plugin](https://www.figma.com/community/plugin/1485687494525374295/cursor-talk-to-figma-mcp-plugin) on Figma Community\n2. Click \"Install\" to add it to your Figma plugins\n\nOption 2: Install Locally\n1. In Figma, go to Plugins \u003e Development \u003e New Plugin\n2. Choose \"Link existing plugin\"\n3. Select the `manifest.json` file from the `src/cursor_mcp_plugin` directory\n4. The plugin will now appear in your Figma development plugins\n\n### 4. Connect Cursor to Figma\n\n1. Open Figma and run the Cursor Talk To Figma MCP Plugin\n2. In the plugin panel, ensure \"Use localhost\" is enabled on 3055 port\n3. Note the channel name shown in the green connected status message (e.g., \"959ykpvn\")\n4. In Cursor, join the channel by typing:\n\n```\nmcp_TalkToFigma-mcp_join_channel with channel: \"[CHANNEL_NAME]\"\n```\n\nReplace [CHANNEL_NAME] with the channel name from the Figma plugin.\n\n## Usage\n\nAfter connecting, you can use any of the available MCP commands in Cursor to interact with your Figma design. Here are some examples:\n\n```\nmcp_TalkToFigma-mcp_get_document_info\n```\nGets information about the current Figma document\n\n```\nmcp_TalkToFigma-mcp_get_selection\n```\nGets information about the currently selected elements\n\n```\nmcp_TalkToFigma-mcp_create_rectangle with x: 100, y: 100, width: 200, height: 100\n```\nCreates a new rectangle at the specified position and size\n\n```\nmcp_TalkToFigma-mcp_create_text with x: 100, y: 100, text: \"Hello World\"\n```\nCreates a new text element with the specified text\n\n## Available Commands\n\nThe MCP integration provides a wide range of commands for:\n\n- Reading document and selection information\n- Creating and modifying design elements\n- Working with text, colors, and styles\n- Managing auto-layout properties\n- Handling component instances and overrides\n- Creating and managing annotations\n- Exporting designs as images\n\nFor a complete list of available commands and their parameters, refer to the [full documentation](https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp).\n\n## Troubleshooting\n\n- If you see \"Must join a channel\" errors, make sure you've joined the correct channel from the Figma plugin\n- If the WebSocket server disconnects, restart it and reconnect the plugin\n- If Cursor can't find the MCP server, verify your MCPServers configuration\n- Ensure that port 3055 is available for the WebSocket server\n\n## License\n\n[MIT License](LICENSE) \n\n---\n\n## Credits\n\nAll credits go to [sonnylazuardi/cursor-talk-to-figma-mcp](https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp), as this project was cloned from their repository: https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git\n\nThis fork was made solely to enable MCP usage via `npx` instead of `bunx`.\n\nThis allows you to invoke the MCP server through `cmd` using `npx`, which is especially useful if you encounter compatibility issues with other shells or environments on Windows. ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fysocrius%2Ftalk-to-figma-cursor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fysocrius%2Ftalk-to-figma-cursor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fysocrius%2Ftalk-to-figma-cursor/lists"}