The Middle Ground: AI-Assisted Design with Figma Console MCP
Experiment
So, agentic design is actually here. Not "coming soon" - here, now, working.
I've been playing with Southleft's figma-console-mcp repository (massive thanks to TJ Pitre and the team), and honestly? It's changed how I think about design tooling. If you're not familiar with MCP - Model Context Protocol - think of it as a bridge. It lets AI tools like Claude or GitHub Copilot actually work with Figma. Not just look at designs, but properly interact with them.
And here's the thing: it's not about the novelty. It's the speed that gets you.
What used to take me hours - building out screens for prototyping, testing flows, iterating layouts - I'm doing in minutes now. More options. Faster iteration. Getting in front of customers earlier. That's what matters.
Now, there's this whole conversation happening about ditching Figma entirely. I get it - I'm opening Figma less myself these days because code-first POCs are ridiculously fast. But here's where it gets complicated: not everyone on my team lives in VSCode. Not everyone's comfortable with Git workflows. And in a larger team like ours at BrightHR, Figma isn't just a design tool - it's where we collaborate, where we maintain our system of record, where stakeholders can actually see what's happening.
That's why this middle ground feels important to me. You get the AI amplification without forcing people to completely change how they work. Which is exactly the space I'm exploring with our UX team.
Quick note on setup - most demos I've seen online use Claude Code Desktop with the MCP client. I went a different route. I'm already comfortable in VSCode, and I've got AI credits through work anyway, so I'm using GitHub Copilot with Claude Sonnet 4.5. Works perfectly. Proves you don't need to overhaul your entire workflow.
The real challenge? Getting my designers to actually embrace this stuff. That's the hard part. And that's precisely why the middle ground matters - you meet people where they are, in tools they already know.
(Important disclaimer: The demo UI in the video isn't meant to look like BrightHR's actual interface. What I'm showing is how quickly you can explore ideas, iterate, and validate concepts.)
What I Was Testing
Could Figma Console MCP actually work as a practical middle ground? That's what I wanted to know. Not as a theoretical exercise - could it actually help designers explore and iterate faster without forcing them into an entirely new toolkit?
Here's what I was specifically looking for:
Would AI agents speed up design exploration without making designers learn IDE and Git workflows? Could we keep Figma as the source of truth where teams collaborate, rather than abandoning it for code? Would agents working with our design system components produce consistent, predictable results? And most importantly - could we really compress hours of work into minutes?
The technical challenge was interesting: getting AI agents to interact with Figma the same way designers do. Searching component libraries, instantiating components, configuring properties, swapping variants, assembling layouts - all while maintaining design system consistency.
What It Does
I set it up with a multi-agent approach. One agent acts as the UX designer - analyzing requirements, mapping content to components, defining layouts. Another agent handles the Figma work - pulling components, configuring properties, swapping variants. They hand off context between tasks, documenting decisions along the way.
The Figma Console MCP integration handles the mechanics: searching component libraries, configuring text and styling, swapping components, assembling frames, managing auto-layout and constraints.
What you end up with are fully assembled screens in Figma using your actual design system components. Properly configured, correctly styled, with sensible constraints. It's designer-ready - needs refinement, sure, but you're refining rather than building from scratch. And you can get it in front of customers way earlier.
Why This Actually Matters
This validates something I've been thinking about for a while: there's a real middle ground here that's probably more practical than the extremes.
There's pressure to skip Figma entirely. AI makes coding POCs insanely fast. For solo designers or tiny teams, that's brilliant. But here's reality: not every designer is comfortable in IDEs and Git. In larger teams, Figma plays a crucial role - shared environment, collaboration surface, system of record. All that matters.
Figma Console MCP offers something pragmatic: AI amplification without workflow upheaval. Designers stay in familiar tools while getting speed and iteration capacity that used to require coding skills.
Let me be specific about impact:
What took hours now takes minutes. And that's not just convenient - it fundamentally changes what's possible during discovery. When exploration is faster, you can test more variations, explore more hypotheses, iterate more frequently. Better decisions. Earlier customer testing. That's the real value.
Working within design systems means agents produce consistent output that respects established patterns. For larger teams where consistency and governance matter, that's critical. Unlike code-first approaches that work brilliantly solo but struggle in team contexts.
What genuinely excites me is watching agents correctly configure complex components, pull them from libraries, swap variants, document decisions. It feels like amplification, not replacement. And that distinction matters.
The infrastructure piece is key here. This only works because Figma Console MCP lets agents interact with Figma programmatically like designers do. Without that, AI-assisted design stays limited to code generation. With it, designers gain speed without abandoning their tools.
What I Used
AI Setup:
- Claude Sonnet 4.5 through GitHub Copilot
- Two-agent setup: UX Designer Agent and Figma Agent
- Structured context handoffs between agents
Figma Automation:
- Figma Console MCP from Southleft
- Component library search and instantiation
- Property configuration APIs
- Component swapping
- Frame assembly and auto-layout
Design System:
- Existing component libraries (buttons, forms, cards, navigation, layouts)
- Design tokens for visual consistency
- Pre-built patterns
- Design system consistency enforcement