Recommended Free Tools
To connect Figma MCP to VS Code, add Figma’s hosted server at https://mcp.figma.com/mcp in VS Code’s MCP configuration, start it, and authorize access in Figma. Then give your coding assistant a link to the specific Figma file, frame, or layer you want it to use. The server provides design context; your AI assistant still generates and adapts the code.
Connect VS Code to Figma’s remote MCP server
For most developers, start with Figma’s hosted remote server. It connects without the Figma desktop app and is the broader-feature option. Only clients listed in Figma’s MCP Catalog can connect. See Figma’s introduction to the MCP server and its remote installation instructions.
- Open VS Code’s Command Palette. Choose MCP: Open User Configuration to make the server available for your user, or MCP: Open Workspace Folder MCP Configuration to limit it to the current workspace. VS Code prompts you to create
mcp.jsonif needed. - Add the Figma server configuration. Put this in the configuration file:
{
"inputs": [],
"servers": {
"figma": {
"url": "https://mcp.figma.com/mcp",
"type": "http"
}
}
}- Start the server. Use the Start control above the
figmaserver entry. - Authorize with Figma. Follow the access prompt that appears and grant the requested access. Your account can only access Figma content it already has permission to view or edit.
- Check that the connection is available to the assistant. The VS Code MCP interface should show the server as started and its available tools. If it does not, use the troubleshooting sequence below.
The documented setup does not establish a minimum VS Code release or a separate required extension beyond the described MCP client setup. Avoid assuming that a particular version or extension is mandatory; check Figma’s current setup guidance for changes.
Give the assistant the right Figma design reference
Copy a link to the relevant Figma file, frame, or layer and include it in your prompt. The client extracts the needed node ID from the link; it does not open the URL and browse the design as a person would. A link to the precise frame or component is more useful than a broad file link when the task concerns one screen or element.
#1 Best Overall
Make the request specific and include the repository conventions the assistant should follow. For example:
Use this Figma frame as the visual reference: [paste frame link].
Implement the settings panel in the existing React app. Reuse components and
styles already in the repository, follow its naming conventions, and tell me
which files you changed.For a more reliable handoff, tell the assistant what part of the design matters, where the implementation belongs, and which existing components, tokens, or patterns to prefer. If you have a design system, identify it explicitly rather than assuming the model will infer the team’s conventions from the mockup.
What Figma MCP provides—and what it does not
Figma MCP acts as a bridge that supplies structured design context—such as frames, components, layouts, tokens, and variables—to an AI assistant. The assistant uses that context to propose and write implementation code. MCP itself does not generate the finished application code, adapt it to every repository convention, or automatically repair coding problems. Figma puts it plainly: “The MCP server is not a one-click ‘design to perfect code’ tool.” Figma explains the distinction between MCP and the agent.
Expect to review the code, run the project, and compare the result with the intended design. Output depends on the quality of the design context, the prompt, and the assistant’s behavior; a connection does not guarantee a pixel-perfect result. Clear design-system instructions, a well-structured Figma file, and implementation context can make the handoff more useful. Figma’s file-structure guidance covers ways to organize design files for better code output.
Code Connect and actual project components
When Code Connect mappings are available, they can expose implementation details that help the assistant reuse real codebase components instead of inventing substitutes. The assistant does not automatically know which Figma component maps to which repository component in the absence of such context or clear guidance. See Figma’s Code Connect integration guide.
Do not confuse the three workflows
- Design-to-code: retrieve design context from Figma to help an assistant implement it in a codebase. This is the workflow described in this guide.
- Code-to-canvas: capture a running UI into editable Figma frames. This is a separate workflow with its own client support; see Figma’s code-to-canvas documentation.
- Write-to-canvas: have supported agents create or modify native Figma objects. It has specific client, seat, and permission boundaries described in Figma’s write-to-canvas documentation.
Do not assume that access to design-to-code means the other workflows are enabled for your account or client.
Remote server or desktop server?
The hosted server is the recommended default for a typical VS Code setup. Choose the desktop route when local operation is preferred or required by your organization, and account for its separate prerequisites and narrower tool coverage.
| Setup detail | Remote server | Desktop server |
|---|---|---|
| Endpoint | https://mcp.figma.com/mcp |
http://127.0.0.1:3845/mcp |
| Figma desktop app needed | No | Yes; it must be running with a design file open |
| Feature coverage | Recommended by Figma and broader; some tools are remote-only | Not identical to remote; remote-only tools are unavailable through this route |
| Additional setup noted by Figma | Authorize through Figma’s access prompt | Switch to Dev Mode, enable the MCP server in the inspect panel, and use GitHub Copilot for MCP in VS Code |
Figma for Government supports the desktop server only. For the desktop route, follow Figma’s local installation guide:
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitches- Open the Figma desktop app and the design file you need.
- Switch to Dev Mode and enable the MCP server in the inspect panel.
- In VS Code, open the Command Palette and choose MCP: Add Server.
- Add the HTTP server at
http://127.0.0.1:3845/mcp, give it an ID such asfigma-desktop, and choose user-wide or workspace scope. - Use GitHub Copilot in VS Code for this documented desktop MCP setup, then check that the server starts and exposes the expected tools.
The desktop route depends on the app and active file remaining available. If you need a tool documented as remote-only, configure the remote server instead of expecting the desktop connection to provide it.
Check plan, seat, and file access before relying on a tool
Availability and call limits depend on the Figma plan and seat, and Figma says limits may change. The figures below are the allowances listed on Figma’s access documentation as accessed in 2026; treat them as a dated reference, not a permanent specification, and check the current access and rate-limit matrix for your own account.
| Seat and plan | Published allowance (Figma documentation accessed 2026) |
|---|---|
| View/Collab seat, Starter | Up to 20 tool calls per month |
| View/Collab seat, Professional, Organization, or Enterprise | Up to 6 tool calls per month |
| Dev/Full seat, Starter | Up to 200 calls per day and 10 per minute |
| Dev/Full seat, Professional | Up to 200 calls per day and 15 per minute |
| Dev/Full seat, Organization or Enterprise | Up to 600 calls per day and 20 per minute |
| Education plan | Professional Dev/Full limits: up to 200 calls per day and 10 per minute |
These limits do not grant access to files you cannot already view or edit. If a tool is missing or a request is denied, check the user’s seat, plan, file permissions, client support, and the live limit matrix before treating it as a configuration fault.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot missing Figma MCP tools
Use this sequence to distinguish a server setup problem from account access, a server conflict, or an assistant-provider issue. Figma’s troubleshooting page covers missing tools and connection problems.
- Confirm the configured route. Check that VS Code points to the intended endpoint: the hosted URL for remote, or the local endpoint for desktop. Make sure you started the server entry you meant to use.
- For desktop, check the prerequisites. Confirm Figma is running, the file is open, Dev Mode is active, and the MCP server is enabled in the inspect panel. Confirm VS Code is using the documented desktop setup.
- Check for both servers being configured. If remote and desktop entries are both present, a client may connect to desktop and consequently lack remote-only tools such as
use_figmaorgenerate_figma_design. Choose the route whose tools you need and verify which server the client is using. - Recheck authorization and access. For remote, complete the Figma authorization prompt. For either route, make sure the signed-in user can access the file and that the account’s plan and seat permit the requested tool use.
- Restart the applications if tools still do not appear. Figma advises restarting the Figma app and VS Code when tools continue to fail to load.
- Read errors that mention the model provider separately. Figma notes that an error can come from the assistant’s model connection or a timeout rather than from Figma MCP itself. Check the assistant’s provider connection and retry before changing the Figma server configuration.
Or skip the browser setup
ScreenshotNeo is a separate website screenshot API and MCP server, not a Figma MCP connection: it captures a page you can access at a URL, while Figma MCP supplies design context from a Figma file. If your adjacent task is capturing a rendered webpage, one GET request can save a screenshot. See the ScreenshotNeo site and API documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo removes known cookie and consent banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are not billed. Its MCP server provides screenshot tools to AI agents, and the free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month with no card.
Frequently Asked Questions
Can I use Figma MCP in VS Code without installing the Figma desktop app?
Yes. Figma’s hosted remote MCP server does not require the desktop app; the desktop route does.
Does a Figma link need to be public for the assistant to use it?
No. The user still needs permission to view or edit the linked content; MCP does not bypass Figma file permissions.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Can I use this setup with any VS Code AI assistant?
Only clients in Figma’s MCP Catalog can connect to the hosted server. Check client support before choosing an assistant.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
