広告掲載
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).

コメント

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

ProfessionalHeadshot.io

ProfessionalHeadshot.io

Official LinkedIn, Slack and GitHub profile photo specs with sources, headshot style guides by use and industry, and a free 0-100 headshot audit. No API key needed.

Lamina — On-brand product photos, video & try-ons

Lamina

Generate on brand product videos from Claude Code (or any assistant) in one line. Lamina turns a brief + your brand kit into finished product photos, video reels, and campaign banners - no prompt engineering; brand guard

CoDesign

IMG.LY

Give your AI agent a real design engine. Create, edit and export real, editable designs from Claude Code, Codex, Cursor and more.

Blaze

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

InstantClips

InstantStudioAI

InstantClips turns an e-commerce product into short-form vertical video for TikTok, Instagram Reels and Stories. Import a product from its page URL or photos, generate on-brand video ads, and manage brands/products throu

広告掲載