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
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 directly 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
npm install -
Configure environment variables
Copy the example file and fill in your values:
cp .env.example .envSet:
FIGMA_TOKEN→ your Figma API tokenFIGMA_FILE_ID→ your Figma file IDMCP_PORT→ usually3000
-
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:
node "C:/path/to/your/project/figma-mcp-server.js"
- Name:
-
Add environment variables in Augment Code:
FIGMA_TOKENFIGMA_FILE_IDMCP_PORT
-
Restart Augment Code to apply the changes.
💬 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:
npm run start:mcp
⚠ Important Notes
🛡️ Watch for directory names with spaces
If your project directory contains spaces (like Moments Platform),
you must wrap the script path in quotes in the Augment Code command:
node "C:/Users/yourname/Documents/Dev/Moments Platform/moments-platform/figma-mcp-server.js"
✅ Recommended → move to a no-space path:
C:/Users/yourname/Documents/Dev/MomentsPlatform/moments-platform/
Then use:
node C:/Users/yourname/Documents/Dev/MomentsPlatform/moments-platform/figma-mcp-server.js
🔧 Troubleshooting
See for common issues and fixes.
🛠 Repository Structure
/README.md → Main guide
/.env.example → Example environment config
/figma-mcp-server.js → MCP server code
/prompts.md → Sample prompts for Augment Code
/troubleshooting.md → Error guide
/package.json → Dependencies and scripts
/LICENSE → License
🤝 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 .
