Claude and Figma

Yes. There is a second route that starts in Figma rather than in Claude, and some people prefer it because everything happens next to the file they are already looking at.

Open the file in the Figma desktop app and switch it to Dev Mode, the toggle at the top of the toolbar. In the Dev Mode sidebar there is an MCP server section. Turn the server on. Figma gives you a local address, something that looks like http://127.0.0.1:3845. Copy it, and add it in Claude as an MCP server using that address.

It is not the same thing as the connector. The connector runs through your Figma account and keeps working on its own. This one is a small server running on your own machine, so the Figma desktop app has to be open for it to answer. Dev Mode is also not on every Figma plan.

If you only want Claude to read and write your designs, the connector route above is simpler and it is the one the rest of this page assumes.

Searching for Figma can return more than one result, both with the Figma logo, both genuine. Take the one described as Generate diagrams and better code from Figma context. Both of them work, and that is the one everything here is written for. If you connected the other and something behaves differently from these steps, disconnect it and switch.

You are almost certainly in the browser. The connector list only exists in the Claude desktop app.

Connecting opens your browser so you can sign in to Figma and allow access. If that window opened behind something, or a pop-up blocker ate it, the connection sits there unfinished and looks broken.

Close it, press connect again, and watch for the browser tab.

Almost always the same cause: you gave it a link to the whole file, so it has no idea which part you mean.

In Figma, right-click the frame itself and choose Copy link to selection. Paste that. The difference is night and day.

It opens files through your account, so it can only reach what you can reach. A file in a team you only have view access to, or one that was never shared with you, will not open.

This one is not a mistake you made, and it is worth understanding.

When Claude writes text into your file, it can only use fonts Figma serves it: Google Fonts, plus anything uploaded to your organisation. A font installed on your own machine is visible to you in the Figma app, and invisible to the connection. So the layout comes back right and the typeface comes back wrong.

Two things follow from that. Do your writing first and your font replacement last: if you fix the fonts and then ask Claude to edit that text, it either refuses or knocks the font back to a stand-in. And if your plan lets you upload fonts to your organisation, doing that once solves it permanently.

We hit this building the carousel that sent you here. The layout was perfect. Every word was in the wrong typeface.