Figma MCP, can't get good results, have tried many things
I love the MCP project but am having a really hard time getting good results from it, every time I asking Claude Code or Cursor to style my UI component like the provided link it’d not even close, it was 85%-90% wrong, sometimes really wrong. Making it mostly unusable.
Lots of experience with LLM coding, I know what I’m asking for it with-in their capability. I also recently tried Figma Make where I imported the exact some component, using the exact same prompt and it completely nailed. Figma Make using Claude Sonnet got all the colors right, the fonts sizes, added the exact stroke and rounded corners, it even added roll-over state and correctly guessed my design intent, really amazing! But when I do the same with Claude Code and Figma MCP but it completely fails, adding styles to the wrong components, getting all the fonts wrong, colors are all over the place, etc. I have some theories as to why but would love some feedback and help
Theories
1. Tailwind vs traditional CSS - My first thought was that maybe Figma MCP’s “get_code” function may be providing plain CSS and since I’m using Tailwind Claude Code might have trouble converting it, or defaults to some general Tailwind styles rather than what is in my Figma and Tailwind.config But this can’t be right, I see on the blog post it says “get_code provides a structured React + Tailwind representation of your Figma selection” which is exactly what my codebase uses, it should work.
2. Get_code is failing, get_image is called instead. This seems the most likely, since in the “get_code” command Figma tells the model to also use “get_image” I guess to provide a second reference. And since the MCP is pretty unstable, freezes or stops working, maybe it just fails on get_code but successfully get the image. Most AI models can’t produce actuate styles from only an image.
3. User error - This is also very likely, my account doesn’t offer code_connect, maybe I need to have that. Maybe my design tokens or tailwind config is not setup well for Figma or Claude to use. But I would like to think this MCP will just provide the data and the AI model should be able to apply it. Also each time I try it fails in a different way, if I knew it only worked well with colors or only with padding, I could get more use out of it but everything it doesn’t something completely different.
Thanks for reading, would love ay advice anyone has, thanks
Page 1 / 1
I have tried a few times - with cursor, the interpretation of the design is seriously poor, and more often than not it seems to ignore the design and create a generic page design.
TBH it may be user error - I’m not a developer, and I think there’s an aspect of generating code that can be previewed with a .html file - isn’t going to look as much like the design as it could.
My main issue is with the YT crowd who typically show the simplest design layout possible as a demo, usually an image a button and headline, often dark UI and basic sans serif type, typically these would render well - as they map closer to the world of Tailwind / Shadcn that the Ai tools seem to be built around.
I figured out what was going on. The “get_code” tool only works when you have Code Connect setup and that’s only available on the organization or enterprise license. Also inside the “get_code” tool it prompts the LLM to also use the “get_image” tool, maybe for more reference. In Cursor, Windsurf, Claude Code, etc they don’t show you the raw Data from the MCP, it just says if it was successful or not. So the LLM is calling the “get_code” tool as instructed, that tool fails due to no Code Connect license, then that tool prompts the LLM to use “get_image” which does work, the users sees the MCP call was successful, assuming it successfully got the code and then the LLM uses only the image to try to and guess what to do. Most LLM’s really struggle at making exact UI from an image.
I really wish Figma made this clear in their setup page or Blog post introducing it. I spent a few days and lot of money in API calls troubleshooting this. Also, the issue where the MCP “freezes” which I’ve seen a lot of people complain about, this happens if you prompt the LLM to “only” use the “get_code” tool, I don’t think most programs are setup to handle license failures inside MCP yet so it just freezes.
I’m instead using the “Framelink” Figma MCP, which can get your numerical data without needing an enterprise license. The official Figma MCP is still useful for getting variables and reference images, but without Code Connect will not produce any code or hard data for the LLM.
https://www.framelink.ai/docs/quickstart
Ok so playing around with this … the Figma file has to use suitable groupings / naming of layers and components … and auto layout - in cursor I insisted on pixel perfect, matching the design, brand, colours fonts etc .. for my test I suggested using react, that I wanted to preview …
Via local host that seemed to work better than previous tests where I’d asked for preview in a web browser and it had used HTML file to render.
So .. all in pretty good. I also stumped up for a paid account on Cursor it seems you need the best LLM model it can offer. Designs weren’t perfect but would say 75% with about 5/10 mins of prompted tweaks.
Hi all! Thanks for raising this and sharing so many details. Let’s see what we can do to smooth things out.. sounds like a few things might be getting in the way, and we’d love to help you get the most out of the MCP server and clarify anything that’s been confusing!
The MCP runs locally inside your Figma desktop app, so it won’t work from the browser. (we’re working on remote server :)). So - First thing to check: make sure your desktop app is open and the MCP server is enabled.
When generating code, the model should always call get_code. If you’re only seeing get_image, it likely means something’s going wrong, and the model doesn’t have the full Figma context, so the output won’t match your design.
This isn’t related to your plan though! The MCP works on Pro and up, and doesn’t require Code Connect or an enterprise/org setup. Code Connect is a (very good) addition, it helps the model reuse your existing components more accurately. But it definitely shouldn’t block you from getting code without it!
If things are freezing or timing out, it’s often a handshake issue between Figma and your IDE. Try restarting both.. I know.. but it is effective..
If it keeps failing, please reach out with your setup and an example, we’d love to debug it with you.
The MCP sends structured React + Tailwind by default. If you're getting HTML or things look generic, double-check that get_code actually ran. If not, it's usually related to the issues above.
Would love to know if it’s working better for you, and thanks again for starting this thread!
Thank you for the response! You are right, I went back, retested and was able to get code from the Dev Mode MCP without having Code Connect or an enterprise license.
Most AI coders obscure away the data from the MCP so it wasn't always clear what was happening. It turns out the issue was from it freezing, not Code Connect. I had Figma open and set up correctly, I was even manually checking http://127.0.0.1:3845/sse to make sure it was active, but it was still failing. Restarting Figma before I make the MCP worked for me. It’s still pretty inconvenient to restart Figma every few minutes but it is producing very helpful code, which is great!
@Through Iris you definitely shouldn’t need to restart Figma every few minutes! Are you still experiencing this issue? If so, please share more details with us via the support channel. We’d love to understand what’s causing it!
I’ve also been using Figma MCP and encountered a reproducible issue with the get_code function. In my testing, it consistently fails when the selected element contains annotations. However, if I remove all annotations from the selection, get_code works correctly.
Just wanted to share this in case it’s useful as a reference for debugging or future improvements on the Figma side. I’m not looking for advice or feedback—just hoping this helps with identifying the cause.
@Through Iris you definitely shouldn’t need to restart Figma every few minutes! Are you still experiencing this issue? If so, please share more details with us via the support channel. We’d love to understand what’s causing it!
Thanks! I am restarting often, but I have no idea if I need to be. The issue I noticed is that specifically Claude Code often gets stuck when trying to use the Figma MCP and then it only works when I restart both Claude Code and Figma. Sometimes if I’m in the middle of working on something I’ll restart Figma and open Cursor to fetch the MCP data and then copy and paste it into Claude Code. It “feels” like both Claude Code and the Figma MCP timeout after a while, meaning they always work on a fresh restart, but almost never work if they have both been open for a while. Restarting Figma alone doesn’t get it to work again, but restarting both does.
@Yarden K I’ve tried several solutions, including all the suggestions in the thread, but the get_code tool is still failing with the same error.
IDE : IntelliJ (Github Copilot Agent)
Error calling tool get_code: MCP error -32001: Request timed out
@Yarden K I’ve tried several solutions, including all the suggestions in the thread, but the get_code tool is still failing with the same error.
IDE : IntelliJ (Github Copilot Agent)
Error calling tool get_code: MCP error -32001: Request timed out
@Yarden K I looked into the issue further and found that the Figma desktop app is initiating the SSO login flow when calling the get_code tool. Since this process is non-interactive, get_code is timing out due to authentication. I'm still unsure why SSO is being triggered, as I have already authenticated the application through the browser.
I attempted to debug the Figma MCP. Currently, only the functions "get_image" and "get_variable_defs" are working properly, but these two are of no use to me and do not provide any assistance to the entire Vibe Coding. Moreover, both "get_code" and "get_code_connect_map" always result in errors.
my current test results:
I used MCP inspector for debugging. The "get_code_connect_map" function indicated: "Code Connect is only available on the Organization and Enterprise plans"; The "get_code" function indicated: "MCP error -32001: Request timed out"
Is there any news regarding this problem? get_code constantly stops working and sometimes I can't get it to restart. For now I've gone back to Framelink's MCP. In my case, I'm using the integration with Claude Desktop. Unfortunately, the logging doesn't provide any meaningful indication either, just "An error occurred while using the tool get_code". It would probably be enough to have more detailed logging to better understand the problem.
I’ve also been using Figma MCP and encountered a reproducible issue with the get_code function. In my testing, it consistently fails when the selected element contains annotations. However, if I remove all annotations from the selection, get_code works correctly.
Just wanted to share this in case it’s useful as a reference for debugging or future improvements on the Figma side. I’m not looking for advice or feedback—just hoping this helps with identifying the cause.
Today’s Figma update has at least solved my problem. Thanks! I’ve confirmed that I can successfully retrieve the annotation information as well.
The image below is an example where I used Figma MCP to fetch information into the Claude Code. I’ve confirmed that the annotation information can be retrieved.
I'm a trae user. I've identified a problem I'm having and want to share how I solved it. Whenever I use get_code on a component, it extracts the assets into the public/assets folder. However, if I try to run the command in the same folder, mcp fails. To do this, I instructed it to create a folder within public with the component's name whenever extracting a component.
For example, extracting a card that will be used within menu 3 of the dashboard
Then, when it runs mcp, it will direct it to extract the assets into the public/menu3/assets folder.
Another problem is that the generated code comes within the mcp response, but my agent rewrote the code within the file, and when it did so, it always created a generic version. So, I'm having to manually copy the code generated by mcp and paste it into the tsx file to accurately reflect what was generated. I hope this can help someone.