🚀 Figma MCP Server + Augment Code Integration

What is 🚀 Figma MCP Server + Augment Code Integration?

This project builds a Model Context Protocol (MCP) server that connects to the Figma API, exposes Figma file data through an MCP‑compatible interface, and integrates as a custom tool inside Augment Code. It is designed for developers who want to query design system components, layers, and styles directly from their code editor.

How to use 🚀 Figma MCP Server + Augment Code Integration?

Clone the repository, install dependencies with npm install, and configure environment variables (FIGMA_TOKEN, FIGMA_FILE_ID, MCP_PORT) in a .env file. Run the server with npm run start:mcp, then add a new MCP server in Augment Code’s workspace settings with the command pointing to figma-mcp-server.js and the same environment variables set.

Key features of 🚀 Figma MCP Server + Augment Code Integration

• Query Figma files via an MCP‑compatible interface
• Integrates directly into Augment Code as a custom tool
• Uses @modelcontextprotocol/sdk, figma-js, zod, and dotenv
• Includes ready‑to‑use example prompts in prompts.md
• Works with any Figma design file

Use cases of 🚀 Figma MCP Server + Augment Code Integration

• Ask for the full data of a Figma file inside Augment Code
• Fetch the latest version of a Figma file via the API
• Retrieve details about a specific component (e.g., ButtonPrimary)
• List all components in a design file

FAQ from 🚀 Figma MCP Server + Augment Code Integration

What dependencies or runtime are required?

Node.js and npm are required. The server depends on @modelcontextprotocol/sdk, figma-js, zod, and dotenv.

Where does the Figma data live?

Data is fetched live from the Figma API using your FIGMA_TOKEN and FIGMA_FILE_ID. No data is stored locally beyond what the server caches in memory.

How is authentication handled?

Authentication uses the FIGMA_TOKEN and FIGMA_FILE_ID environment variables. No OAuth flow is provided; you must generate a personal access token in Figma.

Are there any known limits or issues?

Directory paths containing spaces (e.g., Moments Platform) cause syntax errors in the Augment Code command. Either wrap the path in quotes or move the project to a path without spaces.

What transport does the MCP server use?

The server uses standard input/output (stdio) transport, invoked via a node command in Augment Code’s MCP settings.