MCPgee
MCPgee
MCPgeeMCPgee

Figma

v1.0.3•Developer Tools•stable

The Figma MCP server brings Figma design context directly into your AI workflow.

guidemcpai-integration
Share:
1,462
Stars
0
Downloads
0
Weekly
0/5
View on GitHub

What is Figma?

Figma is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to figma mcp server brings figma design context directly into your ai workflow.

The Figma MCP server brings Figma design context directly into your AI workflow.

This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.

Features

  • The Figma MCP server brings Figma design context directly in

Use Cases

Access Figma design context directly within AI workflows.
Integrate design assets into code generation and documentation.
figma

Maintainer

LicenseMIT
Languagejavascript
Versionv1.0.3
UpdatedMay 22, 2026
Statushealthy
Maintenanceactive

Works with

ClaudeOpenAIwindowsmacoslinux
View SourceBrowse All Servers

Installation

Manual Installation

npx guide

Configuration

Configuration Details

Config File

claude_desktop_config.json

Performance

Response Metrics

Response Time< 200ms
ThroughputMedium

Resource Usage

Memory UsageLow
CPU UsageLow

How to Set Up and Use Figma

The Figma MCP server, officially maintained by Figma, brings live design context from Figma files directly into AI coding assistants. It exposes tools that extract structured component data, design tokens, layout metadata, and screenshots from Figma frames, enabling AI agents to generate accurate code that matches real designs. Designers and developers use it to close the gap between design and implementation—asking an AI to write SwiftUI, React, or Tailwind code directly from a Figma frame URL without manual hand-off.

Prerequisites

  • A valid Figma account (seat type affects monthly tool call limits)
  • An MCP-compatible client: Claude Code, VS Code with GitHub Copilot, or Cursor
  • GitHub Copilot enabled if using VS Code
  • Network access to https://mcp.figma.com
1

Install via Claude Code (recommended)

The fastest setup for Claude Code users is the official plugin install command, which handles authentication and configuration automatically.

claude mcp add --transport http figma https://mcp.figma.com/mcp
2

Install in VS Code with GitHub Copilot

Open VS Code, press Cmd+Shift+P, search for 'MCP: Add Server', select HTTP transport, and enter the Figma MCP URL. Set the server ID to 'figma'.

3

Install in Cursor

Open Cursor Settings, go to the MCP tab, and add a new server. Use HTTP transport with the Figma MCP endpoint URL.

4

Configure any Streamable HTTP-compatible client

For editors that support Streamable HTTP transport, add this configuration block. Authentication is handled via your Figma account session.

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}
5

Verify the connection

In Claude Code or VS Code Agent mode, test that the Figma server is connected by calling get_design_context with a Figma frame URL.

claude mcp list
# Should show: figma  https://mcp.figma.com/mcp
6

Share a Figma frame and generate code

Copy a Figma frame link, paste it into your AI assistant's chat, and ask it to generate code. The server will fetch design context, tokens, and layout data automatically.

Figma Examples

Client configuration

Streamable HTTP configuration for any MCP client that supports HTTP transport. Authentication uses your Figma account session.

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Prompts to try

After connecting your MCP client to the Figma server, share a Figma frame URL and try these prompts.

- "Generate iOS SwiftUI code from this Figma frame: [paste frame URL]"
- "Convert this Figma component to React with Tailwind CSS classes"
- "Extract all design tokens (colors, spacing, typography) from this frame"
- "Get a screenshot of this Figma design variant for reference"
- "Create a Chakra UI component matching this Figma layout using src/components/ui"

Troubleshooting Figma

Tool calls fail with an authentication or permission error

Ensure you are logged into Figma in your browser and that your Figma account has the appropriate seat type. Starter, View, and Collab seats are limited to 6 tool calls per month; Dev or Full seats have higher per-minute limits matching Figma's REST API Tier 1.

get_design_context returns empty results or cannot find the frame

Verify the Figma frame link is a valid shareable link with view permissions. The server needs to be able to access the file—check that the file is not in a private draft that your account cannot read via the API.

VS Code shows 'MCP: Add Server' but the connection fails

GitHub Copilot must be active in VS Code for the Figma MCP server to work. Verify Copilot is enabled and signed in, then retry adding the server with URL https://mcp.figma.com/mcp and ID 'figma'.

Frequently Asked Questions about Figma

What is Figma?

Figma is a Model Context Protocol (MCP) server that figma mcp server brings figma design context directly into your ai workflow. It connects AI assistants to external tools and data sources through a standardized interface.

How do I install Figma?

Follow the installation instructions on the Figma GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.

Which AI clients work with Figma?

Figma works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.

Is Figma free to use?

Yes, Figma is open source and available under the MIT license. You can use it freely in both personal and commercial projects.

Learn More About MCP Servers

Getting Started with MCP

Set up your first MCP server in minutes

MCP Setup Guide

Configure MCP in Claude, Cursor & VS Code

All MCP Tutorials

18+ hands-on guides for developers

MCP FAQ

40+ answers about Model Context Protocol

Figma Alternatives — Similar Developer Tools Servers

Looking for alternatives to Figma? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.

Ecc

★ 188.2k

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

Javaguide

★ 155.8k

Java 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发

Gemini CLI

★ 104.5k

A secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in

Awesome MCP Servers

★ 87.3k

⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.

MCP Servers

★ 86.0k

Model Context Protocol Servers

CC Switch

★ 77.5k

A cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io

Browse More Developer Tools MCP Servers

Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.

Developer ToolsBrowse All Servers

Quick Config Preview

{ "mcpServers": { "guide": { "command": "npx", "args": ["-y", "guide"] } } }

Add this to your claude_desktop_config.json or .cursor/mcp.json

Read the full setup guide →

Ready to use Figma?

Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.

33,000+ ServersFree & Open SourceStep-by-Step Guides
Explore All ServersRead Our Guides