Figma: Roundtrip workflows with Figma MCP and Claude Code

This 50-minute livestream, published on Figma’s YouTube channel in March 2026, features Thariq Shihipar (technical staff at Anthropic) and Brett McMillin (designer advocate at Figma) working through how the Figma MCP server enables a bidirectional connection between design files and code environments. The session is focused on live demonstration rather than slides: the speakers build and break things on screen and discuss what they are doing as they go.

The context for the session is the Figma MCP server, which gives Claude Code structured access to Figma files. Through the connection, Claude can read component information, variables, layout data, and design system elements, then generate code that reflects those constraints. The roundtrip adds the reverse direction: code written or modified in a development environment can be pushed back to Figma as editable design layers.

Who this video is for

Designers who write some code and engineers who work closely with design files will get the most from this session. It assumes basic familiarity with Claude Code and Figma’s component system. Viewers who have not set up the Figma MCP server before will want to read Figma’s setup documentation alongside this video, since the demonstration starts from an already-configured state.

Key takeaways

1. The MCP connection treats a Figma file as structured data rather than a static export. Claude Code can query specific components, understand how variables are connected to design tokens, and generate implementation code that maps to the actual design system — not a generalized approximation of it.

2. Moving from Claude Code to Figma produces editable native layers, not flattened images or locked groups. This matters for handoff: a developer who generates a new UI element in Claude Code can push it to Figma in a form the design team can refine without rebuilding it from scratch.

3. The reverse direction — design to code — requires the designer to understand what they are describing at a structural level. Shihipar demonstrates several cases where a vague description produces generic code, while a description anchored in specific component names and variable references produces implementation-ready output.

4. The session surfaces a real limitation: the MCP connection does not yet cover all Figma file types and some design system features. The speakers discuss which capabilities are stable and which are still maturing, which is more useful than a product demo that avoids edge cases.

5. The workflow changes the scope of what a design-engineer collaboration can accomplish in a single session. Rather than design producing specifications for engineering to interpret, both sides can work in the same materials and push changes across the boundary without manual re-creation.

Worth watching if your team has already adopted Figma’s AI tools and you are trying to connect them to a code workflow, or if you are evaluating whether the Figma MCP integration is mature enough for use in production-facing design work.