mcpserver.so LogoMCPFly
Submit
Figma MCP Server + Augment Code Integration logo

Figma MCP Server + Augment Code Integration

by shedytee

IntegrationFigmaAugment CodeAPIDevelopmentIntegration

This project demonstrates how to connect a Model Context Protocol (MCP) server to the Figma API and integrate it with Augment Code. It allows you to supercharge your development workflow by exposing Figma data to Augment Code.

View on GitHub

Last updated: N/A

🚀 Figma MCP Server + Augment Code Integration

GitHub license

GitHub license

GitHub issues

GitHub issues

GitHub stars

GitHub stars

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

  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