Figma: GitHub Copilot Bidirectional MCP Integration
FigmaFigma expanded its Model Context Protocol (MCP) server to support a fully bidirectional workflow with GitHub Copilot in VS Code, closing the loop on what was previously a one-way design-to-code pipeline. Developers can now pull design context — component hierarchies, design tokens, and layout structures — directly into their editor, and push rendered UI back to the Figma canvas as fully editable frames. The integration is available to any GitHub Copilot subscriber on all Figma plans, with Copilot CLI support coming soon.
Sources & Mentions
5 external resources covering this update
Figma MCP server can now generate design layers from VS Code
GitHub
figma/mcp-server-guide: A guide on how to use the Figma MCP server
GitHub
Enhancing GitHub Copilot agent mode with MCP
GitHub
Figma to Code with MCP & Github Copilot | Setup & Workflow
Medium
VS Code Live: Code to Canvas with Figma MCP and GitHub Copilot
Microsoft Tech Community
Figma's MCP Server Goes Bidirectional with GitHub Copilot
Figma introduced a major expansion to its Model Context Protocol (MCP) server in March 2026, enabling a fully bidirectional design-to-code workflow with GitHub Copilot inside Visual Studio Code. For the first time, the connection between Figma and a developer's coding environment flows in both directions.
What Changed
Previously, Figma's MCP server allowed AI coding assistants to pull design context from Figma into code. Developers could point GitHub Copilot at a Figma file and receive generated components with styling that closely matched the design specifications — including component hierarchies, design tokens, Auto Layout rules, and other structural information.
The new update adds the reverse: developers can now capture rendered UI from their running application and send it back to the Figma canvas as fully editable design frames. Designers can then iterate directly on the actual, working implementation rather than an outdated or approximated static mockup.
A True Design-Code Loop
The result is a connected workflow: generate code from a design, refine and implement the UI in the editor, send the rendered output back to Figma for design review, pull updated design context back into the codebase, and repeat. This loop addresses one of the most persistent challenges in product development — the gradual drift between what designers specify and what developers ship.
Getting Started
Setting up the integration requires three steps: installing the Figma MCP server, connecting a Figma account, and using GitHub Copilot in VS Code to exchange design context or push frames to the canvas. Sending rendered UI back to Figma as editable layers requires the remote MCP server configuration. Copilot CLI support is on the roadmap for broader terminal-based workflows.
Availability
The integration is available to any developer with a GitHub Copilot subscription. On the Figma side, all seat types and plans are supported — no Enterprise tier is required.