These 4 MCP Components Will Change Your Design Workflow #figma

14 Jul 2026 · 3 min

Watch on YouTube

2:30

In this presentation, Nick Kugelman outlines a four‑tool MCP (Model‑Component‑Package) suite that enables an AI agent to translate Figma design specifications into concrete UI component implementations. The workflow begins with a package list that exposes available React component packages representing design system atoms such as buttons, cards, and accordions. The agent then uses a map‑component tool to match a Figma spec (spacing, color, typography) to the appropriate package. Once a package is identified, the get‑component‑definition API pulls the detailed component properties from the Figma file. Finally, the get‑design‑tokens tool detects any instance‑level overrides—custom colors, sizes, or interactions—and resolves them against the project's design token set so the generated code reflects the exact visual intent. Together, these tools let the agent automatically generate production‑ready UI code that stays in sync with design updates.

Chapters

The MCP tool that we've been building out generally starts with these 4 tools that helps our agent achieve the design spec that it's given. And so when we think about what Figma MCP provides, it, again, it provides a design spec with spacing specification, color specification, type specification. And then if you begin to think atomically, those, those primitives start to build up into things like a card component or a button or, or an accordion. And so if you think of your design system, you likely have a list of UI, a list of packages, oftentimes a React package that represents those individual components that you see in Figma and that are being used in Figma. So our MCP tool that we've built out for clients and, and for ourselves with our Shiprite product is, is going to have a list of packages that the agent can reach into. So that list the agent can provide will help the agent then discern what it sees from Figma MCP, what it sees there, what is the actual package that might represent that specification. And once it identifies the package, and if we just stuck with, let's say it's a button package, the agent determines it needs a button, it finds the corresponding package, then it can look at a map component tool from the MCP definition. And the map component then will say, okay, now that I've got the package and I've got the specification, now I can begin to wire up with the help of the get component definition, the API to what those specs are from Figma. And then last but not least, if you look at the, the fourth tool, the get design tokens tool, that helps, that will help if, if the component instance that the agent sees in Figma has diverged at all from the default. If there's custom color, if there's a custom size, if there's a custom interaction to it. It can take that customization, that custom spec, and then search through your design tokens to get the equivalent in order to override what would otherwise be a default package instance in your, in your app.