Figma tutorial: Code to canvas with your design system, by Figma on YouTube. 4 min 40 s.
- Video length
- 4 min 40 s
- Time to do it
- 20 minutes
- Difficulty
- Medium
- Steps
- 8
What you need
Steps
Open the Figma desktop app and switch on the MCP server in Preferences so your AI client can reach your files.
Add the Figma MCP server to your AI client's config file, then start the agent from your project's terminal.
Point the agent at your design system library so it reads your published components, styles and variables first.
Prompt the agent to create or update a frame with the use_figma tool, naming the page, components and states you want.
Open Figma Design and review what landed on the canvas: spacing, text styles and component variants.
Keep iterating from the terminal, asking for smaller fixes like padding, alignment or a new variant.
Leave comments on the frame to annotate what needs to change so the agent has written notes to work from.
Send the approved design back to the codebase and read the diff before you commit or merge anything.
Tips and common mistakes
Commit or stash your code before you start so you can undo anything the agent writes.
Keep prompts small and specific, one frame or component at a time, or the output drifts from your system.
Publish your library before running the agent, since unpublished components often come back as loose layers.
Questions
What is the use_figma tool?
It is a tool in Figma's MCP server that lets an AI agent write to the canvas, not just read from it. That means the agent can build and edit frames directly in your file.
Do I need a paid Figma plan?
You need Dev Mode access and the desktop app, since the MCP server runs locally. Check your current seat against Figma's plan details before you start.
Can it use my own design system?
Yes, that is the point. Point the agent at your published library so it builds with your real components, styles and variables instead of raw shapes.
This guide was drafted from the video's details and general task knowledge. It has not been checked against the full video. Check the video and relevant product instructions before following a procedure. Report a correction.
