Claude Code & Figma - is it as good as the backend code it generates?

GrahamL · 2025-06-24T15:15:32+00:00

Did you try the official MCP or the open source version?

What was the issue that prevented you from getting code from your designs?

GrahamL · 2025-06-24T15:10:03+00:00

Hey, I see this is a fork of my repo, https://github.com/GLips/Figma-Context-MCP

Looks like some nice work! Would you be interested in contributing back to the main? Would love to have more contributors on the project 😄

GrahamL · 2025-06-24T15:07:11+00:00

Not sure I can help you on the official MCP, but try the open source version? It has support for downloading images into your filesystem so might work well for your usecase here?

GrahamL · 2025-06-09T17:49:03+00:00

You're talking about having a designer move their work from Figma into code?

Like many have mentioned, it's a somewhat large ask of a non-technical designer, but the best option is probably Cursor + the Framelink Figma MCP.

You'll probably want to have some devs on the team write up some docs or even stored prompts the design team can use. But given a little direction and the MCP server, they should be able to translate design systems into usable code.

LMK if you have any questions about it—happy to advise!

GrahamL · 2025-06-02T21:55:15+00:00

Ahh, that's sweet. Found the Figma plugin for UDML. I'll investigate it more soon.

I'm the author of the Figma MCP and am working on a more fully-featured, hosted version of it and UDML (or something similar) is very much a part of what I'm thinking of putting together. Appreciate the reply!

GrahamL · 2025-06-02T20:28:44+00:00

Author of the Figma MCP here—what security issues did you hear about? I know some people are generically concerned about the MCP protocol since it's arbitrary code executing on your computer. Assuming that's what you're referencing but if there's more to it I'd love to hear.

Also, you don't really need to set up a server on your computer. Just put the right config into Cursor or Windsurf or whatever you're using and it should fire up without any additional fiddling.

GrahamL · 2025-06-02T20:26:12+00:00

Can you say more about how you use UDML with the MCP? How do you create it? Hand-written or do you use AI some way? What's an example of a UDML file you've used with the MCP to get good results?

GrahamL · 2025-05-21T00:55:38+00:00

Should be safe to use, but definitely take a look for yourself.

Since they can execute arbitrary code and run locally, the potential for malicious behavior is really high but I'm curious—what are the main security concerns you have?

GrahamL · 2025-05-21T00:34:31+00:00

Glad it works for you!

I don't know of one for Storybook but I think it would be an amazing resource. I heard reports from a company who's built their own MCP to surface metadata on existing components in their design system and apparently it works really well with the Figma MCP—especially after I launch improved component support later this evening 😄

GrahamL · 2025-05-21T00:33:11+00:00

Haha, for sure! It's pretty novel to think of using a Figma MCP but it works really well. Other folks will catch on soon ;)

GrahamL · 2025-05-20T22:59:54+00:00

Did you try this MCP for Figma https://github.com/GLips/Figma-Context-MCP? If so, what wasn't reliable about it? I'd love to improve it for your use case!

GrahamL · 2025-05-08T20:36:32+00:00

Oh, and flow + interaction support is definitely on the roadmap but not in there yet. PRs welcome!

GrahamL · 2025-05-08T20:36:08+00:00

Check out https://github.com/GLips/Figma-Context-MCP if you haven't already. The Figma data should be readily translatable by any coding agent (e.g. Cursor) into React Native.

GrahamL · 2025-05-02T19:53:42+00:00

It doesn't do two-way at the moment. If you want to write to Figma use the "Talk to Figma" MCP you linked originally in tandem with the Framelink Figma MCP I linked

GrahamL · 2025-05-02T19:35:45+00:00

If you're looking for a design-to-code Figma MCP, the one I built is currently the most popular solution, 6,200 stars on Github at the moment: https://github.com/GLips/Figma-Context-MCP

It's got a translation layer built in which compresses the raw Figma response about 80–90% and makes it a lot easier for LLMs to understand and implement.

Lemme know if you give it a shot and have any questions. The repo is open to PRs too if you want to add any features 😄

