広告掲載
MCP.so
ログイン

Figma MCP Pro

@artemsvit

リポジトリ

基本情報

カテゴリ

メディアとデザイン

トランスポート

stdio

作者

artemsvit

投稿者

Artem Svitelskyi

Figma MCP Pro について

Professional MCP server for seamless Figma design analysis with intelligent comment processing and automated asset downloads.

#figma#figmadesign#designtocode#mcp#figmamcp#analyze

Figma MCP Pro の設定

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

{
  "mcpServers": {
    "Figma MCP PRO": {
      "command": "npx",
      "args": [
        "figma-mcp-pro@latest",
        "--figma-api-key",
        "your-api-key-here"
      ],
      "env": {
        "DEBUG": "true"
      }
    }
  }
}

Figma MCP Pro のツール

5

STEP 1: Show available frameworks to user. Call with empty object {}. Shows options, then STOP and wait for user to tell you their choice. DO NOT make further tool calls until user provides their framework preference.

STEP 2: Get well-structured, AI-optimized Figma design data with framework-specific optimizations. Analyzes layout, components, coordinates, visual effects (shadows, borders), design tokens. PURE DESIGN DATA ONLY - no comments. Use AFTER user chooses framework. Can accept full Figma URL to automatically extract file and node selection. If getting unintended content, select a more specific element in Figma.

STEP 3: Process designer comments with smart coordinate matching. Use AFTER get_figma_data when you want to analyze designer instructions. Converts comments into actionable AI prompts for implementation.

STEP 4: Automatically scan selected area for ALL export-ready assets and download them with reference.png. Takes Figma URL, finds all nodes with export settings in selected area, downloads them with Figma export settings, plus creates reference.png of whole selection.

STEP 5: Analyze reference.png file for design understanding. Provides design context, layout analysis, component structure guidance, and framework-specific development recommendations before starting code implementation.

概要

What is Figma Mcp Pro?

A professional Model Context Protocol (MCP) server that provides AI‑optimized Figma design analysis through a clean five‑step workflow. It converts Figma designs into structured data for AI code generation, supporting smart comment processing and asset downloads. It is intended for developers and designers who want to streamline design‑to‑code conversion.

How to use Figma Mcp Pro?

Install globally via npm (npm install -g figma-mcp-pro), obtain a Figma API token, then add the provided MCP configuration (with your API key) to your MCP client’s settings file (e.g., claude_desktop_config.json for Claude Desktop, VS Code MCP settings for Claude Code, or the MCP configuration in Cursor, Windsurf, or TRAE). The server exposes five core tools: show_frameworks, get_figma_data, process_design_comments, download_design_assets, and check_reference.

Key features of Figma Mcp Pro

  • Five‑step workflow: framework selection, design data, comments, assets, reference analysis.
  • Data structured specifically for AI code generation.
  • Supports ten frameworks: React, Vue, Angular, Svelte, HTML/CSS/JS, SwiftUI, UIKit, Electron, Tauri, NW.js.
  • Smart coordinate‑based comment matching to UI elements.
  • Batch asset downloads preserving original Figma export settings.
  • Automatic CSS generation from Figma properties (padding, margins, borders, effects).

Use cases of Figma Mcp Pro

  • Convert Figma designs into AI‑ready code for a chosen front‑end framework.
  • Extract and map designer comments to specific UI elements with implementation hints.
  • Download all export‑ready assets with original file names and formats.
  • Analyze a reference screenshot for design understanding and development guidance.
  • Accelerate prototyping by generating structured layout, styling, and responsive data.

よくある質問

1

How do I get a Figma API key?

Obtain your API token from [Figma Account Settings](https://www.figma.com/settings) → Personal access tokens.

2

Which frameworks are supported?

React, Vue, Angular, Svelte, HTML/CSS/JS, SwiftUI, UIKit, Electron, Tauri, and NW.js.

3

What data does the server extract from a Figma design?

Layout properties (padding, margins, gaps, auto‑layout), styling (colors, borders, shadows, effects, typography), component hierarchy, semantic roles, and responsive sizing/constraints.

4

How does comment processing work?

Comments are matched to design elements via coordinates, and each comment is turned into an actionable AI implementation prompt (e.g., “Add hover animation to Button component”) along with element details and positioning.

5

Where are the configuration files located?

- **Claude Desktop**: `claude_desktop_config.json` - **Claude Code (VS Code)**: VS Code MCP settings - **Cursor, Windsurf, TRAE**: Application MCP configuration settings

コメント

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

Riddle Quiz Maker

Riddle.com

Creates and manages quizzes, polls, surveys, personality tests, forms, predictors, minigames and leaderboards on Riddle.com – with branching logic, custom design, live stats and embed code.

UGCfy AI

UGCfy AI

Break down any TikTok or Instagram Reels ad and rewrite it for your product, right inside Claude, Cursor, or ChatGPT. Hooks, UGC scripts, and CPM. Free, no API key.

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

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.

Shotstack

Shotstack's official MCP server gives AI assistants direct access to the Shotstack video editing API, so you can produce video from a conversation instead of writing Edit JSON by hand. Available tools cover rendering vid

広告掲載