Figma MCP Server for Windsurf 12 tools — connect in under 2 minutes
Windsurf brings agentic AI coding to a purpose-built IDE. Connect Figma through the Vinkius and Cascade will auto-discover every tool — ask questions, generate code, and act on live data without leaving your editor.
ASK AI ABOUT THIS MCP SERVER
Vinkius supports streamable HTTP and SSE.
Vinkius Desktop App
The modern way to manage MCP Servers — no config files, no terminal commands. Install Figma and 2,500+ MCP Servers from a single visual interface.
{
"mcpServers": {
"figma": {
"url": "https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp"
}
}
}
* Every MCP server runs on Vinkius-managed infrastructure inside AWS - a purpose-built runtime with per-request V8 isolates, Ed25519 signed audit chains, and sub-40ms cold starts optimized for native MCP execution. See our infrastructure
About Figma MCP Server
Figma is the leading collaborative interface design tool. This MCP server allows your AI agent to interact with your Figma files, projects, and teams flawlessly.
Windsurf's Cascade agent chains multiple Figma tool calls autonomously — query data, analyze results, and generate code in a single agentic session. Paste the Vinkius Edge URL, reload, and all 12 tools are immediately available. Real-time tool feedback appears inline, so you see API responses directly in your editor.
Key Features
- File & Node Inspection — Retrieve the full document tree or specific layers to analyze design structures flawlessly.
- Image Rendering — Render Figma frames, components, or layers into PNG, SVG, or PDF images flawlessly native.
- Team & Project Orchestration — List team projects and project files to navigate your design workspace flawlessly.
- Design Token Access — Extract published components, styles, and local variables to sync with codebases flawlessly.
- Collaboration Tools — Read and post comments directly on design files to keep feedback loops active synchronously.
- Version History — Access file version history to track design evolutions flawlessy through the agent.
The Figma MCP Server exposes 12 tools through the Vinkius. Connect it to Windsurf in under two minutes — no API keys to rotate, no infrastructure to provision, no vendor lock-in. Your configuration, your data, your control.
How to Connect Figma to Windsurf via MCP
Follow these steps to integrate the Figma MCP Server with Windsurf.
Open MCP Settings
Go to Settings → MCP Configuration or press Cmd+Shift+P and search "MCP"
Add the server
Paste the JSON configuration above into mcp_config.json
Save and reload
Windsurf will detect the new server automatically
Start using Figma
Open Cascade and ask: "Using Figma, help me..." — 12 tools available
Why Use Windsurf with the Figma MCP Server
Windsurf provides unique advantages when paired with Figma through the Model Context Protocol.
Windsurf's Cascade agent autonomously chains multiple tool calls in sequence, solving complex multi-step tasks without manual intervention
Purpose-built for agentic workflows — Cascade understands context across your entire codebase and integrates MCP tools natively
JSON-based configuration means zero code changes: paste a URL, reload, and all 12 tools are immediately available
Real-time tool feedback is displayed inline, so you see API responses directly in your editor without switching contexts
Figma + Windsurf Use Cases
Practical scenarios where Windsurf combined with the Figma MCP Server delivers measurable value.
Automated code generation: ask Cascade to fetch data from Figma and generate models, types, or handlers based on real API responses
Live debugging: query Figma tools mid-session to inspect production data while debugging without leaving the editor
Documentation generation: pull schema information from Figma and have Cascade generate comprehensive API docs automatically
Rapid prototyping: combine Figma data with Cascade's code generation to scaffold entire features in minutes
Figma MCP Tools for Windsurf (12)
These 12 tools become available when you connect Figma to Windsurf via MCP:
get_comments
Get comments on a Figma file
get_file
Use depth to limit node traversal (1=pages only, 2=pages+top frames). Get a Figma file
get_file_nodes
Get specific nodes from a Figma file
get_file_versions
List versions of a Figma file
get_images
Render nodes from a Figma file as images
get_local_variables
List design tokens/variables in a Figma file
get_me
Get details for the authorized Figma user
list_components
List published team components
list_project_files
List files in a project
list_styles
List published team styles
list_team_projects
List projects in a Figma team
post_comment
Post a comment on a Figma file
Example Prompts for Figma in Windsurf
Ready-to-use prompts you can give your Windsurf agent to start working with Figma immediately.
"List all projects in my Figma team ID 123456."
"Get the document tree for file key abcDEF123."
"Render nodes 1:2 and 1:5 as PNG images."
Troubleshooting Figma MCP Server with Windsurf
Common issues when connecting Figma to Windsurf through the Vinkius, and how to resolve them.
Server not connecting
Figma + Windsurf FAQ
Common questions about integrating Figma MCP Server with Windsurf.
How does Windsurf discover MCP tools?
mcp_config.json file on startup and connects to each configured server via Streamable HTTP. Tools are listed in the MCP panel and available to Cascade automatically.Can Cascade chain multiple MCP tool calls?
Does Windsurf support multiple MCP servers?
mcp_config.json. Each server's tools appear in the MCP panel and Cascade can use tools from different servers in a single flow.Connect Figma with your favorite client
Step-by-step setup guides for every MCP-compatible client and framework:
Anthropic's native desktop app for Claude with built-in MCP support.
AI-first code editor with integrated LLM-powered coding assistance.
GitHub Copilot in VS Code with Agent mode and MCP support.
Purpose-built IDE for agentic AI coding workflows.
Autonomous AI coding agent that runs inside VS Code.
Anthropic's agentic CLI for terminal-first development.
Python SDK for building production-grade OpenAI agent workflows.
Google's framework for building production AI agents.
Type-safe agent development for Python with first-class MCP support.
TypeScript toolkit for building AI-powered web applications.
TypeScript-native agent framework for modern web stacks.
Python framework for orchestrating collaborative AI agent crews.
Leading Python framework for composable LLM applications.
Data-aware AI agent framework for structured and unstructured sources.
Microsoft's framework for multi-agent collaborative conversations.
Connect Figma to Windsurf
Get your token, paste the configuration, and start using 12 tools in under 2 minutes. No API key management needed.