MCP.so
ログイン

Figma MCP Server Overview

@kiensamson0000

リポジトリ

Figma MCP Server Overview について

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

基本情報

カテゴリ

メディアとデザイン

ランタイム

node

トランスポート

stdio

公開者

kiensamson0000

設定

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

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

ツール

ツールは検出されませんでした

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

概要

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

FAQ from Figma MCP Server

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.

コメント

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

RustChain MCP

Scottcjn

MCP server for RustChain blockchain and BoTTube video platform — AI agent tools for earning RTC tokens. Built on createkr's RustChain SDK.

99

Image-Gen-Server

fengin

一个能与Cursor集成的图片生成mcp server工具，实现调用即梦逆向接口

226

YouTube MCP Server

anaisbetts

A Model-Context Protocol Server for YouTube

532

Tripadvisor MCP Server

pab1it0

A Model Context Protocol (MCP) server for Tripadvisor Content API. This provides access to Tripadvisor location data, reviews, and photos through standardized MCP interfaces, allowing AI assistants to search for travel destinations and experiences.

59

BibiGPT AI video & audio summarizer

JimmyLv

OpenClaw / Claude Code / Codex Agent skill for summarizing videos/audio via BibiGPT CLI (bibi)

98