# Figma MCP for AI Agents AI Agent Connect > Figma MCP for AI Agents. Give your agent the ability to read design files, inspect specific nodes, and export assets directly. Stop switching tabs to check comments or find specific component keys. This Connector connects your Figma account to your AI client so you can audit design systems and track version history through a simple chat interface. ## Overview - **Category:** loved-by-devs - **Price:** Free - **Endpoint:** https://edge.vinkius.com/vk_preview_ivWhA3xt4LH36A28LVWbb3vsRp3bTbRWHh24w7Lb/ai-agent-connect - **Tags:** ui-ux-design, design-systems, prototyping, asset-export, file-inspection, version-history ## Description Most designers and developers spend half their day jumping between Figma and their code editor. You have to find a file key, copy a hex code, or ask a teammate for a comment update. This Figma MCP changes that by letting your agent do the hunting for you. Instead of manual searching, you can just ask your agent to find a specific component or list all the images in a file. It pulls the actual node properties and styles so you can see exactly what you're building. If you need an export, the agent handles the rendering to PNG or SVG at the scale you need. It also lets you manage the social side of design by reading and posting comments or reacting to feedback. You can even audit your entire team's component library to see what's published and what's missing. You'll find this Figma MCP among the high-quality tools in the Vinkius catalog for anyone who lives in both design and code. It turns your AI into a design ops assistant that knows your files as well as you do. You can check version history to see how a design has evolved over months or grab the latest comments to see what the stakeholders are saying. It removes the friction of constant context switching and lets you stay focused on the actual work of building products. ## Tools ### get_comment_reactions See who reacted to a specific comment and when they did it. This provides a quick pulse on design discussions. ### get_comments Review all feedback and discussion threads on a specific Figma file. This pulls the whole conversation into your agent. ### get_component Get a published component by its key to see its name and description. Use this to quickly identify specific library items. ### get_file Fetch the full node hierarchy and styles of a Figma file using its key. This lets you see the complete structure of a design. ### get_file_versions Browse the history of a file to see labels and creator info. This helps you track how a design has evolved over time. ### get_image_fills List all image URLs used in a design file for easier cataloging. This is great for auditing all assets in a layout. ### get_images Render specific nodes as PNG, JPG, SVG, or PDF at custom scales. It provides direct URLs for your exported assets. ### get_user Verify your connection by fetching your authenticated Figma user details. Use this to confirm your token is working. ### get_team_component_sets View the structure of your team's published design system libraries. This helps you understand your team's standards. ### get_team_components Audit all published components for a specific Figma team. Use this to find and review every library item. ### post_comment Add a new comment to a file or reply to an existing one with a pinned location. This manages feedback in real time. ### get_file_nodes Inspect specific frames or components without loading the whole file. It saves time by targeting only the parts you need. ### get_project_files List all files within a specific Figma project including modification dates. This helps you organize your workspace. ### get_recent_files Quickly find files you've been working on lately with thumbnail URLs. It skips the manual search in the Figma dashboard. ### get_team_projects List all projects within a Figma team using your team ID. This gives you a high-level view of your team's work. ### post_comment_reaction Add emojis like 👍 or 🔥 to existing comments on a Figma file. This helps you acknowledge feedback quickly. ## Prompt Examples **Prompt:** ``` What are the latest comments on the Checkout page design? ``` **Response:** ``` I've reviewed the comments on the **Checkout** page. Here is the latest feedback: * **Sarah:** "The button contrast doesn't meet WCAG AA standards" (2 hours ago) * **Mike:** "Can we change the primary color to #3B82F6?" (4 hours ago) * **Unresolved:** 3 comments regarding the success state animations. Would you like me to post a reply to Sarah or list all unresolved threads? ``` **Prompt:** ``` Can you list all the components in our Core UI library? ``` **Response:** ``` I found the following **Core UI** components: | Component Name | Description | Status | | :--- | :--- | :--- | | Primary Button | Main action button | Published | | Text Input | Standard text field | Published | | Modal Overlay | Background for modals | Published | | Checkbox | Selection toggle | Published | I can give you the specific node keys for any of these if you need to inspect them. ``` **Prompt:** ``` Export the Logo node as a high-res SVG. ``` **Response:** ``` I've rendered the **Logo** node as an SVG. You can download it using the link below: [Download Logo SVG](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/logo_export.svg) I used the default scale for this export. Let me know if you need it at 2x or 4x. ``` ## Capabilities ### Retrieve node properties Get specific frame or component details without opening the Figma app. ### Render design assets Export nodes as PNG, JPG, SVG, or PDF at custom scales. ### Manage comment threads Read, post, and react to feedback directly on design files. ### Audit version history Track changes and labels across different versions of a file. ### Explore team projects List files and projects within your team's workspace. ### Audit component libraries Review published component sets for your entire design system. ## Use Cases ### Inspecting node properties for dev handoff A developer asks their agent to find the padding and hex codes for a specific button. The agent uses `get_file_nodes` to pull the data instantly. ### Auditing a team's component library A design lead asks the agent to list all published components in the core library. It uses `get_team_components` to provide a full audit. ### Exporting high-res hero images A designer needs a 2x PNG of the hero section. The agent uses `get_images` to render the node and provides a direct download link. ### Reviewing feedback on a design file A product manager asks for all recent comments on the mobile app design. The agent uses `get_comments` to summarize the latest feedback. ## Benefits - Stop manual exports by using `get_images` to render assets directly to your local folder. - Speed up dev handoff by using `get_file_nodes` to see exact properties without opening a browser. - Stay updated on feedback by using `get_comments` to read all discussion threads in one place. - Maintain design consistency by using `get_team_components` to audit your library. - Track design evolution with `get_file_versions` to see exactly what changed and when. - Find files faster using `get_recent_files` to skip the manual search in the Figma dashboard. ## How It Works The bottom line is that your AI becomes a direct interface for your Figma design files. 1. Subscribe to the Figma MCP on Vinkius. 2. Provide your Figma Personal Access Token in your AI client settings. 3. Ask your agent to find files, inspect nodes, or export images. ## Frequently Asked Questions **Can the Figma MCP help me with dev handoff?** Yes, it lets your agent read exact node properties like padding, hex codes, and font sizes. This means you can get specs without leaving your code editor. **Does the Figma MCP support exporting assets?** Yes, it can render nodes as PNG, JPG, and SVG. You can ask your agent to export specific frames at different scales for your project. **How do I use the Figma MCP to check comments?** Your agent can fetch all comments from a specific file key. It can also read reactions and show you who is interacting with which design elements. **Can the Figma MCP audit my design system?** Yes, it can list all team components and sets. This makes it easy to check for consistency and ensure your library is up to date. **Can I use the Figma MCP to see version history?** Yes, it pulls labels, descriptions, and creator info for every version of a file. This helps you track how a design has evolved over time. **Is the Figma MCP good for finding recent files?** Yes, it can list your most recently accessed files with thumbnail URLs, making it much faster to jump back into a project you were just working on. **How do I create a Figma Personal Access Token?** Log in to [**Figma**](https://figma.com), click your profile icon > **Settings** > **Personal access tokens**, click **Generate new token**, give it a name and copy the token immediately — it starts with `figd_` and won't be shown again. **How do I find a Figma file key?** The file key is the long alphanumeric string in the Figma URL. For example, in `figma.com/file/abc123xyz/My-Design`, the key is `abc123xyz`. You can also get recent files using the `get_recent_files` tool. **Can I export images from Figma designs?** Yes! Use `get_images` with the file key, node IDs and format (png, jpg, svg, pdf). You can set the scale (1x-4x) for raster formats. The API returns URLs to rendered images that you can download. Use `get_file_nodes` first to discover node IDs. **Can I read and reply to comments on a design?** Yes! Use `get_comments` to read all comments on a file, `post_comment` to add a new comment or reply (using comment_id), and `post_comment_reaction` to add emoji reactions. You can also pin comments to specific canvas positions using x/y coordinates.