mcp-server-guide

Figma MCP Server guide, helping AI extract information from Figma design files and generate code.

MCPDesign

Type: MCP
Transport: http
Open source: No
GitHub Stars: ★ 1.7k
Source: mcp-github
Repository: github.com/figma/mcp-server-guide

Overview

The Figma MCP Server integrates Figma directly into workflows, providing AI agents with essential design information and context for generating code from Figma design files. This capability enables AI agents to read and write Figma files, extract design context, and generate code. Ideal for product teams requiring tight integration between design and development. Available via clients such as VS Code, Cursor, and Claude Code.

Capabilities

▪Write to canvas (remote server)
▪Generate code from selected frames
▪Extract design context
▪Use Code Connect for intelligent coding
▪Generate Figma designs from web pages

Use cases

Product teams building new workflows or iterating on app featuresDesign systems and component-based workflowsMaintaining generated code consistency with code repositoriesCapturing and converting web pages into Figma designs

Setup

Requires: API KeyNode 环境

Add the Figma MCP Server in VS Code using `MCP:Add Server`; install the plugin in Cursor via `/add-plugin figma`; install the plugin in Claude Code using `claude plugin install figma@claude-plugins-official`.

This information was compiled by AI from public sources and may contain inaccuracies — please refer to the source.

FAQ

How do I connect to the Figma MCP Server?

Configure according to the documentation for your client (e.g., VS Code, Cursor, or Claude Code).

Are there rate limits?

Yes, depending on the user's Figma plan type.

Related skills

material-3-skill

Material Design 3 skills, supporting over 30 components, design tokens, themes, and responsive layouts.

Agent Skillmaterial designui

xhs-visual-director-skill

Visual director for Xiaohongshu image and text planning, offering multi-page structure and visual solutions.

Agent Skill

drawio-skill

Generate draw.io diagrams from natural language, supporting multiple presets and export formats.

Agent Skill

ui-ux-pro-max-skill-cn

Professional-grade UI/UX design intelligence for AI coding assistants.

Agent Skill

logo-generator-skill

Professional SVG logo generator with multiple design variants and presentation backgrounds.

Agent Skill

claude-skill-aso-appstore-screenshots

Generate high-quality App Store screenshots to boost app download rates.

Agent Skill