广告合作
MCP.so
登录
F

Figma MCP Server

@1yhy

代码仓库

基本信息

分类

媒体与设计

传输方式

stdio

作者

1yhy

提交者

鸿宇 杨

关于 Figma MCP Server

暂无概览

#figma#design-integration#ai-tools

Figma MCP Server 配置

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

{
  "mcpServers": {
    "Figma MCP": {
      "command": "npx",
      "args": [
        "figma-mcp",
        "--figma-api-key=<your-figma-api-key>",
        "--stdio"
      ]
    }
  }
}

Figma MCP Server 工具

5

Add a Figma file to your context

Get a thumbnail for a specific node in a Figma file

Get all comments on a Figma file

Post a comment on a node in a Figma file

Reply to an existing comment in a Figma file

概览

What is Figma MCP?

Figma MCP is a server based on the Model Context Protocol (MCP) that integrates Figma design files with AI coding tools such as Cursor, Windsurf, and Cline. It converts Figma design data into a format easily understood by AI models, enabling more accurate code generation directly from designs.

How to use Figma MCP?

Install via npm install -g @yhy2001/figma-mcp-server or from a local .tgz package. Start with figma-mcp --figma-api-key=<your-figma-api-key>. Optionally set a custom --port (default 3333) or use --stdio for command mode. In your AI tool’s MCP configuration, add the server URL (http://localhost:3333/sse) or the npx command with --stdio.

Key features of Figma MCP

  • Converts Figma design data into AI-optimized formats.
  • Retrieves layout and style info from files, frames, or components.
  • Downloads images and icons from Figma files.
  • Reduces context size for faster, more accurate AI responses.

Use cases of Figma MCP

  • AI coding assistants generating UI code directly from Figma designs.
  • Design-to-development handoff without manual pixel inspection.
  • Automating component styling extraction for consistent frontend implementation.

常见问题

1

What do I need before using the server?

A Figma personal access token (see Figma help on managing tokens) and Node.js installed. You’ll also need a compatible AI tool (Cursor, Windsurf, Cline, or any MCP client).

2

How do I get a Figma API token?

Follow the official Figma guide: [Manage personal access tokens](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens).

3

Can I run the server without internet access?

No, the server requires internet access to connect to the Figma API and fetch design file data. All design data is retrieved live from Figma.

4

What transports are supported?

HTTP/SSE (port 3333 by default) and stdio mode (`--stdio`). Use stdio for tools that launch the server as a subprocess, and SSE for tools that connect to a running server URL.

5

Is Figma MCP free and open source?

Yes, it is based on the open-source project Figma-Context-MCP and freely available. You only need your own Figma API token (free tier is sufficient for testing).

评论

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

GPT Image 2.5 MCP

you.bot

Generate and edit images with GPT Image 2.5 for $0.029 each. A free you.bot key (not an OpenAI key) comes with 50 credits — about 17 images — and needs no credit card.

Aura AI

auraai.app

Access 20+ AI video and image models from Google, OpenAI, xAI, ByteDance, and more. Generate and edit videos with Veo 3.1, Sora 2, Seedance, Kling O3, and images with FLUX, Nano Banana, Seedram 4, GPT Image — all in one

Veltake Studio

Veltake AI

Drive Veltake Studio from any AI agent: create film and ad projects, have the Studio agent build scenes on the canvas, price and start renders, export edited cuts, and make single images, video, speech and music in one c

Ultimaps

ultimaps.com

Turn your data into map images of countries, states, counties and ZIP codes with Ultimaps MCP server. Each map comes with a link to Ultimaps Studio, where you can keep editing it, export it, or publish an interactive ver

getimg

getimg.ai

Create and edit images, videos, music, speech, and sound effects with your getimg account. Use ready-made workflows for professional headshots, photo restoration, stickers, lighting changes, background cleanup, product v

广告合作