How to Use the Figma MCP in Windsurf

Q: How do I connect Figma to Windsurf?

Add the server configuration to your mcpconfig.json file. Once added, click refresh in the MCP panel to give Cascade access to your design data.

Q: Can Windsurf fetch Figma file nodes automatically?

Yes. Cascade uses getfilenodes to pull specific UI structures into your context window. It handles the heavy lifting of parsing the API response.

Q: Does this MCP server track design system changes?

It does. You can use listcomponents to see what is currently published in your team projects and pull the latest versions into your build.

Q: How does the Figma server handle large files?

Use the depth parameter in getfile to limit how much data the client pulls. This prevents memory issues when dealing with massive Figma files.

Let Cascade pull design tokens and render Figma layers directly in Windsurf for faster builds.

See Vinkius in Action

Works with every AI agent you already use

…and any MCP-compatible client

MCP Servers - Free for Subscribers

Connect Figma MCP to Windsurf

Create your Vinkius account to connect Figma to Windsurf and route execution through our secure gateway. The platform manages server hosting, runtime updates, and security layers. Configuration requires no manual server provisioning.

GDPR Free for Subscribers

Setup Figma with Windsurf

Ask AI about this MCP

ChatGPT

Claude

Perplexity

Auto-sync design tokens in Windsurf

Cascade reads your design system data without leaving the editor. It uses `list_styles` and `list_local_variables` to map Figma tokens to your codebase. Stop guessing hex codes. When the design team updates a variable, Cascade detects the change and updates your CSS files accordingly.

Render Figma layers as project assets

Generate high-fidelity previews of your UI components using `get_images`. Cascade pulls the exact node data and saves the render into your workspace. This lets you verify UI implementation against the source. You see exactly what the design team intends before you commit a single line of code.

Manage Figma feedback inside the IDE

Keep design discussions in the loop by using `post_comment` and `get_comments` from the chat panel. You don't need to switch tabs to reply to design feedback. Cascade handles the context. It pulls the relevant file data so you can address comments while staying focused on your implementation tasks.

Setup guide

Set up Figma MCP in Windsurf

Prerequisites

Windsurf IDE installed (macOS, Windows, or Linux)
Active Vinkius subscription with a valid endpoint token

1

Open MCP configuration

Click the Cascade assistant icon in the sidebar, then click the hammer icon (🔨) at the top of the panel. Select "Configure" to open ~/.codeium/windsurf/mcp_config.json.
2

Add the Figma MCP

Paste the JSON snippet shown on the right into the mcpServers object. Replace [YOUR_TOKEN_HERE] with your endpoint token from cloud.vinkius.com.
3

Refresh MCPs

Go back to the hammer icon (🔨) in Cascade and click "Refresh". Windsurf will detect the new server. No full restart is needed — the connection is hot-reloaded.
4

Verify in Cascade

Start a new Cascade conversation and ask something like "Show my Figma payment history." If connected, Cascade will call the Figma tools directly. You will see a green dot next to the server name in the MCP panel.

mcp_config.json

{
  "mcpServers": {
    "figma-mcp": {
      "url": "https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp"
    }
  }
}

Get your connection token →

Independent Platform Disclaimer: Vinkius is an independent platform and is not affiliated with, endorsed by, sponsored by, verified by, or otherwise authorized by Figma. All third-party trademarks, logos, and brand names are the property of their respective owners. Their use on this website is strictly for informational purposes to identify service compatibility and interoperability.

Why Choose Vinkius

Vinkius connects your tools to AI with real-time monitoring and automatic cost savings — all from one dashboard.

Connect Figma now

Real-time monitoring

Live

visibility into every interaction

Connect your favorite tools to your AI and see exactly what's happening — every request, every response, in real time.

Built-in savings

60%

lower AI costs

Vinkius compresses data between your apps and your AI automatically. Lower bills every month — no configuration required.

Single dashboard

One

place for every integration

Every tool your AI connects to, managed from a single screen. One account, complete control.

Common questions about Figma MCP in Windsurf

Add the server configuration to your `mcp_config.json` file. Once added, click refresh in the MCP panel to give Cascade access to your design data.

Yes. Cascade uses `get_file_nodes` to pull specific UI structures into your context window. It handles the heavy lifting of parsing the API response.

Your credentials never leave your machine. Vinkius manages the connection, and Windsurf uses your local token to talk directly to the Figma API.

It does. You can use `list_components` to see what is currently published in your team projects and pull the latest versions into your build.

Use the depth parameter in `get_file` to limit how much data the client pulls. This prevents memory issues when dealing with massive Figma files.

Use it with your favorite AI tools

Connect this server to Cursor, Claude, VS Code, and more.

OpenAI Agents SDK sdk-python

Google ADK sdk-python

Pydantic AI sdk-python

Vercel AI SDK sdk-typescript

Mastra AI sdk-typescript

Start using the Figma MCP today

We host it, we monitor it, we maintain it. You just paste one token.

Get started