Experimenting with Figma MCP & Claude Code: Production-Ready Prototypes in Seconds

I've been experimenting with our workflow at spektr using Figma's MCP and Claude Code, and I'm honestly very impressed with the results.

The Problem

Traditional handovers between design and engineering often feel disjointed. A lot has improved, but this feel like almost the ultimative handover workflow.

The Experiment

Using the Figma Model Context Protocol (MCP) in combination with Claude Code changed how I think about this bridge. Here are some of my key learnings:

1. Instantly 'Real' Prototypes

The most immediate benefit is seeing a 'real' prototype almost instantly. By connecting our design system directly to the AI, we can generate functioning code that uses our actual product components and styling.

2. Naming Matters (But Less Than You'd Think)

Even without advanced setups like Code Connect, the system works surprisingly well with basic naming conventions. Using "Card" instead of generic labels like "Frame 50252" is enough for the AI to understand the intent and map it to our internal components.

3. Production Quality Code

What impressed me most was the quality of the output. Using Claude 3.7 Sonnet (or Opus 4.6), the generated code wasn't just a mockup—it used our existing components and adhered to our i18n systems. It's production-ready logic, not just visual fluff.

4. Fast Exploration

Being able to explore multiple directions rapidly while keeping Claude in the session is a game-changer. You can iterate on designs and see the code update in real-time.

Future Outlook

There is still more to explore regarding how we can best integrate this into our daily workflow, but the initial results are incredibly promising. The gap between design and development is closing faster than ever.