I Solved the Variants Generation Part of What Figma MCP Is Trying to Fix, For Free
One specific, painful piece of the puzzle, faster, less setup, zero terminal commands, and not a single token spent.
There’s a wave of excitement going around about Figma MCP right now. Designers and developers are posting about connecting Claude to Figma through a terminal, piping design tokens and variables back and forth, automating what used to be manual work, and it all looks very impressive. Here’s the thing nobody mentions in those posts though: every time the AI reads your Figma file, inspects a component, or pulls variable data through the MCP connection, it’s consuming tokens, and tokens cost money. The meter is running the entire time.
I watched all of this unfold and had a very specific feeling, not FOMO, not excitement, but genuine déjà vu, because one part of this problem, specifically the generation and population of design variables, I’d already solved a while back, for free, with tools most designers already have open.
The Banking Interface Nobody Will Remember
A while back I was working on a banking interface, and not a simple one. We’re talking thousands of rows and columns of data: currencies, account numbers, organization names, dropdown values, numeric fields, status labels, the kind of thing that, if you get it wrong in the design, you spend weeks explaining to developers why the components don’t behave like real data.
The client wanted Figma variables populated with all of it, every field, every state, every possible combination. The “correct” approach would have been to sit there and input it manually, or wait for some plugin to do it in fifteen steps. But I had a PDF of all the field requirements and ChatGPT open, so I did this instead: fed the PDF in, asked it to generate a .json and .csv of all variable values mentioned across the document, then uploaded the output directly into Figma using Token Studio.
Mapping took some time, yes, don’t ask how much. The client eventually decided they didn’t need it anyway. But it worked cleanly, without connecting anything to a terminal, without API tokens, without a single command line.
Now There Are Plugins Promising to Do the Same Variable Generation With Extra Steps, and a Bill
This is the part that makes me raise an eyebrow slightly.
The Figma MCP workflow, at least in its current form, involves setting up a server, connecting Claude Desktop to it, getting a Figma API key, running commands, and hoping your design file structure plays nicely with the output. And while all of that is happening, every single interaction with the AI is consuming tokens from your API plan: reading your file, inspecting components, iterating on variable names. If you’re running this on a large design file with thousands of variables, you’re not just spending time, you’re spending actual money, and depending on your plan and file size, it can add up faster than you’d expect.
What I did cost nothing beyond the tools I was already using:
- Upload PDF to ChatGPT (free tier works fine for this)
- Ask for structured output, .json and .csv
- Import with Token Studio (free plugin)
- Map values
No terminal, no MCP config, no API authentication flow, no token bill at the end of the session.
This Isn’t an Anti-MCP Take, and I’m Already Testing It
Since writing the first draft of this, I did actually try Claude inside Figma, through an unofficial plugin that’s been circulating on LinkedIn. It’s not something Figma has pushed through official channels yet, but it works, and the direction is interesting. Right now the integration is one way only: you can talk to Claude from within Figma, but Claude can’t write back into your file or manipulate layers directly, so it’s closer to having an AI assistant in a side panel than a true bidirectional workflow.
Which brings me to what Figma officially announced just this week: Code to Canvas, a formal partnership with Anthropic. The workflow runs through Claude Code and the Figma MCP server, and it does something genuinely new, you build or iterate on a UI in Claude Code, type “Send this to Figma,” and the live browser state converts into a fully editable Figma frame, not a screenshot, not a flattened image, but real layers you can manipulate, annotate, and compare. The direction is code to design, the reverse of how things have traditionally worked, and it closes a gap that has been genuinely frustrating for teams prototyping with AI coding tools.
That’s worth paying attention to. And if you’re already deep in a Claude Code workflow, the token cost question shifts too, because you’re inside a paid workflow already and the MCP integration becomes additive rather than the primary expense.
But there’s still a pattern in our industry worth naming: we often celebrate the tool that makes the most noise, not the one that actually solves the problem fastest or cheapest. A terminal integration sounds more impressive than “I used Token Studio,” it photographs better for LinkedIn, it has more steps so it must be doing more. When the simpler method is also completely free, that asymmetry matters.
The Real Skill Is Knowing Which Part of the Problem You’re Actually Solving
When I was working on that banking interface, the problem wasn’t “how do I connect Figma to an AI.” The problem was how do I populate thousands of design variables without losing my mind or the week. That’s a specific, contained problem, and it has a specific, contained solution. I found the shortest path between the data I had and the format Figma needed, used a tool that could bridge the gap, and moved on.
MCP does many things. Live component inspection, code-to-canvas conversion, real-time design system syncing, none of that is what I was solving. I was solving variants generation, and for that job the free approach still wins. Conflating the two is how you end up paying for a power drill when you needed a screwdriver.
That’s the thinking I try to bring to most design problems, not what’s the most comprehensive solution, but what actually solves this, today, for this team. It’s the same instinct I developed working in iGaming, where the data density is brutal and the margin for design errors is zero, or in fintech, where every dropdown state has a legal implication. You learn quickly that sophistication for its own sake is a liability.
Where MCP Does Make Sense, and When the Cost Is Justified
The Code to Canvas announcement is a good example of MCP being used for something that actually couldn’t be done any other way. You’re capturing a live, rendered interface from a browser and converting it into editable design layers in real time, that’s not a job for Token Studio and a CSV file. That’s a fundamentally different kind of problem, and the tooling matches it.
Similarly, if you’re building a real design system at scale, one where the Figma file is a living document, tokens change regularly, and multiple people are consuming the output, then a more structured integration starts to make sense. Reading current component states dynamically, syncing design decisions to code in real time, AI-assisted reviews that understand file structure, in those scenarios, the token cost might be a reasonable trade-off for the time saved, and if MCP saves you two hours of manual work and costs you €2 in tokens, that’s a good deal.
But that’s a different use case than “I need to fill in 3,000 field values from a spec document,” and treating those as the same problem, spending tokens on a job a free tool already does, is where the hype goes wrong.
The Free Variants Generation Approach I’d Still Recommend
If your specific problem is populating Figma variables from an existing document or spec, whether that’s a PDF, a spreadsheet, or a requirements doc, here’s the path that costs you nothing: get your data structured first with ChatGPT or Claude on the free tier, export as .json or .csv, then use Token Studio to import and map. It doesn’t solve everything MCP promises to solve, but for variants generation it’s faster, simpler, and completely free.
The future might be a seamless MCP pipeline that handles this as one small part of a much bigger workflow, and when the value is clear I’ll use it. Until then, I’ll keep matching the tool to the actual problem in front of me rather than the most impressive-sounding one, and that’s not a limitation but just good design thinking.
Edin Vejzovic is a UX designer and founder at WayzUX, based in Sarajevo. He works with startups and digital product teams across fintech, iGaming, and SaaS, with a preference for products that handle real money and real decisions.
