{"id":30595969,"url":"https://github.com/figma/dev-mode-mcp-server-guide","last_synced_at":"2025-08-29T21:06:12.131Z","repository":{"id":310658900,"uuid":"1032420465","full_name":"figma/dev-mode-mcp-server-guide","owner":"figma","description":"A guide on how to use the Dev Mode MCP server","archived":false,"fork":false,"pushed_at":"2025-08-19T12:02:40.000Z","size":9,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-19T14:21:28.868Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server","language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/figma.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-05T09:28:24.000Z","updated_at":"2025-08-19T12:29:25.000Z","dependencies_parsed_at":"2025-08-19T14:21:40.523Z","dependency_job_id":null,"html_url":"https://github.com/figma/dev-mode-mcp-server-guide","commit_stats":null,"previous_names":["figma/dev-mode-mcp-server-guide"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/figma/dev-mode-mcp-server-guide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/figma%2Fdev-mode-mcp-server-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/figma%2Fdev-mode-mcp-server-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/figma%2Fdev-mode-mcp-server-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/figma%2Fdev-mode-mcp-server-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/figma","download_url":"https://codeload.github.com/figma/dev-mode-mcp-server-guide/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/figma%2Fdev-mode-mcp-server-guide/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272765493,"owners_count":24989393,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-29T02:00:10.610Z","response_time":87,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-29T21:05:52.817Z","updated_at":"2025-08-29T21:06:12.116Z","avatar_url":"https://github.com/figma.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Figma Dev Mode MCP Server Guide\n\nThe Dev Mode MCP server brings Figma directly into your workflow by providing important design information and context to AI agents generating code from Figma design files.\n\n\u003e [!WARNING]\n\u003e 🚧 The Dev Mode MCP Server is currently in [open beta](https://help.figma.com/hc/en-us/articles/4406787442711). Some functions and settings may not yet be available. The feature may change and you may experience bugs or performance issues during the beta period.\n\n\u003e [!NOTE]\n\u003e Available on a [Dev or Full seat](https://help.figma.com/hc/en-us/articles/27468498501527-Updates-to-Figma-s-pricing-seats-and-billing-experience#h_01JCPBM8X2MBEXTABDM92HWZG4) on the [Professional, Organization, or Enterprise plans](https://help.figma.com/hc/en-us/articles/360040328273-Figma-plans-and-features).\n\n## Features\n\n- **Generate code from selected frames**\n\n  Select a Figma frame and turn it into code. Great for product teams building new flows or iterating on app features.\n\n- **Extract design context**\n\n  Pull in variables, components, and layout data directly into your IDE. This is especially useful for design systems and component-based workflows.\n\n- **Code smarter with Code Connect**\n\n  Boost output quality by reusing your actual components. Code Connect keeps your generated code consistent with your codebase.\n\n  [Learn more about Code Connect →](https://help.figma.com/hc/en-us/articles/23920389749655-Code-Connect)\n\n## Step 1: Enable the MCP Server\n\n1. Open the [Figma desktop app](https://www.figma.com/downloads/) and make sure you've [updated to the latest version](https://help.figma.com/hc/en-us/articles/5601429983767-Guide-to-the-Figma-desktop-app#h_01HE5QD60DG6FEEDTZVJYM82QW).\n2. Create or open a Figma Design file.\n3. In the upper-left corner, open the Figma menu.\n4. Under **Preferences**, select **Enable Dev Mode MCP Server**.\n\n\u003cimg src=\"https://help.figma.com/hc/article_attachments/33880427925271\" width=\"300\" /\u003e\n\nYou should see a confirmation message at the bottom of the screen letting you know the server is enabled and running.\n\n\u003e [!TIP]\n\u003e The server runs locally at this location:\n\u003e ```bash\n\u003e http://127.0.0.1:3845/mcp\n\u003e ```\n\u003e Keep this address handy for your configuration file in the next step.\n\n## Step 2: Set up your MCP client\n\nOnce the server is running locally on the Figma desktop app, MCP clients will be able to connect to your server. Follow the instructions for your specific client to add the Dev Mode MCP server.\n\n### VS Code\n\n1. Use the shortcut `⌘ Shift P` to search for `MCP:Add Server`.\n2. Select `HTTP`.\n3. Paste the server url `http://127.0.0.1:3845/mcp` in the search bar, then hit `Enter`.\n4. Type in `Figma Dev Mode MCP` when it asks for a Server ID, then hit `Enter`.\n5. Select whether you want to add this server globally or only for the current workspace. Once confirmed, you'll see a configuration like this in your `mcp.json` file:\n\n```json\n{\n  \"servers\": {\n    \"Figma Dev Mode MCP\": {\n      \"type\": \"http\",\n      \"url\": \"http://127.0.0.1:3845/mcp\"\n    }\n  }\n}\n```\n\n6. Open the chat toolbar using `⌥⌘B` or `⌃⌘I` and switch to **Agent** mode.\n7. With the chat open, type in `#get_code` to confirm that the Dev Mode MCP server tools are available. If no tools are listed, restart the Figma desktop app and VS Code.\n\n\u003e [!NOTE]\n\u003e You must have [GitHub Copilot](https://github.com/features/copilot) enabled on your account to use MCP in VS Code.\n\u003e\n\u003e For more information, see [VS Code's official documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers).\n\n### Cursor\n\n1. Open **Cursor → Settings → Cursor Settings**.\n2. Go to the **MCP** tab.\n3. Click **+ Add new global MCP server**.\n4. Enter the following configuration and save:\n\n```json\n   {\n     \"mcpServers\": {\n       \"Figma\": {\n         \"url\": \"http://127.0.0.1:3845/mcp\"\n       }\n     }\n   }\n```\n\nFor more information, see [Cursor's official documentation](https://docs.cursor.com/context/model-context-protocol).\n\n### Windsurf\n\n1. Open **Windsurf → Settings → Windsurf Settings** or use the shortcut `⌘ ,`.\n2. Navigate to **Cascade settings** and select **Open plugin store**.\n3. Search for **Figma** and install the plugin.\n4. Open **Cascade** and you should see the Figma MCP server and available tools.\n\nFor more information, see [Windsurf's official documentation](https://docs.windsurf.com/windsurf/mcp).\n\n\u003e [!NOTE]\n\u003e For Windsurf, change the `url` property in the configuration file to `serverUrl` to avoid errors.\n\n### Claude Code\n\n1. Open your terminal and run:\n\n   ```bash\n   claude mcp add --transport http figma-dev-mode-mcp-server http://127.0.0.1:3845/mcp\n   ```\n\n2. Use the following commands to check MCP settings and manage servers:\n   - List all configured servers\n     ```bash\n     claude mcp list\n     ```\n   - Get details for a specific server\n     ```bash\n     claude mcp get my-server\n     ```\n   - Remove a server\n     ```bash\n     claude mcp remove my-server\n     ```\n\nFor more information, see [Anthropic's official documentation](https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/tutorials#set-up-model-context-protocol-mcp).\n\n### Other editors\n\nOther code editors and tools that support Streamable HTTP can also connect to the Dev Mode MCP server.\n\nIf you're using a different editor or tool, check its documentation to confirm it supports Streamable HTTP based communication. If it does, you can manually add the Dev Mode MCP server using this configuration:\n\n```json\n{\n  \"mcpServers\": {\n    \"Figma Dev Mode MCP\": {\n      \"url\": \"http://127.0.0.1:3845/mcp\"\n    }\n  }\n}\n```\n\n## Step 3: Prompt your MCP client\n\nThe Dev Mode MCP server introduces a set of tools that help LLMs translate designs in Figma. Once connected, you can prompt your MCP client to access a specific design node.\n\nThere are two ways to provide Figma design context to your AI client:\n\n### Selection-based\n\n1. Select a frame or layer inside Figma using the desktop app.\n2. Prompt your client to help you implement your current selection.\n\n   \u003cimg src=\"https://help.figma.com/hc/article_attachments/32209690330263\" width=\"300\" /\u003e\n\n### Link-based\n\n1. Copy the link to a frame or layer in Figma.\n2. Prompt your client to help you implement the design at the selected URL.\n\n\u003cimg src=\"https://help.figma.com/hc/article_attachments/34049303807895\" width=\"300\" /\u003e\n\n\u003e [!NOTE]\n\u003e Your client won't be able to navigate to the selected URL, but it will extract the node-id that is required for the MCP server to identify which object to return information about.\n\n## Tools and usage suggestions\n\n### `get_code`\n\nUse this to generate code for your Figma selection using the MCP server. The default output is **React + Tailwind**, but you can customize this through your prompts:\n\n- Change the framework\n  - \"Generate my Figma selection in Vue.\"\n  - \"Generate my Figma selection in plain HTML + CSS.\"\n  - \"Generate my Figma selection in iOS.\"\n\n- Use your components\n  - \"Generate my Figma selection using components from src/components/ui\"\n  - \"Generate my Figma selection using components from src/ui and style with Tailwind\"\n\n  You can paste links or select the frame or component in Figma before prompting.\n\n  [Learn how to set up Code Connect for better component reuse →](https://help.figma.com/hc/en-us/articles/23920389749655-Code-Connect)\n\n### `get_variable_defs`\n\nReturns variables and styles used in your selection—like colors, spacing, and typography.\n\n- List all tokens used\n  - \"Get the variables used in my Figma selection.\"\n- Focus on a specific type\n  - \"What color and spacing variables are used in my Figma selection?\"\n- Get both names and values\n  - \"List the variable names and their values used in my Figma selection.\"\n\n### `get_code_connect_map`\n\nRetrieves a mapping between Figma node IDs and their corresponding code components in your codebase. Specifically, it returns an object where each key is a Figma node ID, and the value contains:\n\n- `codeConnectSrc`: The location of the component in your codebase (e.g., a file path or URL).\n- `codeConnectName`: The name of the component in your codebase.\n\nThis mapping is used to connect Figma design elements directly to their React (or other framework) implementations, enabling seamless design-to-code workflows and ensuring that the correct components are used for each part of the design. If a Figma node is connected to a code component, this function helps you identify and use the exact component in your project.\n\n### `get_image`\n\nThis takes a screenshot of your selection to preserve layout fidelity. Keep this on unless you're managing token limits.\n\n### `create_design_system_rules`\n\nUse this tool to create a rule file that gives agents the context they need to generate high-quality front end code. Rule files help align output with your design system and tech stack, improving accuracy and ensuring code is tailored to your needs.\n\nAfter running the tool, save the output to the appropriate `rules/` or `instructions/` directory so your agent can access it during code generation.\n\n## Dev Mode MCP Server Settings\n\nThese are additional settings you can toggle under Preferences and use with the MCP client.\n\n**Image settings**\n\n- **Use placeholder images:** Skips image extraction and adds generic placeholders instead - helpful if you prefer swapping them manually in code.\n\n- **Use local image server**: Hosts images on a local server with URLs like `http://localhost:3845/assets/89f254d1a998c9a6d1d324d43c73539c3993b16e.png`.\n\n- **Download**: Saves images directly to disk.\n\n**Enable Code Connect**\n\nIncludes Code Connect mappings in the response, so the generated code can reuse components from your connected codebase where possible.\n\n\u003e As you use the Dev Mode MCP server, you may see a popup inside Figma asking you for feedback. To give us feedback, [please use this form](https://form.asana.com/?k=jMdFq_1SBUOyh8_k3q76QA\u0026d=10497086658021).\n\n# MCP best practices\n\nThe quality of the generated code depends on several factors. Some controlled by you, and some by the tools you're using. Here are some suggestions for clean, consistent output.\n\n## Structure your Figma file for better code\n\nProvide the best context for your design intent, so the MCP and your AI assistant can generate code that's clear, consistent, and aligned with your system.\n\n- **Use components** for anything reused (buttons, cards, inputs, etc.)\n- **Link components to your codebase** via Code Connect. This is the best way to get consistent component reuse in code. Without it, the model is guessing.\n- **Use variables** for spacing, color, radius, and typography.\n- **Name layers semantically** (e.g. `CardContainer`, not `Group 5`)\n- **Use Auto layout** to communicate responsive intent.\n\n\u003e [!TIP]\n\u003e Resize the frame in Figma to check that it behaves as expected before generating code.\n\n- **Use annotations and dev resources** to convey design intent that's hard to capture from visuals alone, like how something should behave, align, or respond.\n\n## Write effective prompts to guide the AI\n\nMCP gives your AI assistant structured Figma data, but your prompt drives the result. Good prompts can:\n\n- Align the result with your framework or styling system\n- Follow file structure and naming conventions\n- Add code to specific paths (e.g. `src/components/ui`)\n- Add or modify code in existing files instead of creating new ones\n- Follow specific layout systems (e.g. grid, flexbox, absolute)\n\n**Examples:**\n\n- \"Generate iOS SwiftUI code from this frame\"\n- \"Use Chakra UI for this layout\"\n- \"Use `src/components/ui` components\"\n- \"Add this to `src/components/marketing/PricingCard.tsx`\"\n- \"Use our `Stack` layout component\"\n\nThink of prompts like a brief to a teammate. Clear intent leads to better results.\n\n## Trigger specific tools when needed\n\nThe MCP supports different tools, and each one provides your AI assistant with a different kind of structured context. Sometimes, the assistant doesn't automatically pick the right one, especially as more tools become available. If results are off, try being explicit in your prompt.\n\n- **get_code** provides a structured **React + Tailwind** representation of your Figma selection. This is a starting point that your AI assistant can translate into any framework or code style, depending on your prompt.\n- **get_variable_defs** extracts the variables and styles used in your selection (color, spacing, typography, etc). This helps the model reference your tokens directly in the generated code.\n\nFor example, if you're getting raw code instead of tokens, try something like:\n\n- \"Get the variable names and values used in this frame.\"\n\n## Add custom rules\n\nSet project-level guidance to keep output consistent—just like onboarding notes for a new developer. These are things like:\n\n- Preferred layout primitives\n- File organization\n- Naming patterns\n- What not to hardcode\n\nYou can provide this in whatever format your MCP client uses for instruction files.\n\n**Examples:**\n\n### Cursor\n\n```yaml\n---\ndescription: Figma Dev Mode MCP rules\nglobs:\nalwaysApply: true\n---\n- The Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG assets\n- IMPORTANT: If the Figma Dev Mode MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly\n- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload\n- IMPORTANT: do NOT use or create placeholders if a localhost source is provided\n```\n\n### Claude Code\n\n```markdown\n# MCP Servers\n## Figma Dev Mode MCP Rules\n- The Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG assets\n- IMPORTANT: If the Figma Dev Mode MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly\n- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload\n- IMPORTANT: do NOT use or create placeholders if a localhost source is provided\n```\n\n### General rules\n\n```\n- IMPORTANT: Always use components from `/path_to_your_design_system` when possible\n- Prioritize Figma fidelity to match designs exactly\n- Avoid hardcoded values, use design tokens from Figma where available\n- Follow WCAG requirements for accessibility\n- Add component documentation\n- Place UI components in `/path_to_your_design_system`; avoid inline styles unless truly necessary\n```\n\nAdding these once can dramatically reduce the need for repetitive prompting and ensures that teammates or agents consistently follow the same expectations.\n\nBe sure to check your IDE or MCP client's documentation for how to structure rules, and experiment to find what works best for your team. Clear, consistent guidance often leads to better, more reusable code with less back-and-forth.\n\n## Break down large selections\n\nBreak screens into smaller parts (like components or logical chunks) for faster, more reliable results.\n\nLarge selections can slow the tools down, cause errors, or result in incomplete responses, especially when there's too much context for the model to process. Instead:\n\n1. Generate code for smaller sections or individual components (e.g. Card, Header, Sidebar)\n2. If it feels slow or stuck, reduce your selection size\n\nThis helps keep the context manageable and results more predictable, both for you and for the model.\n\nIf something in the output doesn't look quite right, it usually helps to revisit the basics: how the Figma file is structured, how the prompt is written, and what context is being sent. Following the best practices above can make a big difference, and often leads to more consistent, reusable code.\n\n# Icon Guidelines\n\nSee the [Figma Brand Usage Guidelines](https://www.figma.com/using-the-figma-brand) for displaying any icons contained in this repo.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffigma%2Fdev-mode-mcp-server-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffigma%2Fdev-mode-mcp-server-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffigma%2Fdev-mode-mcp-server-guide/lists"}