Figma MCP | Four practical agent workflows for design teams
Figma has shared four internal examples showing how its teams use the Figma MCP server across presentations, workshops, interactive prototypes, and design-to-code workflows. Published on June 16, 2026, the examples demonstrate how agents can prepare editable work while designers remain responsible for reviewing, refining, and approving the final result.
Figma shows how MCP works beyond basic design handoff
The Figma MCP server can connect compatible agents with Figma Design, Slides, FigJam, Make, and development tools. Instead of only reading a design for code generation, agents can now help create or update editable content across several stages of a product workflow.
Figma's four examples focus on practical collaboration rather than fully automatic creation. Agents collect context, organize information, prepare an initial design, or move work between code and canvas. Designers and product teams then review the output, correct visual details, replace placeholders, and decide what should move forward.
Refresh a living presentation in Figma Slides
The first workflow uses an external agent to update an evergreen Figma Slides presentation about Figma's AI products. The agent gathered current information from connected sources, suggested outdated sections to revise, and proposed additional slides before writing the new content into the existing presentation template.
In this example, the first pass completed roughly 80 percent of the content work, but the deck still required human review, copy editing, and replacement of image placeholders. Uploaded font support helped the generated slides use the intended typeface instead of substituting a web-safe font, keeping the draft closer to the existing brand.
Build FigJam workshops from current project information
The second workflow turns information from project and analytics tools into an organized FigJam workshop board. A custom skill stores the preferred board structure and formatting instructions, reducing the need to explain the same workshop setup every time.
For a product kickoff, the agent gathered project structure, customer insights, analytics, and key decisions before arranging them on the board. This gave the team a more useful starting point than an empty FigJam file, while still leaving the content editable for discussion and reorganization during the session.
Move interactive designs between Figma Make and code
The third example uses Figma Make for an interactive audio editor containing draggable clips, playback controls, and component states that would be difficult to communicate through static screens alone. The working preview was brought back to the Figma canvas as editable design layers connected to relevant library components.
After refining the component's default, hover, and drag states on the canvas, the designer asked the agent to return those changes to the code. The updated component was then prepared for a GitHub pull request, showing how an interactive implementation can move back to design for refinement before returning to production.
Divide the work between MCP and the Figma agent
The fourth workflow starts with a dashboard and login flow that exist only in code. The MCP server brings those screens into Figma while checking the available design library for components and variables that can be reused instead of rebuilding everything from unrelated elements.
The initial conversion still contained layout, typography, and color issues. The Figma agent then worked directly on the canvas to correct auto layout, adjust type, and connect colors to the proper variables. Once reviewed, the design could be sent back toward code, while the download_assets tool could retrieve source images and icons without a separate manual export.
IMPORTANT: These workflows do not produce finished work without review. Figma Make's production code integration and the Figma agent remain in closed beta, while write capabilities in the Figma MCP server are in open beta and may require an eligible paid seat, supported client, and file permissions.{alertWarning}
Daisuki's Take: What This Means for Web Designers
For web designers, these examples show that MCP is becoming more useful as a connection between stages of work. A project can begin with research, move into a workshop, become an interactive prototype, return to the canvas for visual refinement, and eventually reach code without every transition becoming a manual reconstruction.
We think the strongest pattern is the division of responsibilities. Agents handle context gathering, repetitive setup, initial drafts, and file movement, while designers concentrate on hierarchy, interaction quality, typography, component behavior, and whether the result actually solves the design problem.
The practical takeaway is to build repeatable workflows around clear templates and design systems. An agent becomes more useful when it can work with trusted components, variables, structure, and project context, but the final review still needs a designer who understands the audience and the experience being created.
Sources and Recommended Links
- 4 ways we're using our MCP server at Figma | Figma Official Blog
- Figma skills for MCP | Figma Official Help Center
- Figma MCP server tools and prompts | Figma Official Developer Documentation
