What is Mcp Figma Augmentcode Integration

mcp-figma-augmentcode-integration is an example project that demonstrates how to connect a Model Context Protocol (MCP) server with the Figma API and integrate it with Augment Code, utilizing Node.js and figma-js.

Use cases

Use cases include automating the retrieval of design assets from Figma, integrating design data into development environments, and streamlining the workflow between design and code using Augment Code.

How to use

To use mcp-figma-augmentcode-integration, clone the repository, install the dependencies, configure the environment variables with your Figma API token and file ID, and then run the MCP server. Finally, connect it to Augment Code by adding the server details in the workspace settings.

Key features

Key features include querying Figma files, exposing Figma data to an MCP-compatible interface, and direct integration with Augment Code as a custom tool. It utilizes libraries such as @modelcontextprotocol/sdk, figma-js, zod, and dotenv.

Where to use

mcp-figma-augmentcode-integration can be used in design and development workflows where Figma files need to be accessed programmatically, enhancing collaboration between designers and developers.

🚀 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:

• @modelcontextprotocol/sdk
• figma-js
• zod
• dotenv

📦 Setup Instructions

1. Clone the repository

   git clone https://github.com/shedytee/mcp-figma-augmentcode-integration.git
   cd mcp-figma-augmentcode-integration
   

2. Install dependencies

   npm install
   

3. Configure environment variables

   Copy the example file and fill in your values:

   cp .env.example .env
   

   Set:

   • FIGMA_TOKEN → your Figma API token
   • FIGMA_FILE_ID → your Figma file ID
   • MCP_PORT → usually 3000

4. Run the MCP server

   npm run start:mcp
   

   You should see:

   MCP Server running on port 3000
   

⚙️ Connect to Augment Code

1. Open Augment Code → Workspace Settings → MCP

2. Add a new MCP server:

   • Name: figma
   • Command:

     node "C:/path/to/your/project/figma-mcp-server.js"
     

3. Add environment variables in Augment Code:

   • FIGMA_TOKEN
   • FIGMA_FILE_ID
   • MCP_PORT

4. Restart Augment Code to apply the changes.

💬 Example Prompts

See prompts.md 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 figma-mcp-server.js,
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 troubleshooting.md 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 CONTRIBUTING.md for guidelines.

📄 License

This project is licensed under the MIT License.

🌐 Links

• Model Context Protocol (MCP)
• Figma API
• Augment Code