I’ve been looking into how I can leverage the new MCP server functionality in my design-to-dev handover process, but have been struggling with a few issues.
As a means of speeding up my web design process, I have created singular components (no variants) that use variables for spacing, typography etc. These variables relate to modes like Wide Desktop, Desktop, Tablet, Mobile.
My idea is that I’d like the MCP to read the singular component and be able to extract all the variables information across all modes and map those values to Tailwind classes (such as pt-4 md:pt-6 lg:pt-8 etc..)
With a fair bit of back-and-forth, I’ve been able to recreate a passable version of my designs, but only for a single instance - this using variables from the default/first variable mode. So it’s not ideal to select one frame/screensize at a time and prompt the agent to recreate it - the code output can get messy pretty quickly.
Do we know if there if Figma have release plan for the MCP to be able to read multiple variable modes in the near future? This would save refactoring my variables into a single mode - and would also require that I make multiple variants of a component so that each screen size is catered for.
If not for a Figma-based update, has anyone had similar frustrations and do you have any workarounds?
Thanks!
Figma MCP - reading variable modes
It is definitely in our list!
I feel like this is the same issue I’m having, viewport is one set of ‘mode’ and ‘theme’ is the other. And it would be great if MCPs could get a list of those, and then switch those when pulling variables.
Right now it looks like we’re forced to dump all variables, follow the path of variables, to then just pull out the x theme amount of colors.
Otherwise get_variable_defs seems to only ever give the deafult values.
Is there any movement on this? I too have set up light and dark modes using tokens and variables, but they seem to be inaccessible from the MCP. Is there a way to export the entire variable set with modes?
Hey guys, this is such a basic feature. You are forcing users to manually sync variables from Figma to code. It could be so easy with MCP. Why aren’t you adding this? I can make a 10 day intern and add this feature if nobody on your side can do it.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.