# Figma MCP > 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. ## Overview - **Category:** industry-titans - **Price:** Free - **Tags:** ui-ux-design, prototyping, vector-graphics, design-systems, file-inspection, image-rendering ## Description 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`. ## Tools ### 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 ### get_file Retrieves a Figma file, allowing you to specify depth to limit node traversal (e.g., pages only or pages plus top frames). ### get_file_nodes Gets specific nodes from a Figma file using precise identifiers. ### get_file_versions Lists the historical versions of a Figma file, showing design evolution over time. ### get_images Renders specified nodes from a Figma file into various image formats (PNG, SVG, PDF). ### get_local_variables Lists published design tokens and local variables defined within a Figma file. ### get_me Retrieves basic details about the authorized Figma user connected to the server. ### get_team_info Get metadata about a Figma team ### list_components Lists all published, reusable components available across the Figma team. ### list_project_files Lists all specific files contained within a given Figma project. ### list_styles Lists all published, reusable color and text styles available across the Figma team. ### list_team_projects Lists all major projects currently tracked within your Figma team. ### post_comment Posts a new comment on a specific Figma file, adding feedback directly via the agent. ## 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 ### Analyze File Structure Gets the full document tree or specific nodes from a Figma file, letting your agent map out the design's internal architecture. ### Export Visual Assets Renders any selected Figma node or frame into specified image formats (PNG, SVG, PDF) for immediate use. ### Extract Design Tokens Lists published team components, styles, and local variables, pulling actionable design system metadata into your workflow. ### Navigate Projects Lists all team projects or project files, allowing your agent to scope out the entire design workspace. ### Manage Feedback Reads existing comments on a file or posts new comments using simple natural language commands. ### Review History Retrieves file version history, giving you a timeline of design changes and who made them. ## 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. ## Benefits - Use `get_local_variables` to 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_images` tool 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_comments` to pull all open critique on a file, or `post_comment` to drop a quick note, keeping the feedback loop alive in the agent conversation. - Scope out the entire design system. `list_team_projects` and `list_components` let your agent list all available work and reusable assets, giving you a full view of the design scope. - Pinpoint file structure details. `get_file_nodes` lets your agent retrieve the exact document tree for a file, mapping out layers and pages without you having to click through the UI. ## How It Works The bottom line is that your AI client treats Figma not as a graphical editor, but as a structured, callable data source. 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. ## Frequently Asked Questions **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.