広告掲載
MCP.so
ログイン
F

Figma To Code MCP Server

@toddle-edu

リポジトリ

基本情報

カテゴリ

メディアとデザイン

トランスポート

stdio

作者

toddle-edu

投稿者

vaibhav patel

Figma To Code MCP Server について

Use this Figma MCP Server to convert Figma Design to pseudo-code like structure - simple yet efficient for LLMs to understand design context. Connect to Figma API and get pseudo-code for the given Design. For visual context, can also fetch images.

#figma#mcp#design-to-code#figma-to-code#ai-figma-to-code#figma-mcp#pseudo-code#prototyping

Figma To Code MCP Server の設定

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

{
  "mcpServers": {
    "figma MCP Server": {
      "command": "npx",
      "args": [
        "figma-codegen-mcp",
        "--figma_api_key=${input:FIGMA_API_KEY}"
      ]
    }
  },
  "inputs": [
    {
      "id": "FIGMA_API_KEY",
      "type": "promptString",
      "description": "Paste your Figma Personal access Token here"
    }
  ]
}

Figma To Code MCP Server のツール

2

Fetches a PNG image of a Figma node or frame using the file key and node ID. Returns the image as base64.

It will generates JSX and CSS pseudo-code for a Figma frame or node, given its file key and node ID. Useful for converting Figma designs to code. Can also be used to generate code for specific components or frames in Figma.

概要

What is Figma To Code Mcp Server?

Figma To Code Mcp Server connects to the Figma API and converts Figma designs into a pseudo-code-like structure (JSX and CSS) that is simple and efficient for LLMs to understand design context. It is aimed at developers and AI workflows that need to translate visual designs into code representations automatically.

How to use Figma To Code Mcp Server?

Share a Figma Design URL with an MCP client; the server automatically extracts the file key and node ID, then calls the appropriate tools. Two tools are provided: fetch_figma_node_image (returns a base64 PNG of a node) and generate_pseudo_code_from_figma_frame (returns formatted JSX, CSS, and semantic HTML). No additional configuration is required beyond the MCP client setup.

Key features of Figma To Code Mcp Server

  • Auto-extracts file key and node ID from Figma URLs.
  • Generates pseudo-JSX + CSS code from Figma frames.
  • Fetches PNG images of nodes as base64 data.
  • Produces semantic HTML structure and readable formatting.
  • Integrates design system components (accuracy depends on Figma library).

Use cases of Figma To Code Mcp Server

  • Converting Figma designs to React-inspired pseudo-components.
  • Providing code-like design representations to LLMs.
  • Rapid prototyping from Figma designs.
  • Automating design-to-code workflows.
  • Creating documentation with actual design screenshots.

よくある質問

1

What does the `generate_pseudo_code_from_figma_frame` tool return?

It returns formatted text containing CSS styles, JSX component structure, and semantic HTML elements. The output is clean and readable.

2

How does the server extract the file key and node ID?

It parses the Figma URL automatically: the file key is the part after `/design/` or `/file/`, and the node ID comes from the `node-id` URL parameter.

3

Does the server require a Figma API token?

The README does not mention authentication details, but Figma API access typically requires a personal access token. The server likely expects one to be configured in the MCP client environment.

4

What formats are supported for image output?

The `fetch_figma_node_image` tool returns a PNG image as base64-encoded data along with its MIME type.

5

Are there any known limitations?

Accuracy and quality of the generated pseudo-code depend on the Figma component library used in the design. The server does not produce production-ready code; it is meant as a helpful representation for LLMs.

コメント

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

Designesy

LE-VAI

Design quality gate for AI-generated UI. Scores any live URL against a published contract of deterministic checks, with an A–F grade, a per-check breakdown and AI-slop pattern findings; validates DTCG token files and Lot

LinkedIn Ads MCP

AdPlug

LinkedIn Ads MCP server by AdPlug, connecting LinkedIn Ads to Claude, ChatGPT and other MCP-compatible AI assistants. Analyse performance, audiences, creatives and conversions. Generate reports and manage campaigns, budg

Artlist

Artlist

Generate images, videos, music, and voice-overs directly from your AI agent. The full Artlist AI creative suite as an MCP server — works with Claude, ChatGPT, and VS Code, with more platforms coming soon.

QR Planet QR Code MCP Server

qrplanet

QR Planet QR Code MCP Server - Hosted MCP server for QR Planet. Connect AI agents and MCP-compatible clients to create, update, design, route, and analyze dynamic QR Codes using your QR Planet API key.

1

PostNitro

PostNitro Inc.

The PostNitro MCP server lets AI assistants and agents — Claude (Desktop, Code, and Cowork), Cursor, ChatGPT, and any other Model Context Protocol client — create carousels, image posts, and videos, manage brand kits, a

広告掲載