Connected Design-to-Code Workflow

GitHub Copilot now supports integration with Figma's Model Context Protocol (MCP) server, enabling a bidirectional connection between design tools and VS Code. This feature allows developers to bridge the gap between design and implementation by pulling design context directly into their coding environment and sending rendered UIs back to Figma for collaborative iteration.

Key Capabilities

The integration provides two main workflows:

• Design-to-Code: Pull design context and specifications from Figma into VS Code while working with Copilot, enabling faster and more accurate code generation from designs
• Code-to-Design: Export rendered UIs from your codebase directly to Figma as editable frames, creating a feedback loop for design refinement and iteration

Getting Started

To use this feature, developers need to:

1. Install the Figma MCP server in VS Code
2. Connect their Figma account to the server
3. Use Copilot to access design files and generate code or export UIs

Availability and Requirements

• Who can use it: Any developer with an active GitHub Copilot subscription
• Figma compatibility: Works with all Figma seats and plans
• Platforms: Available today in VS Code, with Copilot CLI support coming soon
• Note: Exporting UI to Figma as editable frames requires the remote MCP server to be installed

This integration represents a significant step toward AI-assisted development workflows that acknowledge the reality of modern software teams—designers and developers working in tandem.