5 MIN READ
A few months ago, Figma launched Figma Dev Mode MCP (Model Context Provider), which brings Figma directly into the developer workflow to help LLMs achieve design-informed code generation. Previously, AI tools could only ingest design context from images or API responses. With the Model Context Protocol (MCP), apps can now share structured context directly with LLMs, which means more time to focus on design!
Given all the hype around MCPs, I thought it would be fun to experiment and see if they live up to the hype. More specifically, I wanted to use Figma MCP with Comet—MetroStar’s USWDS-based Design System, to accelerate initial UI development. The experiment was a tremendous success. With these tools and a few others, I can generate code for Comet-based Figma designs with nearly 100% accuracy in minutes.
Why This Matters + How It Works
As someone who specializes in UI development, I can say that the process of bringing a design to life with code can be time consuming, especially if you're working with a well-defined design. Also, while I love building UIs, I do not love dealing with minor nuances like colors, spacing, font size, etc. Luckily, this is an area where AI shines.
Before seeing this in action, I would like to talk through the three major pieces: Comet, Figma, and GitHub Copilot.
Comet was built as an accelerator for developing government web apps, with a heavy focus on DevEx (Developer Experience). This means enhancing Comet to support more than just USWDS components. This also means providing a fully functional, production-ready Comet Starter application. All well documented, secure, and accessible.
We are taking the experience a bit further through integrations with Figma:
-
Comet Design Kit: a Figma design kit which includes all Comet components.
-
Figma Code Connect: additional files added to source which maps the coded components with the design kit components.
-
Figma MCP: makes use of designs as well as the above tooling to support the coding agent.
Lastly, we are working with GitHub Copilot in VS Code to provide coding agents, the latest models (Claude Sonnet 4), and MCP integration. We are using Copilot instructions to provide contextual guardrails for the LLMs regarding coding standards, styling, testing, accessibility requires, etc. The developer environment we’ve created with Comet and Figma provides an AI-ready platform for building precise and efficient web applications which reduces development cycles from days to minutes.
Comet x Figma In Action
First, we pull up our design in the Figma Desktop App, right click the design, select "Copy as", and select" Copy link" to selection. The screenshot below shows our initial Figma design.
Next, we navigate to our app in VS Code and prompt Copilot to implement our design:
Click through a few confirmations to allow Copilot to work with Figma MCP and your designs:
And within a few minutes we have our code!
... and our newly updated dashboard! As you can see, we now have metric cards at the top, data visualizations, and data tables just as we did in the design, indicating that this experiment was a wild success!
What’s Next
We are taking advantage of our AI-ready Design System as well as advancements in AI, such as LLM's and MCPs to supercharge the design-developer experience. For questions or next steps, reach out to our Innovation Lab and Johnny Bouder!
About The Author
Johnny Bouder is MetroStar’s Principal Software Engineer, driving innovation in Frontend, Open Source, and Developer Experience (DevEx). With a passion for building tools that empower developers, Johnny combines technical expertise with a creative edge—whether he’s shaping modern design systems or experimenting with cheesemaking, cocktails, and the occasional metal riff. His work bridges precision and play, helping reimagine how technology is built and experienced.
