How to Set Up the Figma MCP Server with Claude Code

Introduction to Figma MCP

If you want Claude Code to use your Figma Design files, the Figma MCP server is the bridge. It exposes your selected Figma components as tools Claude Code can call. Then Claude Code can pull design context and generate code from what you selected.

MCP here means Model Context Protocol. It defines how apps share tools and data through a common interface. The result is a cleaner design-to-code workflow than copy-pasting screenshots or specs.

Why use Figma MCP with Claude Code

The biggest win is speed with fewer context breaks. You pick a section or component in Figma, and Claude Code gets the relevant structure. That means less rework when you move from design intent to implementation details.

You also get more consistent inputs for code generation. Your prompts can reference labels, frames, and component structure rather than vague descriptions. That improves alignment between what the designer made and what the developer ships.

Finally, a Remote Figma MCP server can offer broader functionality than a local desktop install. It can serve multiple sessions and help keep setup stable across machines. It also reduces the chance you forget to run the local service after updates.

Set up the Remote Figma MCP server

To set up figma mcp, you typically install the Figma plugin for Claude Code and run the MCP server as a service. The exact commands depend on your Claude Code install, but the flow is consistent across setups. You will use terminal and command line setup to fetch and enable the Figma MCP server.

Start by enabling Dev Mode in Figma for the team or file you want to connect. Then you will need the HTTP transport settings that Claude Code expects. In practice, that means choosing an HTTP URL and port the MCP server can bind to.

Next, install the figma mcp server tooling and plugin via terminal. A common pattern looks like this: install the plugin package, then start the remote server. If you already have MCP running for other tools, you can reuse the same server pattern.

1. Enable Dev Mode in Figma for your file.
2. Decide the HTTP transport URL and port for the MCP server.
3. Install the Figma plugin for Claude Code using your terminal.
4. Start the Remote Figma MCP server and keep it running.

Connect Figma MCP to Claude Code

Once the remote server is running, you need to configure Claude Code to point to it. This is where most users ask how to add figma mcp to claude code. The key is that Claude Code needs the server URL plus transport details that match what you configured in Figma Dev Mode.

During setup, provide correct HTTP transport so Claude Code can reach the MCP endpoint. If your server runs on another machine, use a reachable network address. Also confirm that your firewall allows the chosen port, or the connection will fail.

Then complete the authentication process. You will usually follow an OAuth-style flow to let the MCP server access your Figma Design files. After you grant access, Claude Code can query the design resources that you selected.

To avoid “it connects but returns nothing,” validate access to the exact team or file. Make sure the credentials used by the MCP server match the Figma workspace that contains your components. This prevents frustrating cases where Claude Code authenticates but cannot see your target frames.

Tip: Treat authentication and access as two separate checks. Authentication proves login. Access proves the server can read the design files you selected.

Using Figma MCP with Claude Code

After how to connect figma mcp to claude code is complete, the day-to-day workflow becomes simple. In Figma, select the components you care about. Then Claude Code uses Figma MCP to fetch design context for those selections.

When using figma mcp with claude code, aim for small, focused selections first. For example, pick one card component with its typography and spacing rules. Claude Code can then generate code that matches that component more closely than a whole-page dump.

For design-to-code workflow, you can ask Claude Code to produce UI structure, styles, and behavior hints. If your component uses variants, include variant names in your request. Claude Code can map those variants to conditional props or style branches.

• Select a Figma component or a frame that contains the target UI.
• Ask for code generation tied to that selection only.
• Request a mapping from design tokens to your CSS or style system.
• If needed, ask for follow-up edits based on specific subcomponents.

In practice, you can “generate and refine” in loops. First, generate a baseline component. Then select a more specific child component and ask Claude Code to adjust layout, typography, or spacing.

Common issues and troubleshooting

If you are trying how to install figma mcp and Claude Code can’t see it, start with the network path. Confirm the remote server is reachable from where Claude Code runs. If you used a non-default port, double-check the port in Claude Code config and in the server launch command.

If you get authentication errors, re-run the authentication process and verify the workspace. Sometimes the token is valid, but the MCP server lacks permissions for the team containing your Figma Design files. In that case, you need to grant access again with the right team selection.

If the connection succeeds but Claude Code returns empty results, validate the selection logic. Make sure Dev Mode is enabled and the file is configured correctly in Figma. Also check that the selected Figma components are visible to the authenticated user.

Finally, always validate the connection before you try real work. A simple check is to run a lightweight request that lists available tools or fetches one component. If that basic call works, deeper design-to-code steps should also work.

Symptom	Likely cause	What to do
Claude Code can’t reach the MCP server	Wrong HTTP transport URL or blocked port	Verify URL, port, and firewall rules
Auth succeeds, but no designs show	Workspace or file access mismatch	Re-auth and grant access to the right team
Tools load, but component fetch is empty	Dev Mode not enabled or selection issue	Enable Dev Mode and reselect components

Conclusion and next steps

You now have the step-by-step process to set up and use the Figma MCP server with Claude Code. The core pieces are installing the Figma plugin for Claude Code, running a Remote Figma MCP server, and wiring Claude Code with the correct HTTP transport. Then you finish the authentication process and validate the connection.

After you get a successful test run, focus on a clean design-to-code workflow. Start with one component, generate code, then iterate using smaller selections. This approach keeps Claude Code inputs tight and makes results easier to refine.

If you want to expand beyond Figma, you can apply the same MCP pattern to other services. But for now, get the Figma connection stable. Then use Claude Code to generate code directly from selected Figma components.