Figma MCP for VS Code: AI-Driven Design-to-Code Collaboration

5 days ago by Microsoft Developer

Microsoft Developer presents Joanna Oikawa's practical guide to connecting Figma and VS Code using MCP, demonstrating AI-powered design-to-code workflows and best practices for designer-engineer collaboration.

Figma MCP for VS Code: Bringing Designs to Life with AI

Presented by Joanna Oikawa, Product Design Lead (VS Code), Microsoft

Cozy AI Kitchen explores cutting-edge designer-engineer collaboration with Model Context Protocol (MCP), bridging Figma design and Visual Studio Code for real-time, AI-powered UI development.

Key Topics Covered

Connecting Figma and VS Code with MCP:
- Setting up MCP server
- Enabling Dev Mode in Figma and VS Code
End-to-End Design-to-Code Workflow:
- Transform rough Figma wireframes into interactive UIs directly in code
- Iterate visually and refine behavior live in VS Code
- Pass contextual design data via MCP agents for AI processing
AI-Driven Collaboration & Features:
- Live design feedback before writing code
- Use personal notes and documentation as input for AI agents to produce dashboards or presentations
- Codify design expertise into reusable “skills” for teams
Integrations and Demos:
- GitHub Copilot for code generation during the workflow
- Demo repository and sample dashboards
Designer Advice:
- Start small with AI tools
- Add new practices gradually and adopt what’s practical
- Value sharing expertise to avoid workflow bottlenecks

Actionable Insights

MCP bridges the gap between design and engineering, allowing real-time, AI-driven translation of Figma intent to code.
VS Code and Figma’s integration via MCP streamlines the handoff process, making UI iteration more visual and engaging.
Teams can now encode best practices and knowledge into automated, shareable skills, supporting consistency and speed.

Resources

Speakers:

Joanna Oikawa, Product Design Lead, VS Code (LinkedIn)
John Maeda, VP of Design and Artificial Intelligence, Microsoft (LinkedIn)