MCP.so
登录

🚀 Figma MCP Server + Augment Code Integration

@shedytee

关于 🚀 Figma MCP Server + Augment Code Integration

Example integration of a Figma MCP server with Augment Code, using Node.js and figma-js.

基本信息

分类

媒体与设计

许可证

View license

运行时

node

传输方式

stdio

发布者

shedytee

配置

暂无标准配置

该服务器的 README 中没有可解析的 MCP 配置块,请前往代码仓库查看安装说明。

代码仓库

工具

未检测到工具

工具是从 README 中自动提取的。维护者可以在 ## Tools 标题下列出工具,即可填充这部分内容。

概览

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.

评论

媒体与设计 分类下的更多 MCP 服务器