Figma MCP Server + Augment Code Integration

@shedytee

リポジトリ

基本情報

カテゴリ

メディアとデザイン

ライセンス

View license

トランスポート

stdio

作者

shedytee

Figma MCP Server + Augment Code Integration について

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

Figma MCP Server + Augment Code Integration の設定

標準の設定はありません

このサーバーの README には解析可能な MCP 設定ブロックが含まれていません。インストール手順はリポジトリをご確認ください。

リポジトリ

Figma MCP Server + Augment Code Integration のツール

ツール一覧はまだありません

この掲載には表示できるツール一覧がまだありません。サーバーにツールがないという意味ではありません。対応機能はプロジェクトのドキュメントをご確認ください。

ツールは 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

よくある質問

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.

「メディアとデザイン」の他のコンテンツ

Cardboard AI

A video editor you use by chatting in Claude or ChatGPT. Bring your footage, ask for cuts, captions, titles and music, then download the finished video.

PromptWise

PromptWise is an AI creative studio: 40+ image, video and audio models in one place. Connect the PromptWise MCP to generate images, videos and audio from your AI assistant.

JSON2Video

Official JSON2Video MCP server. Video API for automated video production at scale: render videos from templates with AI voiceovers, subtitles and AI images. Remote server with OAuth (https://mcp.json2video.com/mcp) or lo

CampaignStack

Run LinkedIn and email outreach from Claude, safely. Made for lead gen agencies, founders and medium-large companies. Every account gets enforced daily limits, its own proxy, and a review queue before anything sends.

Sleek

Design your mobile app UI with AI, then have your coding agent build the real app from it.