Gideon AwolesiHow the tools connect to Figma today
Figma launched its MCP server in beta in June 2025, and added a remote version in September 2025. It's what lets a coding agent read the design you've selected: the layout, the variables it uses, and, if you've set it up, the code component each design component maps to.
In Claude Code, you can install Figma's plugin or add the remote server yourself, and then sign in. In Cursor, you add the Figma plugin and connect it in the settings. Lovable has its own Figma plugin, can connect to the Figma MCP server through its desktop app, and can import a .fig file, though that brings in variables and frame structure without components.
What breaks
The agent can only work with what the file tells it. If a button is a frame with a rectangle and some text in it, the agent has no way to know it's your Button component, so it writes a new one. Every component it writes that way is drift you'll have to clean up later.
The same goes for values. If the colour on a card is a hex code instead of a variable, the agent copies the hex code, and your token system gets bypassed without anyone noticing.
How to prepare the file
Figma's guidance for its MCP server is close to what I'd tell any team: make repeating elements into components, use variables for spacing, colour, radius, and type, give layers descriptive names, and use auto layout. Then resize the frame to check it still holds together.
The step that makes the biggest difference is Code Connect, which Figma calls the most effective way to get your real components reused. At Syndigo, I wrote the Code Connect and component files for all 200 components, so a design and the code that ships it point at each other.
Know the limits of your plan
The remote MCP server works on every Figma plan, but the number of calls you can make depends on your seat. Code Connect needs a Dev or Full seat on a Professional, Organization, or Enterprise plan, and Professional is limited to one library and one framework. Check these before you plan a workflow around them.
Give the agent instructions too
Even with a well-built file, the agent still makes choices. A short instruction file in your repository, telling it to use your components and tokens and to ask when something isn't mapped, saves a lot of review time. When you ask your coding agent to build a screen, it's supposed to read your components and your docs to decide how and what to build, so make sure they're there for it to read.