Figma Connector for AI agents.
15 live capabilities
Get design tokens and render assets from Figma files.
Waiting for input…
Why people use Figma
Figma for Design System Documentation
With this Connector, your agent does the work. You just ask for the latest styles, and it uses get_local_variables to pull them instantly. You get a live connection between your design files and your work.
What Vinkius changes
Your AI agent becomes a first-class citizen in your Figma workspace.
Use it from Claude, ChatGPT, Cursor or another AI client you already have.
One account · 5,900+ Connectors
- Real-world use case 01
Syncing Design Tokens
A frontend developer asks the agent to list all local variables in the 'Brand' file.
- Real-world use case 02
Automated Asset Exports
A designer needs to show a specific mobile screen.
- Real-world use case 03
Feedback Summarization
A product manager wants to know what people are saying about a new feature.
Complete set · 15capabilities
The complete Figma capability set.
These are the exact actions your AI can choose when you ask it to work with Figma.
01—04
4 capabilities in this set.
Part of 15 available through Figma.
- 01 Capability
Get images
Render nodes from a Figma file as images. This turns your designs into viewable PNGs or PDFs.
- 02 Capability
Get local variables
List design tokens and variables in a Figma file. This is perfect for syncing styles to code.
- 03 Capability
List components
List published team components. Use this to see all your reusable elements at once.
- 04 Capability
Get comments
Get comments on a Figma file. Use this to read through all the feedback in one place.
05—08
4 capabilities in this set.
Part of 15 available through Figma.
- 05 Capability
Get file nodes
Get specific nodes from a Figma file. This lets your agent inspect deep design structures.
- 06 Capability
Get file
Get a Figma file with depth limits. Use this to navigate pages and top frames efficiently.
- 07 Capability
Get file versions
List versions of a Figma file. This helps you track how a design has evolved over time.
- 08 Capability
List project files
List files in a project. Use this to find specific assets within a large folder.
09—12
4 capabilities in this set.
Part of 15 available through Figma.
- 09 Capability
List styles
List published team styles. This is the fastest way to see your global design system.
- 10 Capability
List team projects
List projects in a Figma team. Use this to navigate your entire design workspace.
- 11 Capability
Post comment
Post a comment on a Figma file. Use this to send feedback to your team directly from your agent.
- 12 Capability
Delete comment
Delete a specific comment from a Figma file. Use this to clean up old feedback threads.
13—15
3 capabilities in this set.
Part of 15 available through Figma.
- 13 Capability
Get component set
Get metadata for a published component set. This helps you see what's available in your library.
- 14 Capability
Get team info
Get metadata about a Figma team. Use this to see high-level team details.
- 15 Capability
Get me
Get details for the authorized Figma user. This confirms who is currently connected.
Set up in minutes
One URL. Then ask Figma to work.
Claude and ChatGPT only need the Connector URL. Copy it once, add it in settings, and use Figma from the conversation.
Choose your client
Live previewAdvanced clients IDE · CLI
Claude · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_259SBocJyDiuTotSWjQKeGBx55ULMHMQHRbOcsF5/mcp - Step 01
Open Connectors
In Claude Web or Claude Desktop, open Settings and choose Connectors.
- Step 02
Add the URL
Choose Add custom connector, name it Figma, and paste the URL above.
- Step 03
Turn it on in chat
Select +, open Connectors, and enable Figma for the conversation.
ChatGPT · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_259SBocJyDiuTotSWjQKeGBx55ULMHMQHRbOcsF5/mcp - Step 01
Open MCP settings
On desktop, open Settings and MCP servers. On web, open your workspace app or connector settings.
- Step 02
Add the URL
Choose Add server with Streamable HTTP, or create a custom MCP app, then paste the Figma URL.
- Step 03
Save and start
Save the connection and enable Figma in your conversation. Desktop may ask you to restart once.
Cursor · IDE configuration
Advanced setup
{
"mcpServers": {
"figma": {
"url": "https://edge.vinkius.com/vk_preview_259SBocJyDiuTotSWjQKeGBx55ULMHMQHRbOcsF5/mcp"
}
}
}- Step 01
Open MCP Settings
Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux) → search "MCP Settings"
- Step 02
Add the server config
Paste the JSON configuration above into the mcp.json file that opens
- Step 03
Save the file
Cursor will automatically detect the new Connector
- Step 04
Start using Figma
Open Agent mode in chat and ask: "Using Figma, help me...". 15 tools available
VS Code Copilot · IDE configuration
Advanced setup
{
"mcpServers": {
"figma": {
"url": "https://edge.vinkius.com/vk_preview_259SBocJyDiuTotSWjQKeGBx55ULMHMQHRbOcsF5/mcp"
}
}
}- Step 01
Create MCP config
Create a .vscode/mcp.json file in your project root
- Step 02
Add the server config
Paste the JSON configuration above
- Step 03
Enable Agent mode
Open GitHub Copilot Chat and switch to Agent mode using the dropdown
- Step 04
Start using Figma
Ask Copilot: "Using Figma, help me...". 15 tools available
Windsurf · IDE configuration
Advanced setup
{
"mcpServers": {
"figma": {
"url": "https://edge.vinkius.com/vk_preview_259SBocJyDiuTotSWjQKeGBx55ULMHMQHRbOcsF5/mcp"
}
}
}- Step 01
Open MCP Settings
Go to Settings → MCP Configuration or press Cmd+Shift+P and search "MCP"
- Step 02
Add the server
Paste the JSON configuration above into mcp_config.json
- Step 03
Save and reload
Windsurf will detect the new server automatically
- Step 04
Start using Figma
Open Cascade and ask: "Using Figma, help me...". 15 tools available
Cline · IDE configuration
Advanced setup
{
"mcpServers": {
"figma": {
"url": "https://edge.vinkius.com/vk_preview_259SBocJyDiuTotSWjQKeGBx55ULMHMQHRbOcsF5/mcp"
}
}
}- Step 01
Open Cline MCP Settings
Click the Connectors icon in the Cline sidebar panel
- Step 02
Add remote server
Click "Add Connector" and paste the configuration above
- Step 03
Enable the server
Toggle the server switch to ON
- Step 04
Start using Figma
Ask Cline: "Using Figma, help me...". 15 tools available
Claude Code · Terminal command
Advanced setup
claude mcp add figma --transport http "https://edge.vinkius.com/vk_preview_259SBocJyDiuTotSWjQKeGBx55ULMHMQHRbOcsF5/mcp"- Step 01
Install Claude Code
Run npm install -g @anthropic-ai/claude-code if not already installed
- Step 02
Add the Connector
Run the command above in your terminal
- Step 03
Verify the connection
Run claude mcp to list connected servers, or type /mcp inside a session
- Step 04
Start using Figma
Ask Claude: "Using Figma, show me...". 15 tools are ready
Where the request belongs
Work Figma can move forward.
This is for product designers tired of manual exports, frontend devs who hate hunting for hex codes, and PMs who want to check design progress without digging through tabs.
Product Designer
You use this to automate asset handoffs and pull design tokens into documentation without manual exports.
Frontend Developer
You use this to grab styles and component metadata directly into your coding workflow.
Product Manager
You use this to summarize feedback and monitor design progress through simple chat queries.
When one Connector is not enough
Carry the request into a workflow.
Combine Figma with the systems that finish the task.
View all recipesConnectors That Catch Design Drift Early
The designer updated the button radius to 12px in Figma three weeks ago but the frontend still has 8px , nobody noticed because there is no system that compares what is designed with what is deployed
MCP Workflow for Figma to Dev Handoffs
The designer finished the mockup two weeks ago and the developer just discovered it has 47 components but zero specs , now the sprint is blocked by a 'quick question' Slack thread with 130 messages
Publish Designs to Webflow Using Connectors
Your designer finishes the Figma mockup on Tuesday, the social media manager recreates it in Canva on Wednesday, and the web developer rebuilds it in Webflow on Thursday , three people doing versions of the same work for the same client
Ship Design Handoffs Smoothly Using Connectors
Design files reviewed, dev tasks created and team notified , one conversation, zero handoff meetings
Build the capability set
Add more capabilities.
Each Connector adds new actions and data without changing how you work.
Browse ConnectorsFigma
Access Figma design files, comments, components and images via API. inspect nodes, render exports and track version history from any AI agent.
Pixso
Collaborative design platform and UI/UX capability. manage design files, nodes, and teams via AI.
MasterGo
Collaborative design platform and UI/UX capability. manage design files, nodes, and comments via AI.
Lanhu
Product design collaboration platform. manage design files, handoffs, and team feedback via AI.
Framer
Equip your AI agent with direct access to Framer. manage CMS collections, sync content, and publish site changes without opening the Framer editor.
Miro
Brainstorm, plan, and design together on an infinite visual canvas that brings distributed teams into the same creative space.
Bring your own AI
Change the model, client or framework. Keep Figma connected.
-
Claude -
ChatGPT -
Gemini -
Cursor -
VS Code -
Windsurf -
ZCode -
Cline -
Zed -
Continue -
Kiro -
Roo Code -
Zencoder -
Goose -
Void -
Augment Code -
Amp -
Qodo -
Tabnine -
Pieces -
Sourcegraph Cody -
JetBrains -
Warp -
Amazon Q -
Antigravity -
BoltAI -
Raycast -
Jan -
LM Studio -
AnythingLLM -
Open WebUI -
Msty -
Cherry Studio -
LibreChat -
TypingMind -
Chorus -
5ire -
n8n -
LangChain -
LlamaIndex -
CrewAI -
Vercel AI SDK
Before you connect
Questions about Figma.
The practical details behind the request, access and result.
Can the Figma MCP export my designs as images?
Yes, it can. Your agent can render specific frames or nodes as PNG, SVG, or PDF files on demand, giving you instant access to assets without manual exports.
Does Figma MCP work with Cursor or VS Code?
Yes, it works with any MCP-compatible client. Once you connect it through Vinkius, you can use it directly within Cursor, VS Code, Claude, or Windsurf.
Can my agent see my design tokens?
Exactly. It can pull local variables and published styles directly from your Figma files, making it easy to keep your code in sync with your designs.
How do I give the Figma MCP access to my files?
You'll need to generate a Personal Access Token in your Figma Account Settings. Once you provide that to the Connector, your agent can see your projects and files.
Can I use Figma MCP to manage team comments?
Yes, it can read existing comments and post new ones. This allows your agent to help manage the feedback loop and keep your team updated on design progress.
Does Figma MCP support version history?
Yes, it can list the different versions of a Figma file, allowing you to see how a design has changed over time through your AI agent.
How do I obtain my Figma Personal Access Token?
Log in to Figma, click on your name in the top-left to go to Account Settings, scroll down to the Personal access tokens section, and click Create a new personal access token.
Where can I find the File Key?
Open any Figma file in your browser. The URL will look like https://www.figma.com/file/:key/:title. The random string of characters after /file/ is your File Key.
Can I render design layers as images via chat?
Yes! The get_images capability allows you to specify a File Key and Node IDs to receive high-quality render URLs in PNG, SVG, or PDF formats flawlessy.
One connection away
Give your agent a direct line to Figma.
Connect Figma once. Keep it beside 5,900+ managed Connectors when the next task needs more.
Explore every Connector No credit card required · Free tier available