Post Content
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 Read More Microsoft Developer
