広告掲載
MCP.so
ログイン

Figma MCP Server

@moonray

リポジトリ

基本情報

カテゴリ

メディアとデザイン

ライセンス

MIT

トランスポート

stdio

作者

moonray

Figma MCP Server について

An mcp server that efificiently generates a node tree and related metadata for a figma node.

#mcp-figma#figma#node-tree

Figma MCP Server の設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

{
  "mcpServers": {
    "mcp-figma-moonray": {
      "command": "node",
      "args": [
        "client-example.js",
        "https://www.figma.com/file/FILE_ID/PROJECT_NAME?node-id=NODE_ID",
        "2"
      ]
    }
  }
}

Figma MCP Server のツール

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

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

ツールは README から自動的に抽出されます。メンテナーは ## Tools という見出しの下に記載することで、このタブに反映できます。

概要

What is Figma MCP Server?

An MCP (Model Context Protocol) server for analyzing Figma file structures. It extracts node hierarchies from Figma files and can be used both as a REST API server and as an MCP server for LLM integration. It is intended for developers working with Figma design files and AI‑assisted workflows.

How to use Figma MCP Server?

Install the package globally via npm (npm install -g figma-mcp-server) or build from source. Configure your Figma API key in a .env file (variable FIGMA_API_KEY). Start the REST API with npm start or run the MCP CLI with figma-mcp-server --cli. Send analysis requests to the POST /analyze endpoint with a Figma URL and optional depth parameter.

Key features of Figma MCP Server

  • Analyze Figma files to extract node hierarchies
  • Supports both REST API and MCP protocol
  • Configurable node tree depth
  • Simple configuration via .env file
  • Docker support for containerized deployment

Use cases of Figma MCP Server

  • Automating extraction of Figma component trees for design documentation
  • Enabling an LLM to query and reason about Figma file structure
  • Building design review tools that inspect node hierarchies
  • Integrating Figma analysis into CI/CD pipelines for design‑system checks

よくある質問

1

What prerequisites are needed to run the server?

Node.js 16+ and npm or yarn are required. You also need a valid Figma API key.

2

How do I obtain a Figma API key?

You can generate an API key from your Figma account settings at https://www.figma.com/developers/api#access-tokens.

3

Can the server be used as a standalone REST API?

Yes. Run `npm start` to start an Express server on port 3000 (or a custom port set in `.env`). Use the `POST /analyze` endpoint to analyze files.

4

What does the `depth` parameter do in an analysis request?

It controls how many levels of the node tree are returned. If omitted, the server uses a default depth.

5

Is Docker deployment supported?

Yes. A Dockerfile is provided. Build the image with `docker build -t figma-mcp-server .` and run it with `docker run -p 3000:3000 --env-file .env figma-mcp-server`.

コメント

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

UGCfy AI

UGCfy AI

Break down any TikTok or Instagram Reels ad and rewrite it for your product, right inside Claude, Cursor, or ChatGPT. Hooks, UGC scripts, and CPM. Free, no API key.

SVGator

SVGator

Drive your SVGator account from any AI assistant. Prompt an animation, get an editable project back, and export it as SVG, Lottie, GIF, MP4, and more, then open it in the editor to finish by hand.

P

Photo Mosaic & AI Collage Maker - Collager.ai

Collager.ai

Photo mosaic maker and AI photo collage maker: turn your own photos into a photo mosaic - one picture made of hundreds of your photos - or into a heart, number or word photo collage in seconds. No sign-in or API key need

Designesy

LE-VAI

Design quality gate for AI-generated UI. Scores any live URL against a published contract of deterministic checks, with an A–F grade, a per-check breakdown and AI-slop pattern findings; validates DTCG token files and Lot

EmbedSocial

Connect Claude, ChatGPT, and other AI assistants to your social media content, reviews, and UGC aggregated via EmbedSocial.

広告掲載