Figma MCP vs Your Design System | What's Missing

4 Mar 2026 · 3 min

Watch on YouTube

2:53

In this conversation, Speaker A and Speaker B examine why current agentic AI tools like Figma’s MCP and Claude Code fall short when applied to bespoke design systems. They note that MCP does not incorporate essential design system assets such as design tokens and custom components, leading to less accurate AI‑generated artifacts. The speakers discuss how their team mitigates this gap by injecting design‑system context into the AI workflow, which markedly improves output quality. Speaker B expands on the shift toward cross‑platform, platform‑agnostic design systems that blur the traditional web‑vs‑mobile distinction, emphasizing the importance of mapping deep backend work (led by Tim) to frontend implementation. Both acknowledge that existing tooling—Figma MCP, Figma Code Connect, and similar integrations—are not yet turnkey for clients, requiring the team to develop custom extraction tools and “recipes” that bridge Figma data to AI agents and frontend code. The dialogue highlights the need for internal tooling, the limitations of current solutions, and a pragmatic approach of combining the best available tools with bespoke processes to deliver reliable, design‑system‑aware AI outputs.

Chapters

I think what, what Dan and I have been seeing is that like the, the MCP offerings, the agentic, um, aids that companies are offering. So if you just take like Figma's MCP offering, for example, what Figma's providing is not well informed of the design system that we've helped build out. And so. So their MCP offering is helping the agent that we're using often, Claude Code. It's helping Claude Code produce a better, a better artifact, a more accurate artifact, but it's still, it's still missing key ingredients. It's still missing design tokens or components that we've created that are a crucial part of what we're building. So, so being able to add that context to the workflow, the agentic workflow that we use or that our teammates use, you know, with the client has made a pretty substantial difference in, in how accurate the product is that we get from an agent. How do you and Dan like kind of like divide and conquer on that front?
That split between, you know, web and mobile becomes a lot less important, especially with the way that we, we build design systems and that we can build them in a really, um, cross-platform and platform-agnostic way. Um, when we come at it from that approach, then the way that the AI tooling comes into play really matters less about the platforms and more about the, the split between like that deep backend work that Tim has, has done a lot of on this project. Um, and then how we map that to the frontend work. So what we're finding is that there's a lot of tooling that still needs to be built and it's getting, it's getting introduced in more of like a, a platform way with things like the Figma MCP, but it's still not great. It's still not. Um, turnkey enough, I think, for, for us or for our clients to really pick it up and just use it. So we're really having to fill in the gaps in a lot of ways, either through tooling to, you know, get some of that information out of Figma in a way that the AI systems can use it in a really like thorough and thoughtful way, or building more of a bridge from our, our AI tools into the front end. Sometimes with things like Figma Code Connect, that's been really useful, but it's not useful in a broad spectrum yet. And so taking kind of some of the best of all of that and building our own recipes of how we use them seems to be how things are shaking out.