Workflow lab: Moving between design and code with agents
Aug 27, 2026Riccardo Erra
Summary
This post details how Figma's MCP server and Code Connect are used to provide richer context to coding agents. It introduces the use of `generate_diagram` for planning in FigJam, `search_design_system` to find existing components, and `get_variable_defs` to detect and resolve design drift. The workflow demonstrates how agents can leverage design system components and tokens to generate more accurate and production-ready code, reducing rework and improving the design-to-code handoff.
More from the Figma Make Visual Editor trail
- How to lighten design system upkeep with the Figma agent
- Workflow lab: Staying in the flow with Figma’s agent
- 3 ways product designers use the Figma agent for craft, speed, and creative expression
- How Coinbase used Code Connect to guide agents and shrink token costs
- Behind the build: Generative plugins and shaders at Figma