# Figma MCP

> Figma MCP lets your AI agent access all your design files, components, comments, and version history. You can inspect nodes, render assets as PNG or SVG, manage team projects, and track every change without leaving your chat window.

## Overview
- **Category:** loved-by-devs
- **Price:** Free
- **Tags:** ui-ux-design, design-systems, prototyping, asset-export, file-inspection, version-history

## Description

Connect your Figma account to any compatible client and treat it like a dedicated design operations assistant. Instead of jumping between tabs just to check feedback or grab an image, you talk to your agent. It instantly finds the full document tree for deep inspection, letting you see every node, style, and component property. Need assets? You can tell it which part of the file needs exporting—PNG, JPG, SVG, or PDF—and get a direct link. Plus, it keeps track of everything that’s happened: from tracking team projects to reviewing who changed what in the past using version history. When you connect through Vinkius, your AI client gets access to thousands of tools, making this Figma connection just one part of a massive workflow upgrade.

## Tools

### get_comment_reactions
Retrieves who reacted to a specific Figma comment and what emoji they used.

### get_comments
Fetches all comments on a file, including the message, author, date, and position on the canvas.

### get_component
Looks up details for a published component using its unique key.

### get_file
Retrieves the full document tree, including nodes, styles, and components, for an entire Figma file by its key.

### get_file_nodes
Gets the structure and properties of specific, requested nodes without loading the whole design file.

### get_file_versions
Provides version history details for a file, listing labels, descriptions, creators, and dates.

### get_image_fills
Lists all the image URLs used throughout a Figma design file.

### get_images
Renders specific nodes as images in formats like PNG, JPG, SVG, or PDF by providing node IDs and scale.

### get_user
Verifies the authenticated user's ID, email, and account type for token validation.

### get_project_files
Lists all files belonging to a specific Figma team project.

### get_recent_files
Finds and lists the keys, names, and last modified dates of your most recently accessed files.

### get_team_component_sets
Retrieves published component sets used across the entire Figma team's design system libraries.

### get_team_components
Gets a list of all published components for auditing purposes within a Figma team.

### get_team_projects
Lists all projects managed by the Figma team, along with their creation dates and IDs.

### post_comment
Adds a new comment to a file, optionally pinning it to specific coordinates or replying to an existing thread.

### post_comment_reaction
Applies an emoji reaction to an existing Figma comment.

## Prompt Examples

**Prompt:** 
```
Show me my recently accessed Figma files.
```

**Response:** 
```
Here are your 5 most recent files: 'Mobile App v3' (modified 2h ago), 'Design System - Components' (modified yesterday), 'Landing Page Redesign' (modified 3 days ago), 'Dashboard Analytics' (modified last week) and 'Onboarding Flow' (modified 2 weeks ago).
```

**Prompt:** 
```
Show me all comments on my Mobile App v3 design file.
```

**Response:** 
```
I found 12 comments on the file. The most recent is from Sarah: 'The button contrast doesn't meet WCAG AA standards' (2h ago, pinned to frame 47:12). There are also 3 unresolved comments from the design review meeting. Would you like the full thread for any of these?
```

**Prompt:** 
```
Export the hero section frame from my Landing Page design as a PNG at 2x scale.
```

**Response:** 
```
Done! I've rendered node '12:34' (Hero Section) as a PNG at 2x scale. The image URL is https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/... You can download it directly from this link.
```

## Capabilities

### Review Design Feedback
Pull all comments from a file, see who reacted using emojis, and read the entire discussion thread.

### Audit Component Libraries
Get a list of published components or full component sets across your team's design system.

### Inspect File Structure
Retrieve the complete hierarchy and properties for any specific node, frame, or component within a file.

### Export Visual Assets
Render specific nodes as high-resolution images (PNG, SVG, JPG, PDF) without opening the original design program.

### Track Design History
Browse all previous versions of a file, including labels and who created them, so you never lose context.

## Use Cases

### Reviewing Design Feedback for a Client Presentation
A designer needs to summarize client feedback. They ask their agent to run `get_comments` on the file, then use `get_comment_reactions` to see which comments sparked debate (lots of '🔥' or '🤔'). The agent compiles this into bullet points for a quick presentation slide.

### Developer Reference Check
A developer needs the exact specs for the primary button component. They ask their agent to run `get_component` on the key, and the response gives them the owning file details and node ID needed for implementation reference.

### Design System Audit
A Design Ops lead needs to know if all departments are using the correct color palette. They use `get_team_component_sets` and then cross-reference those against the file structure provided by `get_file` to flag inconsistencies.

### Capturing a Specific Asset
A marketing team member needs an icon for a blog post but can't access Figma. They ask their agent to run `get_images` on the specific component node ID, and the agent returns a high-res SVG link immediately.

## Benefits

- Stop opening the Figma app just to see who commented. Use `get_comments` or `get_comment_reactions` to pull all design feedback right into your conversation thread for immediate context.
- You never have to guess which version is correct again. By using `get_file_versions`, you can instantly compare design states and track exactly when a change happened, complete with creator details.
- Getting assets used to mean manual exporting. Now, use `get_images` to render any node—like the hero section or an icon set—as a precise PNG, SVG, or PDF without touching the Figma UI.
- Design systems are massive. Instead of clicking through dozens of folders, you can run `get_team_components` or `get_team_component_sets` to audit and list published components across your entire team in one go.
- Need to know what's inside a complex file? Use `get_file_nodes` to inspect specific elements, pulling out node IDs and properties without having to download the entire design structure.

## How It Works

The bottom line is you talk to your AI client, and it uses this MCP to pull live data from Figma and give you actionable answers.

1. Subscribe to this MCP on Vinkius and provide your Figma Personal Access Token.
2. Connect your AI client (Claude, Cursor, etc.) to the Vinkius catalog using that token.
3. Ask your agent a natural language question, like 'What were the changes in version 3?' or 'Export the hero section as an SVG'.

## Frequently Asked Questions

**How do I get a list of all files in my Figma project using Figma MCP?**
You run `get_project_files`. This tool lists every file within the team project, giving you keys and names so you know exactly what's available for inspection.

**Can I export a single frame from my design using Figma MCP?**
Yes. You use `get_images`, providing the specific node ID for that frame, along with your desired format (PNG, SVG, etc.) and scale setting.

**Does Figma MCP help me track changes in a design file?**
Absolutely. Use `get_file_versions` to pull the entire version history. You get labels, descriptions, who created it, and when it happened, making audits easy.

**What is the difference between getting components and getting component sets with Figma MCP?**
Use `get_team_components` to list individual published elements. Use `get_team_component_sets` if you need to audit an entire organized group of related components, like all card variations.

**Can I reply to a comment using Figma MCP?**
Yes. You can use the `post_comment` tool and include the existing comment ID in your prompt so that your agent replies directly within the thread.