Workflow Lab: Expanding the Canvas with Figma MCP | Figma Blog

Figma’s workflow demonstrates how the Figma MCP server can reconnect design and implementation as features evolve. By reading coded states and generating editable frames on the canvas, an agent exposes product behavior that was invisible in the original design. This lets designers improve real edge cases and compare the shipped experience with design intent earlier.

The problem: Code creates new product states

• Astra, a fictional AI video platform, ships features rapidly with agentic coding tools.
• An initial export flow covered sequence selection, format choice, settings confirmation, and export.
• As development progressed, additional states appeared:
  • Encoding errors
  • Rendering and loading progress
  • Empty selections
  • Unsupported formats
• These states were not necessarily design oversights; they emerged from real code and data.
• When the canvas represents only the initial flow, designers cannot fully address the experience users will encounter.

Expanding the canvas with Figma MCP

• The Figma MCP server allows an agent to read implementation details and write results to the Figma canvas.
• Using use_figma, the agent identifies coded states and creates editable frames using the team’s design-system components.
• Astra’s canvas expands from four original frames to fourteen frames representing the broader product reality.
• This replaces a slower task-and-ticket feedback loop with a direct conversation between design, code, and the agent.

Designing better edge cases

• The designer can immediately work on states that previously remained hidden:
  • Adds recovery guidance to the encoding error state.
  • Enhances the render loading state with progress information and an estimated completion time.
  • Adds copy and personality to the empty-selection state to encourage feature adoption.
• Designers spend less time discovering missing requirements and more time shaping actual product behavior.
• The canvas becomes a shared workspace for reviewing the full experience, not merely documenting the initial concept.

Comparing design and implementation

• The workflow also places the coded version beside the original Figma design for visual comparison.
• A findings panel surfaces discrepancies by severity.
• Example differences include:
  • A larger modal title
  • An additional “Post share link” button
  • A removed settings-panel surface
  • A demoted settings header

The practical recommendation is to use Figma MCP as an ongoing design-code feedback loop: bring real implementation states onto the canvas, refine them with design expertise, and use visual comparisons to catch drift before it becomes part of the shipped product.