広告掲載
MCP.so
ログイン

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

よくある質問

1

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.

2

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.

3

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.

4

Which transport does the server use?

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

5

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.

コメント

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

Treza

Treza Labs

Lets Claude, ChatGPT and other MCP clients build and run AI video pipelines on Treza, from script and generated shots to narration, captions and posting to YouTube or TikTok.

TrueClicks

TrueClicks B.V.

TrueClicks is PPC audit and monitoring software for agencies and advertisers managing Google Ads, Microsoft Ads, and Meta Ads at scale. This connector gives read-only access to your TrueClicks data, so you can ask questi

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.

Uwear.ai

Uwear.ai

Run complete AI fashion photoshoots from ChatGPT, Claude, or Codex. Turn flat-lay, packshot, and mannequin product images into catalog-ready on-model photos and video with saved art direction, automatic QA, and catalog-s

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

広告掲載