Figma MCP Server + Augment Code Integration
by shedytee
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.
Last updated: N/A
What is Figma MCP Server + Augment Code Integration?
This is an MCP server that queries Figma files and exposes Figma data to an MCP-compatible interface, integrating directly into Augment Code as a custom tool.
How to use Figma MCP Server + Augment Code Integration?
To use this server, clone the repository, install dependencies, configure environment variables (FIGMA_TOKEN, FIGMA_FILE_ID, MCP_PORT), and run the MCP server. Then, connect to Augment Code by adding a new MCP server with the appropriate name and command, and adding the environment variables in Augment Code.
Key features of Figma MCP Server + Augment Code Integration
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, and dotenv
Use cases of Figma MCP Server + Augment Code Integration
Fetch full file data from Figma
Fetch the latest file from the Figma API
Get details about specific components in Figma
Show all components in a Figma design file
FAQ from Figma MCP Server + Augment Code Integration
What is MCP?
What is MCP?
MCP stands for Model Context Protocol.
What is the purpose of the FIGMA_TOKEN?
What is the purpose of the FIGMA_TOKEN?
The FIGMA_TOKEN is your personal access token for the Figma API, allowing the server to access your Figma files.
What does the MCP_PORT environment variable do?
What does the MCP_PORT environment variable do?
The MCP_PORT specifies the port on which the MCP server will run. The default is usually 3000.
Why do I need to wrap the script path in quotes in Augment Code?
Why do I need to wrap the script path in quotes in Augment Code?
If your project directory contains spaces, you must wrap the script path in quotes to ensure Augment Code can correctly execute the command.
Where can I find example prompts?
Where can I find example prompts?
Example prompts can be found in the prompts.md file in the repository.