Figma MCP Server Overview

@kiensamson0000

代码仓库

基本信息

分类

媒体与设计

传输方式

stdio

作者

kiensamson0000

关于 Figma MCP Server Overview

UI auto-generated from Figma by Cursor AI on MCP Server.

Figma MCP Server Overview 配置

使用下面的配置,将此服务器添加到你的 MCP 客户端。

{
  "mcpServers": {
    "demo-ai-mcp": {
      "command": "npx",
      "args": [
        "figma-developer-mcp",
        "--figma-api-key=<your-figma-api-key>"
      ]
    }
  }
}

Figma MCP Server Overview 工具

工具列表暂未提供

当前收录暂时没有可展示的工具列表，不代表服务没有工具。请查阅项目文档了解支持的能力。

点击上方按钮,在临时沙箱中运行此服务器并实时获取工具列表。

概览

What is Figma MCP Server?

Figma MCP Server is an implementation of the Model Context Protocol that delivers standardized design context (layout, components, styling) from Figma to large language models. It acts as middleware for designers and developers who want to use AI coding assistants such as Claude, Windsurf, Cursor, and Cline to automate tasks, generate UI components, and maintain consistency between design and code.

How to use Figma MCP Server?

Install and run the server via npx figma-developer-mcp --figma-api-key=<your-figma-api-key> (or clone the repository and use pnpm install + pnpm run dev). Set the FIGMA_API_TOKEN environment variable (and optionally PORT, default 3333). Integrate with AI tools (e.g., Cursor) by adding an SSE MCP server pointing to http://localhost:3333. In Figma, copy a design link and paste it into the AI tool to trigger tasks like generating React code.

Key features of Figma MCP Server

MCP‑compliant – works with multiple LLM applications
Type‑safe implementation built with TypeScript
Custom URI scheme for easy design asset management
Robust error handling and input validation
Batch operations for processing multiple design elements
Available tools: get_file and get_node

Use cases of Figma MCP Server

Generate React or other framework code directly from Figma designs
Create reusable UI components from selected frames
Automate repetitive design‑to‑code translation tasks
Reduce manual overhead and maintain consistency across team projects
Enable AI assistants to access up‑to‑date Figma layout and styling data

常见问题

What prerequisites are needed to run the server?

You need Node.js 16.0+, npm 7.0+ or pnpm 8.0+, a Figma account (Professional or Enterprise recommended), and a Figma API access token with read permissions.

How do I obtain a Figma API token?

In the Figma desktop app, go to Settings → Security, scroll to Personal Access Tokens, generate a new token, copy it immediately (it is shown only once), and store it securely in an environment variable.

How do I integrate the server with an AI tool like Cursor?

Ensure the server is running, open Cursor Settings → MCP, click “Add New MCP Server”, choose the SSE option, and enter the server URL (usually `http://localhost:3333`). A green indicator confirms the connection.

Which transport does the server use?

The server communicates via SSE (Server‑Sent Events) to provide real‑time design context to AI assistants.

What are the two main tools exposed by the server?

`get_file` retrieves detailed information about a Figma file, and `get_node` fetches data about a specific node within a file.

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

Sleek

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

Organize with AI (OwAI)

Alexander Visheratin

Search and manage photo and video libraries through AI assistants. Find images and video moments, review duplicates, and organize collections, groups, favorites and people across local folders, Apple Photos and OneDrive.

aicut

Make AI videos, images, voiceovers and full AI Video Story episodes from Claude, ChatGPT, Cursor or any MCP client, then post them to TikTok, YouTube and Instagram. Veo, Kling, Seedance and more, on your own aicut accoun

FrontRowTickets.com MCP Server

Live FrontRowTickets.com ticket inventory for AI agents: search, availability, pricing, deals.

Blaze

Plan, create and schedule social media content from your AI assistant. Blaze makes on-brand posts, carousels and short videos, writes blog posts and newsletters, and schedules them to Instagram, TikTok, YouTube, LinkedIn