shedytee/mcp-figma-augmentcode-integration
If you are the rightful owner of mcp-figma-augmentcode-integration and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.
This project demonstrates how to connect a Model Context Protocol (MCP) server to the Figma API and integrate it with Augment Code to enhance development workflows.
🚀 Figma MCP Server + Augment Code Integration
Easier option now available here: https://github.com/shedytee/Figma-MCP-Augment-Code-Guide-Local-HTTP-mode-/blob/main/README.md
This project shows how to connect a Model Context Protocol (MCP) server to the Figma API and integrate it with Augment Code to supercharge your development workflow.
✨ Features
✅ Builds an MCP server that:
- Queries Figma files
- Exposes Figma data to an MCP-compatible interface
- Integrates into Augment Code as a custom tool
✅ Uses:
📦 Setup Instructions
-
Clone the repository
git clone https://github.com/shedytee/mcp-figma-augmentcode-integration.git cd mcp-figma-augmentcode-integration -
Install dependencies
Install the required NPM packages:
npm install @modelcontextprotocol/sdk figma-js zod dotenv -
Configure environment variables
cp .env.example .envFill in:
FIGMA_TOKEN→ your Figma API tokenFIGMA_FILE_ID→ your Figma file IDMCP_PORT→ usually3000
-
Update
package.jsonIn your
package.json, add"type": "module"at the top level and astart:mcpscript under"scripts":{ "name": "mcp-figma-augmentcode-integration", "version": "1.0.0", + "type": "module", "scripts": { "start:mcp": "node figma-mcp-server.js" }, "dependencies": { "@modelcontextprotocol/sdk": "^1.17.1", "figma-js": "^1.16.1-0", "zod": "^3.25.76", "dotenv": "^17.2.1" } } -
Add startup log to
figma-mcp-server.jsEnsure your script ends with a console message so you see startup success. For example, after connecting:
const transport = new StdioServerTransport(); await server.connect(transport); + console.log(`MCP Server running on port ${MCP_PORT}`); -
Run the MCP server
npm run start:mcpYou should see:
MCP Server running on port 3000
⚙️ Connect to Augment Code
-
Open Augment Code → Workspace Settings → MCP
-
Add a new MCP server:
- Name:
figma - Command:
(runs from your workspace root)node figma-mcp-server.js
- Name:
-
Under Environment Variables, add:
FIGMA_TOKENFIGMA_FILE_IDMCP_PORT
-
Save and toggle ON the “figma” server.
Look for this in the logs:[dotenv@…] injecting env … MCP Server running on port 3000Once you see it, the icon will turn green.
💬 Example Prompts
See for ready-to-use chat prompts. Examples:
- Ask figma to get the full file data.
- Use figma to fetch the latest file from the Figma API.
- Ask figma for details about the component named
ButtonPrimary. - Use the figma tool to show all components in the design file.
🗂 Example Code
This repo includes , a working example of the MCP server wired to the Figma API.
To run locally:
npm run start:mcp
⚠ Important Notes
🛡️ Directories with spaces
If your workspace path includes spaces (e.g. My Projects), wrap the command argument in quotes:
node "figma-mcp-server.js"
—or—
Move your project to a path without spaces to avoid quoting:
C:/Users/yourname/Dev/NoSpacesRepo/
🔧 Troubleshooting
See for common issues and fixes.
🤝 Contributing
Got ideas, improvements, or questions?
Please open an issue or submit a pull request — contributions are welcome!
See for guidelines.
📄 License
This project is licensed under the .
