mcp-figma-augmentcode-integration

mcp-figma-augmentcode-integration

1
developer_toolscloud_platforms

The Figma MCP Server project provides a connection between a Model Context Protocol server and the Figma API, facilitating integration with Augment Code to streamline development workflows. It offers features such as querying Figma files and exposing data through an MCP-compatible interface.

🚀 Figma MCP Server + Augment Code Integration

GitHub license GitHub issues 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 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 .

🌐 Links