GitHub Copilot Now Connects to Figma via Bidirectional MCP Server

GitHub

Mar 15, 2026 · Updated Apr 25, 2026

GitHub Copilot now connects to the Figma MCP server for a bidirectional design-to-code workflow in VS Code. Developers can pull design context into code and push rendered UI back as editable frames. Any GitHub Copilot subscriber can use this today.

GitHub Copilot now supports a bidirectional integration with Figma through the Figma MCP (Model Context Protocol) server, available in VS Code today with Copilot CLI support coming soon. Developers can pull design context from Figma into Copilot to generate code from existing designs, then send the rendered UI back to Figma as editable frames. Capturing UI as editable frames requires the remote MCP server, available on all Figma seats and plans.

Design-to-code has traditionally been one-directional — designers hand off static specs, developers interpret them, and feedback loops run through screenshots and staging links. A bidirectional MCP bridge shortens that loop by keeping both sides working from the same live artifact instead of trading static snapshots.

If your team works across Figma and VS Code, this integration means design iteration and code generation happen within the same connected workflow rather than as separate handoff steps.

View the full update on github.blog

GitHub

@githubMar 10

That gap between design and production? Closed. 🔁 GitHub Copilot, @code, and @figma now create a continuous loop. With the bidirectional Figma MCP server, Copilot users can: 🔹 Pull design context into code 🔹 Push working UI back to the canvas Connect your canvas and stay in the flow. 👇 https://t.co/bCZWRMohYJ

View on X

Every HeadsUpAI update is written based on its original source and reviewed before it's published. Read our editorial standards →

See all AI news & updates from GitHub →

Keep reading

Codex Now Connects to Figma for Bidirectional Code-Design Workflows

Codex now connects to Figma via the Figma MCP server, enabling a bidirectional code-design-code workflow. Figma designs translate directly to code, and live UI pushes back to Figma as editable frames for designer annotation and collaboration.

ClaudeFeb 18

Claude Code Now Pushes UI Screens Directly to Figma via MCP

Claude Code can now push your UI code into Figma as design frames - prompt it to visualize your screens and each one lands on the Figma canvas. The updated Figma MCP adds this code-to-Figma path, completing a bidirectional workflow.

WarpMar 15

Warp Adds Code-to-Canvas Skills for Figma MCP Integration

Warp added two built-in skills — generate-figma-content and pull-figma-content — for Figma's remote MCP server. Developers can render UI in code, push it to the Figma canvas, collect design feedback, and pull changes back without leaving Warp.

FigmaMar 15

Figma MCP Server Adds Cursor, Warp, and Three More Partners

Figma expanded its MCP server to five new coding agent partners: Cursor, Warp, Factory, Augment Code, and Firebender. Developers using these tools can now pull live Figma design context directly into their agentic coding sessions.