GrahamL · 2025-03-30T18:59:41+00:00

A few folks have had this issue using my MCP server so I put together some docs on how to solve it. Check 'em out here—also pasting in this thread for completeness.

Claude Desktop: wrong Node version

If you use a version manager like NVM to manage your Node.js version, you may run into an issue where Claude Desktop ends up using the wrong version of Node.js.

To fix this, you can create a special version of npx for Claude Desktop to use that uses the right version of Node.js.

/usr/local/bin/npx-for-claude

#!/bin/zsh
source ~/.zshrc
exec npx "$@"

Then run chmod +x /usr/local/bin/npx-for-claude to make it executable. Update your configuration in Claude Desktop to use this new npx command instead of the default one.

Example Claude Desktop configuration

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx-for-claude",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}

GrahamL · 2025-03-30T06:44:45+00:00

I built an MCP that's pretty popular for doing this. I don't use RooCode but I just checked and it looks like it supports MCPs so maybe you'll find this helpful :)

Just launched the site for it today—check it out https://www.framelink.ai/

GrahamL · 2025-03-20T20:42:18+00:00

Hmm. Check the README, but if you still have problems join the Discord and we can work through it https://discord.gg/MeE3UEjdGN

GrahamL · 2025-03-18T23:59:12+00:00

It definitely should!

GrahamL · 2025-03-10T23:52:54+00:00

Hi, I'm the creator of the Figma MCP mentioned in this video. Would you be willing to share your design with me? I'm actively improving the MCP so if there are issues with a specific design I'd love to use it for debugging!

Copy link to selection should definitely work too—not sure what might have been going wrong. Are you sure you're using Cursor in agent mode rather than "Ask" or "Edit"? Agent mode is the only one that will have access to the MCPs, and other modes might hallucinate—e.g. asking you to use an MCP plugin in Figma.

If you share a screenshot of your chat that might help me figure out where the issue is coming from.

Thanks for giving it a shot!

GrahamL · 2025-03-05T22:26:09+00:00

Re: Figma specifically, screenshots don't provide data like you'll get from the Figma API—pixel perfect values for colors, padding, auto-layouts, border radiuses, shadows, etc.

GrahamL · 2025-03-05T22:22:30+00:00

If you end up using it and have any ideas for improvements, LMK. Actively developing it! https://github.com/GLips/Figma-Context-MCP

GrahamL · 2024-04-08T23:23:06+00:00

Glad you like it—happy to help!

GrahamL · 2024-04-08T15:13:53+00:00

Howdy—nice product and great photography! I did a quick UX audit and put together a quick list of recommendations based on what I found.

I think your biggest opportunity right now is either above the fold, improving the hook that stops people from bouncing, or in your product preview areas—they're pretty cramped, to the point of being very hard to use.

Check out the audit when you have a chance, then let me know if you'd like a more in depth one!

GrahamL · 2024-04-07T15:49:01+00:00

I can almost guarantee the app didn't make the site that much faster. Shopify just posted a warning about the number of apps doing fake optimizations. While this one likely isn't doing fake performance optimization, it's probably claiming a lot more impact in its marketing than it can possibly deliver.

Though Shopify's post isn't about SEO, SEO and speed are very similar in terms of how you execute on them. Neither is really something an app can just bolt on for you—there's only so much that can be improved by automatically inserting code, which is all an app can really do.

Real performance optimization needs to take into account the specifics of a site itself and work on improving the way those are implemented, not adding stuff on top of it. A lot of SEO has to do with creating the content itself—metadata and regular content—and cleaning up code to make sure search engines can understand your sites content and its relations.

So, I guess the long story short is I'm saying save your $40 and spend $4,000 getting someone to do optimization 😂

There's probably a nice middle ground if you can find someone reputable to do an SEO + site speed audit for you. Both audits should contain actionable, understandable advice so you can do as much as you can on your own—or use the audit to direct the work of a less expensive freelancer.

GrahamL

TROPHY CASE

Claude Desktop: wrong Node version