Visual Studio Code presents a session featuring Harald Kirschner, Akbar Mirza, and Amy Lima on how developers can use the Figma MCP server and GitHub Copilot for bi-directional code-design workflows.

VS Code Live: Code to Canvas with Figma MCP and GitHub Copilot

This live session spotlights the Figma MCP server, which now supports bidirectional workflows between code and design:

  • Pull design context into code: Developers can bring Figma designs into their coding environment, accessing context and assets directly in Visual Studio Code or via the CLI.
  • Push working UI back to Figma: After updating UI components in their codebase, users can send changes back to the Figma canvas, streamlining collaboration between engineers and designers.
  • Integrated with GitHub Copilot: The workflow leverages GitHub Copilot’s AI-powered coding features to assist with UI implementation and translation between design and code.
  • Getting Started: Learn implementation tips and practical guidance from Figma’s Harald Kirschner, Akbar Mirza, and Amy Lima.

Topics Covered:

  • Setting up Figma MCP in Visual Studio Code
  • Using GitHub Copilot with design context
  • Round-trip UI editing: from Figma to code and back
  • Real-world developer/designer collaboration demos

This session is valuable for frontend developers, UI engineers, and anyone interested in design-code integration in Microsoft environments.