广告合作
MCP.so
登录
Z

Zapcode Figma MCP Server

@Zapcode-FTC

代码仓库

基本信息

分类

媒体与设计

传输方式

stdio

作者

Zapcode-FTC

提交者

ZapCode

关于 Zapcode Figma MCP Server

# Zapcode Figma MCP Server

#figma-plugin-no-rate-limit

Zapcode Figma MCP Server 配置

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

{
  "mcpServers": {
    "zapcode-figma": {
      "command": "npx",
      "args": [
        "-y",
        "zapcode-figma-mcp"
      ]
    }
  }
}

Zapcode Figma MCP Server 工具

6

Retrieves the selected Figma frame context (HTML, CSS, prompt, image, assets). Saves any provided assets to the local directory. Accepts an optional 'assets_path' parameter to specify where assets should be saved.

Batch-create a complete wireframe from a structured node list. Each node can reference a previously created node via tempId/parentId. Use this to create an entire screen layout in a single call instead of calling individual tools repeatedly.

Execute raw Figma Plugin API JavaScript code directly in Figma. The code runs in the plugin's main thread where 'figma' is a global. Use this for complex designs, loops, gradients, variables, rotations, boolean operations, reordering (parent.insertChild), flattening (node.flatten()), blend modes (node.blendMode), detaching instances (instance.detachFromComponent()), creating lines, deleting styles (style.remove()), or anything not covered by individual tools. For async operations (like loadFontAsync), write async code — it is automatically awaited. Returns the result of the last expression or a success message.

Get the currently selected nodes in Figma.

Get full properties of a specific Figma node: position, size, fills, strokes, effects, constraints, auto-layout settings, opacity, blend mode, visibility, font details, and children count. Use this after creating or modifying nodes to verify the result.

Load additional Figma tools for a specific task category. Call this before performing tasks that need specialized tools. Available categories: - pages → create_figma_page, list_figma_pages, set_current_page - shapes → create_figma_frame, create_figma_rectangle, create_figma_text, create_figma_ellipse - styling → set_fill_color, set_stroke, set_corner_radius, set_opacity, add_effect, set_gradient_fill, set_image_fill - layout → set_auto_layout, move_node, resize_node, align_nodes, distribute_nodes, set_constraints, set_layout_sizing - nodes → rename_node, delete_node, group_nodes, ungroup_nodes, duplicate_node, set_visibility, lock_node, search_nodes, select_node, get_node_tree - text → update_text_content, set_text_properties - components → get_figma_components, create_component_instance, apply_text_style, apply_color_style, create_component, create_component_set, set_component_property - styles → get_figma_styles, create_color_style, create_text_style, update_color_style, update_text_style - variables → get_local_variables, create_variable_collection, create_variable, set_variable_value, apply_variable - export → export_node Note: flatten, blend modes, z-order, detach instance, lines, and delete style are available via execute_figma_code.

概览

What is Zapcode Figma MCP?

Zapcode Figma MCP is a server that connects Figma designs to AI tools such as Claude Desktop, Claude Code, Cursor, and Cline. It provides real-time HTML, CSS, images, and assets from selected Figma frames through the Model Context Protocol.

How to use Zapcode Figma MCP?

Install the Zapcode Figma plugin from the Figma Community, then configure an MCP-compatible client (e.g., Claude Desktop, Cursor) by adding a JSON entry with the command npx -y zapcode-figma-mcp. After restarting the client and running the plugin in Figma, select a frame and ask the AI to fetch the design context.

Key features of Zapcode Figma MCP

  • Fetches live data from your currently selected Figma frame.
  • Exports SVG, PNG, JPG, PDF, and all Figma asset types.
  • Saves assets to custom paths or default workspace location.
  • Automatically organizes assets by type (svg/, png/, jpg/).
  • Zero configuration with npx.
  • Provides HTML structure, CSS styles, images, and design specifications.

Use cases of Zapcode Figma MCP

  • Converting Figma frames into real-time HTML and CSS for web development.
  • Extracting design specifications and assets for handoff to developers.
  • Using AI code editors to generate code directly from live Figma selections.
  • Automatically organizing exported assets by type for project integration.

常见问题

1

What are the prerequisites?

Node.js 16 or later, the Figma Desktop app, and the Zapcode Figma plugin installed from the Figma Community.

2

How do I configure the server for Claude Desktop?

Add the following to your `claude_desktop_config.json` (macOS: `~/Library/Application Support/Claude/`, Windows: `%APPDATA%\Claude\`): `{"mcpServers": {"zapcode-figma": {"command": "npx", "args": ["-y", "zapcode-figma-mcp"]}}}`. Then restart Claude Desktop.

3

Why is the Figma plugin not connected?

Cause: the MCP server cannot reach the Zapcode Figma plugin. Solution: open your design file in the Figma Desktop app, run the Zapcode plugin (Plugins → Zapcode), keep the plugin window open, and retry the MCP tool.

4

Why are assets not saving?

Cause: permission issues or an invalid path. Solution: ensure the target assets directory (or its parent) exists and is writable. Use absolute paths and check file permissions on the target directory.

5

What clients are supported?

Claude Desktop, Claude Code, Cursor, Cline, Windsurf, Zed (MCP in preview), Continue, and GitHub Copilot (with MCP support in VS Code).

评论

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

Generate Greetings

Generate Greetings

Create greetings and personalized PNG cards for 30 occasions in 15 languages, including Hindi, Greek and Hebrew. Free remote MCP with curated phrases, occasion-matched backgrounds and four styles, including motivational.

BulkTranscripts: YouTube Transcripts

Transcripts for one YouTube video or a whole channel or playlist, plus YouTube search, channel and playlist listings, and free new-upload tracking.

Instagram + TikTok Downloader & Transcriber

IYIA

Instagram + TikTok content tools inside your AI: download HD posts/reels/carousels, view Instagram stories anonymously, AI-transcribe videos (100+ languages, SRT/VTT/TXT). Requires a Repost PRO subscription.

Organize with AI (OwAI)

Alexander Visheratin

Search and manage photo and video libraries through AI assistants. Find images and video moments, review duplicates, and organize collections, groups, favorites and people across local folders, Apple Photos and OneDrive.

Paperjoy

Send real handwritten postcards in Poland from Claude, Cursor, or any MCP client. A robot writes with a real pen, addresses the envelope, and mails via Poczta Polska.

广告合作