# Figma MCP > Figma MCP connects your AI agent directly to Figma files and projects. It lets you inspect complex design structures, extract reusable design tokens, render layers as high-quality images (PNG/SVG/PDF), manage comments across teams, and track project history—all without ever opening the desktop app. ## Overview - **Category:** industry-titans - **Price:** Free - **Tags:** ui-ux-design, prototyping, vector-graphics, design-systems, file-inspection, image-rendering ## Description Design assets are messy. They exist in a visual interface that’s great for designers but terrible for developers or engineers who just need clean data. This MCP lets your AI agent bypass the UI entirely. You can ask it to read the full document tree, identify specific components across an entire design system, and even extract published styles and variables so they sync perfectly with your code. Need proof of what was designed two versions ago? Your agent accesses file version history instantly. If a product manager needs to review feedback on 50 screens, you can pull all comments into one place. It treats the Figma workspace like structured data, not just pretty pictures. With Vinkius in the mix, your agent gets access to this powerful connectivity alongside thousands of other services, turning design iteration from a manual nightmare into a conversational task. ## Tools ### delete_comment Removes a comment you previously posted or found on a specified Figma file. ### get_component_set Retrieves the detailed metadata for an entire published component set within your design system. ### get_team_info Fetches general organizational details and metadata about a specific Figma team. ### get_images Renders selected nodes or frames from the design file into output images. ### get_local_variables Lists and retrieves published design tokens, styles, and local variables used in a Figma file. ### list_components Retrieves a list of all published team components available across your workspace. ### get_me Provides basic details about the authenticated user connected to the Figma account. ### get_comments Reads and lists all existing comments left on a specified Figma file. ### get_file_nodes Retrieves the details of specific, targeted nodes within a Figma file structure. ### get_file Accesses and retrieves the complete content and node hierarchy of a specified Figma file. ### get_file_versions Lists every historical version available for a given Figma file key, allowing you to check history. ### list_project_files Retrieves all individual files contained within a larger design project folder. ### list_styles Gets metadata and names for published team styles (e.g., color palettes, typography). ### list_team_projects Lists all major projects housed under a specific Figma team. ### post_comment Allows you to create and post new comments directly onto a designated Figma file. ## Prompt Examples **Prompt:** ``` List all projects in my Figma team ID 123456. ``` **Response:** ``` I've retrieved your team projects. You have 'Design System', 'Mobile App Redesign', and 'Marketing Assets'. Which project would you like to list the files for? ``` **Prompt:** ``` Get the document tree for file key abcDEF123. ``` **Response:** ``` Retrieving file tree... I've loaded the 'E-commerce App' file. It contains 5 pages: 'Onboarding', 'Checkout', 'Profile', 'Inventory', and 'Settings'. Would you like to inspect specific nodes on any page? ``` **Prompt:** ``` Render nodes 1:2 and 1:5 as PNG images. ``` **Response:** ``` Generating images... I've rendered the requested nodes. You can view them here: [Link to Node 1:2], [Link to Node 1:5]. These links are valid for 30 days flawlessly. ``` ## Capabilities ### Inspect Design Structure Retrieve the full document tree or specific layers within a file for detailed analysis. ### Render Visual Assets Generate images, components, or entire frames from Figma files in PNG, SVG, or PDF formats. ### Manage Design Tokens Extract published component metadata, styles, and local variables needed for coding. ### Coordinate Team Feedback Read existing comments or post new feedback directly onto design files. ### Navigate Projects & Teams List projects and team metadata to understand the full scope of a company's design assets. ## Use Cases ### The Hand-off Audit A developer needs to know if the current design system has a primary button color token. Instead of asking a designer to screenshot it, they prompt their agent: 'Run `get_local_variables` and find all tokens related to buttons.' The agent immediately returns structured JSON data for implementation. ### The Project Scope Review A product manager needs to audit a new feature. They ask the agent to 'List all files in the Marketing Assets project and check their version history.' This gives them a complete overview of which design elements are stable versus those still under development. ### The Missing Component A designer realizes they can't find the correct logo variant. They ask the agent to 'List all published team components.' The system filters through hundreds of files and points them toward the exact component set key, saving hours of searching. ### The Feedback Aggregator During a sprint review, an engineer asks the agent: 'Get all comments on the Checkout flow file.' The AI compiles feedback from QA, marketing, and design into one readable list, allowing for immediate prioritization. ## Benefits - [object Object] - [object Object] - [object Object] - [object Object] - [object Object] ## How It Works The bottom line is you tell the system what structural design information or asset type you need, and it gets it for you. 1. First, subscribe to this MCP and provide your Figma Personal Access Token. This authenticates your agent against your workspace. 2. Next, you tell your AI client exactly what you need: 'Get the component set metadata for X' or 'Render nodes Y and Z as SVG'. 3. Your agent executes the required action via the connection, pulling structured data (tokens, file trees) or generating the requested assets right back to your chat interface. ## Frequently Asked Questions **How do I use the Figma MCP to extract design tokens?** You use the `get_local_variables` tool. Just ask your agent to list all published variables for a specific file key, and it will return them in a structured format. **Can I render entire frames using the Figma MCP?** Yes, you can use `get_images`. You just need to specify the node IDs or frame keys, and the agent handles rendering those selected areas into PNG, SVG, or PDF. **Does the Figma MCP allow me to check old versions?** Absolutely. Run `get_file_versions` to see a list of every saved version for any file. You can then ask the agent to inspect specific nodes from that historical state. **What is the difference between listing components and styles?** Use `list_components` when you want metadata on reusable UI elements (like buttons or cards). Use `list_styles` when you are looking for global design properties like color palettes or text sizes. **How does the Figma MCP help with team collaboration?** The agent can read existing feedback using `get_comments`, compiling all comments on a file into one summary. It can also post new feedback for you via `post_comment`.