🚀 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.
基本信息
配置
工具
未检测到工具
工具是从 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, anddotenv - 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 服务器
yt-dlp-mcp
kevinwattA Model Context Protocol (MCP) server that bridges Video & Audio content with Large Language Models using yt-dlp.
NS Travel Information MCP Server
r-huijtsA Model Context Protocol (MCP) server that provides access to NS (Dutch Railways) travel information through Claude AI. This server enables Claude to fetch real-time train travel information and disruptions using the official Dutch NS API.
Tripadvisor MCP Server
pab1it0A Model Context Protocol (MCP) server for Tripadvisor Content API. This provides access to Tripadvisor location data, reviews, and photos through standardized MCP interfaces, allowing AI assistants to search for travel destinations and experiences.
MCP Google Map Server
cablateA powerful Model Context Protocol (MCP) server providing comprehensive Google Maps API integration with LLM processing capabilities.

BibiGPT AI video & audio summarizer
JimmyLvOpenClaw / Claude Code / Codex Agent skill for summarizing videos/audio via BibiGPT CLI (bibi)
评论