Designers have long handed off work from Figma to engineering—but Model Context Protocol (MCP) is changing that workflow. In this episode of Cozy AI Kitchen, Joanna Oikawa (Product Design Lead, VS Code) walks through how Figma MCP connects Figma designs directly to VS Code, enabling faster iteration, live collaboration, and AI‑assisted UI development.
You’ll see how designers can:

- Connect Figma and VS Code using MCP
- Turn simple Figma wireframes into functional interfaces
- Iterate directly in code with visual context
- Codify design knowledge into reusable “skills” for teams

This session is a practical look at how AI enables tighter designer‑engineer collaboration—without reinventing your entire process


⏱️ Chapters
00:00 – Designers, Figma, and the AI confusion
Why designers are curious — and cautious — about AI workflows
00:24 – Meet Joanna Oikawa (VS Code Design)
Why Figma + MCP matters right now
00:49 – What is MCP (Model Context Protocol)?
How MCP lets AI models talk directly to apps like Figma and VS Code
01:46 – The age of personal software
Building a custom task dashboard from local notes using AI
03:14 – Designing with intention (not pixels)
Using rough Figma wireframes and annotations as AI input
04:09 – Live design feedback in Figma
Iterating visually before writing code
04:51 – Connecting Figma MCP to VS Code
Installing the MCP server and enabling Dev Mode
06:20 – From Figma frame to working UI
Passing design context directly into an AI agent
07:21 – Generating interactive slides from notes
Using MCP beyond UI: turning personal docs into presentations
09:44 – Usability heuristics and design knowledge
How designers can encode expertise as reusable “skills”
11:30 – Should designers share their knowledge?
Why hoarding expertise becomes a bottleneck
12:29 – Reviewing the AI‑generated dashboard
Functional UI driven directly from Figma context
13:21 – Iterating inside VS Code with visual context
Selecting UI elements and refining behavior live
15:13 – Advice for designers overwhelmed by AI
Start small. Add tools gradually. Keep what works.

🔗 Links & Resources

🚀 Try Azure for free: https://aka.ms/AzureFreeTrialYT
⚡Demo repo: https://aka.ms/CAIK-MultiAgentCoding
🚀 VS Code: https://code.visualstudio.com/
⚡ Learn VS Code AI features: https://code.visualstudio.com/docs/in...
🧪 Try GitHub Copilot: https://github.com/features/copilot
📚 Microsoft Learn: https://learn.microsoft.com/
🍽️ All Cozy AI Kitchen episodes: https://aka.ms/CAIK-YTPlaylist

Joanna Oikawa - Product Design Lead
https://www.linkedin.com/in/joannaoikawa

John Maeda - Host, Cozy AI Kitchen
VP of Design and Artificial Intelligence, Microsoft
 https://www.linkedin.com/in/johnmaeda/


#Figma #VSCode #ModelContextProtocol #MCP
#DesignToCode #AIDesign #DeveloperExperience
#ProductDesign #UXDesign #DesignSystems
#AIWorkflow #AgenticAI #DevTools
#FigmaDevMode #GitHubCopilot #PersonalSoftware
#CozyAIKitchen

Microsoft Developer

A demo walkthrough showing how designers can use the Figma MCP server extension in VS Code to bridge design and development. The workflow involves creating a simple wireframe in Figma, connecting it to VS Code via the Figma MCP extension, and using an AI agent (Claude Opus) to generate a functional UI from the design. The demo also covers parallel agent sessions using Git worktrees, using the Add Element to Chat feature for iterative fixes, and codifying design knowledge as reusable 'skills' for engineering teams. Advice for overwhelmed designers: start small, add tools incrementally.

Figma MCP for VS Code: Bringing Designs to Life with AI, with Joanna Oikawa | Cozy AI Kitchen