Sunnyside Figma MCP
A comprehensive Model Context Protocol (MCP) server that bridges Figma designs with AI development workflows. It provides 30 specialized tools for extracting pixel-perfect code, assets, and component structures directly from Figma designs.
What is Sunnyside Figma MCP?
Sunnyside Figma MCP is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to comprehensive model context protocol (mcp) server that bridges figma designs with ai development workflows. it provides 30 specialized tools for extracting pixel-perfect code, assets, and component st...
A comprehensive Model Context Protocol (MCP) server that bridges Figma designs with AI development workflows. It provides 30 specialized tools for extracting pixel-perfect code, assets, and component structures directly from Figma designs.
This server falls under the Browser Automation category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- A comprehensive Model Context Protocol (MCP) server that bri
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx sunnyside-figma-mcpConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Sunnyside Figma MCP
Sunnyside Figma MCP is a Model Context Protocol server that bridges Figma designs with AI-powered development workflows, offering 27 specialized tools for extracting pixel-perfect CSS, design tokens, and component code directly from Figma. It supports two data paths: a companion Figma plugin that captures live selections with native CSS fidelity, and the Figma REST API for headless access using a Personal Access Token. Frontend developers use it to ask an AI assistant to generate React, Tailwind, or styled-components output from a Figma frame in seconds, or to audit and simulate design token changes across an entire design system.
Prerequisites
- Node.js 18 or higher
- A Figma account with a Personal Access Token (create at figma.com/developers)
- Figma Desktop app (required for the plugin bridge; the Figma plugin must be installed from the repo's figma-dev-plugin/manifest.json)
- An MCP client such as Claude Desktop or another SSE/HTTP-capable MCP client
- Git to clone and build the server
Clone and build the server
Download the repository, install Node dependencies, and compile the TypeScript source.
git clone https://github.com/tercumantanumut/sunnysideFigma-Context-MCP
cd sunnysideFigma-Context-MCP
npm install
npm run buildCreate the .env file
Create a .env file in the project root with your Figma Personal Access Token and the port the HTTP server will listen on.
FIGMA_API_KEY=figd_your_token_here
PORT=3333
OUTPUT_FORMAT=jsonStart the server
Run the server. It starts an HTTP server on port 3333 exposing SSE at /sse and Streamable HTTP at /mcp, plus the plugin bridge endpoints.
npm startInstall the Figma plugin (for plugin-bridge mode)
Open Figma Desktop, go to Plugins > Development > Import plugin from manifest, and select figma-dev-plugin/manifest.json from the cloned repo. Select a frame in any Figma file and click Extract Dev Code in the plugin to push data to the running server.
Configure your MCP client
For SSE mode (recommended when using the Figma plugin, since both share the same server process), point your MCP client at the SSE endpoint. For stdio mode (no plugin), use the cli.js entry with the --stdio flag.
{
"mcpServers": {
"sunnyside-figma": {
"type": "sse",
"url": "http://localhost:3333/sse"
}
}
}Sunnyside Figma MCP Examples
Client configuration
MCP client config for SSE transport (plugin bridge) and stdio transport (headless REST API use).
// SSE (recommended with plugin)
{
"mcpServers": {
"sunnyside-figma": {
"type": "sse",
"url": "http://localhost:3333/sse"
}
}
}
// stdio (headless)
{
"mcpServers": {
"sunnyside-figma": {
"type": "stdio",
"command": "node",
"args": ["/absolute/path/to/sunnysideFigma-Context-MCP/dist/cli.js", "--stdio"],
"env": { "FIGMA_API_KEY": "figd_your_token_here" }
}
}
}Prompts to try
Example AI prompts that leverage the Figma plugin bridge and REST API tools.
- "Generate a React + Tailwind component from the latest Figma extraction."
- "Get the CSS for all layers in the current selection."
- "Summarize the design tokens in this project and flag any conflicts."
- "Simulate renaming the --primary-color token to --brand-primary and show the impact."
- "Download the hero image from this Figma file as a PNG."Troubleshooting Sunnyside Figma MCP
Figma REST API tools return 'not found' or 403 errors
REST API tools do not work with files stored in Drafts — move the file to a team or project first. Also confirm your FIGMA_API_KEY has access to the file. Draft files require the plugin bridge instead.
Plugin shows 'Cannot connect to MCP server'
The HTTP server must be running before the plugin tries to POST extraction data. Run 'npm start' first, confirm the server is listening on port 3333, then use the plugin in Figma Desktop. Check your firewall if running on a non-default port.
get_figma_dev_mode_code returns 'Dev Mode server not found'
The Dev Mode tools require Figma's official Dev Mode MCP Server running on localhost:3845, which is only available on a Figma Professional plan with Dev Mode enabled in Figma Desktop. The plugin-bridge tools (get_JSON, get_tailwind_component, etc.) work on all plans.
Frequently Asked Questions about Sunnyside Figma MCP
What is Sunnyside Figma MCP?
Sunnyside Figma MCP is a Model Context Protocol (MCP) server that comprehensive model context protocol (mcp) server that bridges figma designs with ai development workflows. it provides 30 specialized tools for extracting pixel-perfect code, assets, and component structures directly from figma designs. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Sunnyside Figma MCP?
Follow the installation instructions on the Sunnyside Figma MCP GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with Sunnyside Figma MCP?
Sunnyside Figma MCP works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Sunnyside Figma MCP free to use?
Yes, Sunnyside Figma MCP is open source and available under the MIT License license. You can use it freely in both personal and commercial projects.
Sunnyside Figma MCP Alternatives — Similar Browser Automation Servers
Looking for alternatives to Sunnyside Figma MCP? Here are other popular browser automation servers you can use with Claude, Cursor, and VS Code.
Chrome DevTools MCP
★ 40.6kAI-powered Chrome automation server with natural language element detection. Control Chrome browser through MCP protocol for testing, debugging, and performance analysis. Features 91% accuracy in element location, works with free AI models, and suppo
UI TARS Desktop
★ 34.9k📇 🏠 - Browser automation capabilities using Puppeteer, both support local and remote browser connection.
Playwright
★ 32.8kA production-ready browser automation server that enables AI assistants to interact with web pages using tools for navigation, element interaction, and data extraction. It features a built-in Inspector UI and robust crash recovery for reliable automa
Page Agent
★ 18.0kJavaScript in-page GUI agent. Control web interfaces with natural language.
Chrome
★ 11.7kAn extension-based MCP server that enables AI assistants to control your browser, leveraging existing sessions and login states for automation and content analysis. It provides over 20 tools for semantic tab search, interactive element manipulation,
LAMDA
★ 7.8kThe most powerful Android RPA agent framework, next generation mobile automation.
Browse More Browser Automation MCP Servers
Explore all browser automation servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Sunnyside Figma MCP in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Sunnyside Figma MCP?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.