Write to canvas

With the Figma MCP server, you can prompt your agent to create and edit content directly in your Figma files. Instead of describing a layout in chat and rebuilding it by hand, your agent builds real Figma content: frames, components, variants, variables, and auto layout.

This works especially well with design systems. Your agent can build with the components, variables, and layout rules your team already uses, instead of drawing shapes that only look right. The result is standard, editable Figma content that's easy to review, refine, and build on, with your design system as the source of truth from canvas to code.

Writing to the canvas is different from sending UI to Figma. Sending UI to Figma captures a running app as flat layers, without a connection to your libraries. Writing to the canvas builds with your existing components and variables. You can use them together: capture your latest UI, then have your agent refine it with your design system.

For an overview, read The Figma canvas is now open to agents on the Shortcut blog.

How it works

Your agent writes to the canvas with the use_figma tool. The tool lets your agent run code in your Figma file through the Figma Plugin API, so it can create and update real design structure rather than a screenshot or static export.

Write to the canvas

1. Set up the remote Figma MCP server for your client.

2. Open the Figma Design file you want to work in and copy a link:

   • To work in the whole file, copy the URL from your browser's address bar.
   • To work on a specific layer, right-click it and select Copy link to selection.

   The remote server uses links to know which file or layer to work with.

3. Paste the link into a prompt that tells your agent what to do. For example:

   • "Using this Figma file: <Figma file URL>, create a new page and build a settings screen with auto layout using our existing components."
   • "Using this selection: <link to selection>, convert these raw values to variables and update the surrounding components to use them."
   • "Using this Figma file: <Figma file URL>, add a new empty state that matches the existing design system."

   Your agent looks at the file to learn its structure and conventions, then makes the changes.

4. Open the file in Figma to review the result. Then keep prompting your agent to refine it or keep building.

Tips for better results

• Include a link. Put the file URL or a link to your selection in your prompt so your agent knows exactly where to work.
• Keep going in the same conversation. After your first prompt, your agent usually assumes you want to keep working in the same file. For example, after "Using this file: <Figma file URL>, create a profile settings screen," you can follow up with "Add an empty state below that" or "Now convert the color values in this section to variables."
• Make large changes in steps. Your agent works best when it reviews the file first, then creates or updates variables, components, and layouts in smaller steps, checking its work as it goes.
• Name what to use. When working with a design system, mention the libraries, components, variables, or modes you want your agent to use. You'll get the best results when your agent builds with what already exists in the file.

Current limitations

• Each tool call can return up to 20 KB of output.
• use_figma can't add new images on its own. Your agent adds images with upload_assets, and can create new ones with generate_image. Importing components that contain images or videos, and creating GIFs, aren't supported yet.
• Fonts must be uploaded to your Figma account. Fonts that are only installed on your computer aren't available.
• Components must be published manually before Code Connect mappings can be completed.
• Output is beta quality and may need manual review and cleanup.

Writing to the canvas is being improved continuously. If you run into issues, report them using Fig, our support chatbot, or by emailing support (paid plans).

For more questions, see the Figma MCP server FAQs.