Figma MCP. Turn your design files into structured, callable data.
Gemini Works with every AI agent you already use
…and any MCP-compatible client
Just plug in your AI agents and start using Vinkius.
Figma MCP Server connects your AI agent directly to your design files. Inspect design structures, render layers as PNG, SVG, or PDF, and manage team comments without leaving your chat window.
Use tools like `get_local_variables` to pull design tokens or `list_components` to survey your system's available assets. It turns Figma into an actionable data source for developers and PMs.
What your AI agents can do
Delete comment
Requires file key and comment ID.
Delete a comment from a Figma file
Get comments
Retrieves all existing comments left on a specific Figma file.
Get component set
Get metadata for a published component set
Gets the full document tree or specific nodes from a Figma file, letting your agent map out the design's internal architecture.
Renders any selected Figma node or frame into specified image formats (PNG, SVG, PDF) for immediate use.
Lists published team components, styles, and local variables, pulling actionable design system metadata into your workflow.
Lists all team projects or project files, allowing your agent to scope out the entire design workspace.
Reads existing comments on a file or posts new comments using simple natural language commands.
Retrieves file version history, giving you a timeline of design changes and who made them.
Ask AI about this MCP
Supported MCP Clients
Gemini Waiting for input…
Figma MCP Server: 12 Tools for Design Workflow
Use these tools to inspect design assets, extract tokens, render images, and manage file history directly via your AI agent.
019e9aa4delete comment
Requires file key and comment ID. Delete a comment from a Figma file
019d7598get comments
Retrieves all existing comments left on a specific Figma file.
019e9aa4get component set
Get metadata for a published component set
019d7598get file
Retrieves a Figma file, allowing you to specify depth to limit node traversal (e.g., pages only or pages plus top frames).
019d7598get file nodes
Gets specific nodes from a Figma file using precise identifiers.
019d7598get file versions
Lists the historical versions of a Figma file, showing design evolution over time.
019d7598get images
Renders specified nodes from a Figma file into various image formats (PNG, SVG, PDF).
019d7598get local variables
Lists published design tokens and local variables defined within a Figma file.
019d7598get me
Retrieves basic details about the authorized Figma user connected to the server.
019e9aa4get team info
Get metadata about a Figma team
019d7598list components
Lists all published, reusable components available across the Figma team.
019d7598list project files
Lists all specific files contained within a given Figma project.
019d7598list styles
Lists all published, reusable color and text styles available across the Figma team.
019d7598list team projects
Lists all major projects currently tracked within your Figma team.
019d7598post comment
Posts a new comment on a specific Figma file, adding feedback directly via the agent.
Choose How to Get Started
Build a custom MCP for your own tools, or connect a ready-made integration from our catalog.
Build Your Own
Turn any API into an MCP. Import a spec, define Agent Skills, or deploy with MCPFusion.
- Import from OpenAPI, Swagger, or YAML specs
- Create Agent Skills with progressive disclosure
- Deploy to edge with MCPFusion framework
- Built in DLP, auth, and compliance on every call
- Real time usage dashboard and cost metering
- Publish to catalog or keep private
Make Your AI Do More
Start with Figma, then connect any of our 4,700+ other servers whenever your AI needs more. One click, no limits.
- Use this MCP plus 4,700+ others, all in one place
- Add new capabilities to your AI anytime you want
- Every connection is secured and compliant automatically
- Track usage and costs across all your servers
- Works with Claude, ChatGPT, Cursor, and more
- New servers added to the catalog every week
What you can do with this MCP connector
Yo, this Figma MCP Server hooks your AI agent right into your design files, projects, and teams. You can make your agent analyze design structures, render assets, and handle feedback without ever leaving your chat window. It treats your Figma files like an actual data source for your coding workflow.
Analyze File Structure: Use get_file to pull the whole document tree, or get_file_nodes to nail down specific nodes using precise IDs. Your agent maps out the design's internal architecture, so you know the hierarchy before you write a line of code.
Export Visual Assets: get_images renders any selected node or frame—components, layers, whatever—into PNG, SVG, or PDF formats. You get the images you need right there.
Extract Design Tokens: You can list all published, reusable components using list_components, and check out all published color and text styles with list_styles. get_local_variables pulls published design tokens and local variables right out of the file, feeding actionable metadata straight into your workflow.
Navigate Projects: Your agent can list all major projects within your team using list_team_projects, or scope out all specific files inside a given project using list_project_files. You can even get a rundown of all files in a project using list_project_files.
Manage Feedback: You can pull all existing comments left on a file using get_comments, or you can drop new feedback directly onto a file with post_comment. Keeps the feedback loop going without opening the Figma UI.
Review History: get_file_versions lists the historical versions of a file, showing the design's evolution and who made the changes over time. You can also check basic user details using get_me.
How Figma MCP Works
- 1 Subscribe to the server and provide your Figma Personal Access Token (found in your Account Settings).
- 2 Tell your AI client what you need (e.g., 'Get the file nodes for the main dashboard page').
- 3 The client calls the specific tool, and the server returns the structured data or rendered image.
The bottom line is that your AI client treats Figma not as a graphical editor, but as a structured, callable data source.
Who Is Figma MCP For?
Product Designers who hate manual documentation. Frontend Developers who are tired of copy-pasting CSS values. Product Managers who need to track design progress without opening the Figma app. If your job involves bridging design assets and code, this is for you.
Uses get_local_variables and list_styles to pull component metadata and design tokens directly into a React or Vue codebase.
Uses get_images to render frames for documentation and uses get_file_nodes to document the internal structure of a new feature.
Uses list_team_projects and get_comments to monitor overall design progress and gather feedback across multiple team files.
What Changes When You Connect
- Use
get_local_variablesto pull design tokens and styles. Instead of manually checking the Figma Dev panel, your agent gets the token JSON directly, speeding up component setup. - Never manually export a frame again. The
get_imagestool renders any selected node into PNG, SVG, or PDF formats right from your chat, perfect for documentation buildouts. - Track design evolution with
get_file_versions. Instead of jumping between version tabs, your agent summarizes the file's history and the key changes between versions. - Manage feedback instantly. Use
get_commentsto pull all open critique on a file, orpost_commentto drop a quick note, keeping the feedback loop alive in the agent conversation. - Scope out the entire design system.
list_team_projectsandlist_componentslet your agent list all available work and reusable assets, giving you a full view of the design scope. - Pinpoint file structure details.
get_file_nodeslets your agent retrieve the exact document tree for a file, mapping out layers and pages without you having to click through the UI.
Real-World Use Cases
Documenting a New Component Library
A Product Designer needs to document a new component library. Instead of manually taking screenshots, they ask their agent to run list_components and list_styles. The agent aggregates the list of all published components and styles, providing a structured list for the README file.
Auditing Design Progress
A Product Manager wants to know the status of the 'Mobile Redesign' project. They ask the agent to run list_team_projects and then get_comments on the relevant file. The agent reports the project files and summarizes the latest feedback, flagging any files with outstanding comments.
Preparing Code for Handoff
A Frontend Developer needs to sync component metadata. They run get_local_variables to extract the design tokens, and then use get_file_nodes to understand the required structure. The agent outputs a clean JSON object ready for direct use in a configuration file.
Checking a Specific File's State
A Developer is debugging a visual glitch. Instead of manually inspecting the file, they ask the agent to run get_file_nodes on the problematic page key. The agent returns the exact node structure, allowing them to pinpoint the source of the issue immediately.
The Tradeoffs
Manual Asset Exporting
A designer has to manually select a frame, go to File > Export, and choose PNG/SVG for every asset needed for a presentation.
→
Use get_images to render the required nodes directly into the agent conversation. You specify the node and the desired format (PNG, SVG, PDF) in one prompt.
Searching for Design Tokens
A developer spends 20 minutes clicking through the Figma UI's style panel, trying to copy the correct hex code or variable name for the primary button color.
→
Run get_local_variables to get a structured list of all published tokens. The agent outputs the token name and its exact value, ready for copy-pasting into your code.
Tracking Design History
A PM has to open the Figma file, click 'Version History', and manually compare screenshots across several dated versions to see when a feature was added.
→
Use get_file_versions. The agent retrieves the version timeline, and you ask it to summarize the changes between two specific dates or versions.
When It Fits, When It Doesn't
Use this server if your workflow requires treating design assets as structured data. You need to programmatically inspect file trees, extract tokens, or render assets without opening the Figma app. This is perfect for Dev/Design handoff.
Don't use this if you just need to see the file in a normal browsing session. You can't replace the visual feedback of the Figma canvas. Also, don't use it for collaborating on the visual side—it's for data. If you only need to send a simple comment, post_comment works, but if you need to list the whole team's project scope, you need the full suite of tools.
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.
VINKIUS INFRASTRUCTURE
Cloud Hosted
Managed infra
V8 Isolated
Sandboxed per request
Zero-Trust Proxy
No stored credentials
DLP Enforced
Policy on every call
GDPR Compliant
EU data residency
Token Compression
~60% cost reduction
Works with Claude, ChatGPT, Cursor, and more
The Model Context Protocol standardizes how applications expose capabilities to LLMs. Instead of operating in isolation, your AI gains direct access to external platforms, live data, and real-world actions through secure, standardized connections.
This server provides 15 capabilities that interface natively with Claude, ChatGPT, Cursor, and any MCP client. No middleware. No custom integration required.
Available Capabilities
Handoff shouldn't mean opening a dozen different tabs.
Today, moving from design to code requires a manual ritual: open Figma, find the right frame, right-click, export the SVG. Then open the style panel, copy the hex code. Then open the component library, find the token name, and copy that too. You spend half your time managing the tools, not writing code.
With the Figma MCP Server, you ask your agent for the assets. It runs `get_images` and `get_local_variables` and returns the files and the token JSON right in your chat. You don't leave the chat; you just get the data.
Figma MCP Server: Design Tokens and Assets
Before this, getting the full scope of a project meant clicking through `list_team_projects` and then manually checking the component library. You only saw what was visible on the screen, not the full, published system.
Now, the server runs `list_components` and `list_styles` for you. You get a complete, machine-readable manifest of every reusable piece and style, making your design system fully visible to your agent.
Common Questions About Figma MCP
How do I use the `get_images` tool in Figma MCP Server? +
You use get_images by providing the specific node key and the desired format (e.g., PNG or SVG). It renders the node and returns a direct link to the image file in your conversation.
What does `get_local_variables` do? +
get_local_variables pulls the full list of published design tokens and local variables from the file. This is how your agent gets the raw data needed for coding.
Can I find all the projects in my Figma team using `list_team_projects`? +
Yes, list_team_projects lists every major project file in your Figma team. This gives you a high-level view of the entire design department's work.
Is `get_file_nodes` better than `get_file`? +
get_file_nodes lets you target specific, named components within a file. get_file gives you a broader view of the entire file's content tree, useful for general inspection.
How do I manage feedback with `post_comment`? +
post_comment posts a new comment on a file. You just need to specify the file key and the text of the comment, and the agent handles the rest.
How do I track changes using the `get_file_versions` tool? +
The get_file_versions tool lists every save point and major revision of your Figma file. You can use this list to pinpoint exactly when a specific design element was added or changed by a team member.
What is the difference between `get_file` and `get_file_nodes`? +
The get_file tool gets the overall structure of a file, while get_file_nodes lets you pull specific, granular pieces of data. Use get_file_nodes when you need to target a known component or layer ID, rather than traversing the entire file.
Can I retrieve design tokens using `list_styles` or `get_local_variables`? +
You can use both. list_styles pulls published, team-wide styles, while get_local_variables accesses the design tokens and variables defined directly within a specific file.
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 tool allows you to specify a File Key and Node IDs to receive high-quality render URLs in PNG, SVG, or PDF formats flawlessy.
Multi-server workflows that include Figma MCP
MCP Servers 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 MCP Servers
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 MCP Servers
Design files reviewed, dev tasks created and team notified , one conversation, zero handoff meetings
Use it with your favorite AI tools
Connect this server to Cursor, Claude, VS Code, and more.
More in this category
BigCommerce
Manage your online store with product catalogs, order fulfillment, and customer data for high-volume e-commerce operations.
Microsoft Clarity
See exactly how users interact with your website through heatmaps, session recordings, and behavioral analytics that reveal UX insights.
Shipmondo
Ship packages across Scandinavia and Europe with multi-carrier label printing, tracking, and return management from one platform.
You might also like
Deterministic Roman Numeral Converter
Equip your AI with flawless mathematical conversion between integers and Roman numerals, featuring strict regex range validation.
Avochato
Manage business messaging, contacts, and broadcasts via Avochato — orchestrate SMS and MMS directly via AI.
Cartola FC (Fantasy Football)
The definitive server for Cartola FC — track scouts, player values, and live scores for Brasileirão Série A.