Zapcode Figma Mcp

Name: Zapcode Figma Mcp
Author: Zapcode-FTC

@Zapcode-FTC

リポジトリ

Zapcode Figma Mcp について

# Zapcode Figma MCP Server

#figma-plugin-no-rate-limit

基本情報

カテゴリ

メディアとデザイン

トランスポート

stdio

公開者

Zapcode-FTC

投稿者

ZapCode

設定

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

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

ツール

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

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

概要

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.

FAQ from Zapcode Figma MCP

What are the prerequisites?

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

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.

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.

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.

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).

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

KiCAD MCP: AI-Assisted PCB Design

mixelpixx

KiCAD MCP is a Model Context Protocol (MCP) implementation that enables Large Language Models (LLMs) like Claude to directly interact with KiCAD for printed circuit board design.

1.5K

Framelink Figma MCP Server

GLips

MCP server to provide Figma layout information to AI coding agents like Cursor

15.3K

MiniMax MCP

MiniMax-AI

Official MiniMax Model Context Protocol (MCP) server that enables interaction with powerful Text to Speech, image generation and video generation APIs.