How to Use the Figma MCP in Claude

Q: Can Claude Desktop use Figma to inspect files?

Yes. Once configured, you can ask your agent to use getfile or getfilenodes to inspect layers, auto-layout settings, and metadata.

Stop context switching. Use the Figma MCP Server directly inside Claude Desktop to pull design data and post comments instantly.

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 Claude Desktop

Create your Vinkius account to connect Figma to Claude Desktop 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 Claude Desktop

Ask AI about this MCP

ChatGPT

Claude

Perplexity

Sync design tokens with Claude Desktop

Stop guessing hex codes or spacing values. Use `get_local_variables` to pull your design system tokens directly into your chat session. Your AI client interprets these variables to generate accurate CSS or Tailwind classes without manual translation.

Visualize Figma frames in Claude Desktop

Need to see the UI you are building? Use `get_images` to render specific nodes as PNGs right inside your chat window. This gives your agent immediate visual context, ensuring the code it writes matches the design intent perfectly.

Manage feedback loops via Claude Desktop

Stop jumping between your editor and the browser to track design feedback. Use `get_comments` to pull active threads and `post_comment` to reply from your desktop. This keeps your communication centralized while you work, letting you address design blockers without leaving your flow.

Setup guide

Set up Figma MCP in Claude Web or Desktop

1

Open Claude Settings

Go to claude.ai, click your profile icon, then navigate to Customize → Connectors.
2

Add Custom Connector

Click the "+" button and select Add custom connector. Paste your Vinkius endpoint URL: https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp Replace [YOUR_TOKEN_HERE] with your token from cloud.vinkius.com. For OAuth-protected servers, expand Advanced settings to add credentials.
3

Start a conversation

Open a new chat. The Figma MCP tools are available immediately — no restart needed.

Endpoint URL

https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp

No configuration file needed — paste the URL directly in the Claude web interface.

Available on Free (1 connector), Pro, Max, Team, and Enterprise plans.

Prerequisites

Claude Desktop installed (macOS or Windows)
Active Vinkius subscription with a valid endpoint token

1

Open Claude Desktop Settings

Click the menu icon at the top-left corner, go to Settings → Developer → Edit Config. This opens claude_desktop_config.json in your default text editor.
2

Paste the Figma MCP configuration

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

Restart Claude Desktop

Close and reopen the application. Claude needs a full restart to load new MCPs — refreshing a conversation is not enough.
4

Verify the connection

Open a new conversation. Click the 🔌 icon at the bottom of the message input. You should see tools listed under figma-mcp.

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 Claude Desktop

Open your configuration file via Settings, Developer, Edit Config. Add the server details under the mcpServers key, save, and restart the app.

Yes. Once configured, you can ask your agent to use `get_file` or `get_file_nodes` to inspect layers, auto-layout settings, and metadata.

It does. Claude Desktop acts as the host, allowing the server to communicate with the Figma API securely using your provided credentials.

Vinkius manages the connection, and your data only flows between the Figma API and your local client. No third-party servers store your design assets.

The server accesses file metadata, layer properties, and comments. It only reads what you explicitly request via tool calls, ensuring your private design files remain secure.

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