Setting Up Figma MCP Server in VS Code
Microsoft Developer shares an episode of Cozy AI Kitchen where Joanna Oikawa demonstrates how a Figma MCP server connects Figma designs to VS Code to support AI-assisted UI development and faster designer–developer iteration.
Overview
Design-to-engineering handoff from Figma is evolving with Model Context Protocol (MCP). In this Cozy AI Kitchen episode, Joanna Oikawa (Product Design Lead, VS Code) walks through using a Figma MCP server to connect Figma designs directly to Visual Studio Code (VS Code).
The goal is to shorten the loop between design and implementation by bringing design context into the developer environment.
What the episode covers
- Connecting Figma to VS Code via MCP
- How a Figma MCP integration can expose design context inside VS Code.
- Faster iteration between design and engineering
- Reduce back-and-forth by having design artifacts available where code is written.
- Live collaboration
- Workflows that support designers and engineers iterating together.
- AI-assisted UI development
- Using AI with richer context from design sources to speed up UI implementation.
Watch
Watch the full episode: