The video is a live stream hosted by Olivia from the VS Code team, featuring guests Harold (VS Code) and Akbar (Figma). The session focuses on the integration between VS Code, Figma’s MCP (Model Context Provider) server, and GitHub Copilot, highlighting how these tools enable seamless collaboration between designers and developers. Olivia opens with announcements, including the upcoming Microsoft Build conference, and encourages audience interaction throughout the stream.
Akbar and Harold discuss the evolution of the Figma MCP server, emphasizing its role in providing rich design context—such as layout, metadata, variables, styles, components, and annotations—to AI agents. This context allows agents to generate production-ready code that closely matches the original Figma designs. They explain how MCP serves as an open standard for communication between AI agents and external services, streamlining integration and ensuring secure, efficient data exchange.
A significant portion of the stream is dedicated to demonstrating the workflow from design to code and back—what they call “canvas to code” and “code to canvas.” Akbar showcases a recipe app built with Astro, using Figma designs and the MCP server to generate code in VS Code. The demo highlights features like context window estimation, integrated browser support in VS Code, and the use of agent skills to optimize tool usage and context management. The process includes handling large design contexts, chaining tool calls, and leveraging Playwright for browser automation and validation.
The presenters also discuss the importance of skills and guidelines in customizing agent behavior, enabling teams to define workflows that suit their needs. They touch on the benefits of using plugins over raw MCP installations, noting that plugins offer a smoother setup, bundled skills, and better documentation. The conversation covers future improvements, such as enhanced support for design systems and component mapping, as well as the upcoming rollout of features to the Copilot CLI.
In closing, the hosts reflect on how these integrations are transforming the design-development workflow, making it more collaborative and iterative. They highlight the speed and fidelity with which teams can now move from design exploration to production code and back, fostering rapid prototyping and user testing. The session ends with practical advice for ensuring AI agents use existing design systems—primarily by leveraging Figma’s Code Connect—and an invitation to revisit the stream for more resources and demos.
