Figma published a blog post last week about AI agents working directly on the canvas. X (Twitter) responded the way Twitter always does. Most of the setup content that followed assumed you had a terminal open and knew what to do with it. This post assumes you don’t.
This is a walkthrough based on Figma’s own blog post and community resources, written for designers who want to test this without a developer setup.
Video walkthrough
What Figma Skills Are and Why They Exist
Most AI design output feels generic because the model has no context about your specific product decisions, your spacing system, your token structure, your component conventions. Skills are Markdown files that give agents that context. They tell the agent how to work inside Figma: which components to use, how variables are structured, what naming conventions your team follows.
Figma built this so agents can work on your actual canvas, with your actual design system, rather than generating a disconnected mockup you then have to rebuild from scratch. The audit and apply workflow—scan a screen for design system drift, then fix what’s out of place—is where this is most useful right now.
The Setup Has a Few Steps the Announcement Glosses Over
Start at the Figma community skills page. The foundational file is called Figma Use and it is hosted on GitHub. Download it. This is the base everything else depends on.
But that single file is not enough. Inside the Figma Use folder on GitHub there is a references subfolder. Every MD file inside it needs to be downloaded and uploaded separately, organised into a folder that mirrors the GitHub structure. There is also a second subfolder inside references called working with design systems. Same process: download each file, upload it, keep the naming consistent.
The naming matters. If your folder structure does not match the GitHub layout exactly, the agent cannot find the references and nothing runs correctly.
One more step before any of this works: the Figma MCP server needs to be connected to Claude Code. That is configured separately in Claude’s connectors settings. Do that first.
None of these steps require a terminal. The whole setup can be done through file uploads and Claude’s interface.
What the Output Actually Looks Like
Honest answer: it is inconsistent. The audit skill, which scans a screen and identifies where tokens, styles, or components are missing, is the most reliable part of the current workflow. It finds real problems and gives you something useful to act on.
Full generation from scratch is a different story. The agent applies components reasonably well but often ignores variables, fills, and text styles. Identical prompts produce different results between sessions. The research from people who have tested this extensively shows the same pattern—it works cleanly some of the time and misses things the next.
That inconsistency is not a reason to skip this entirely. Figma is a serious company and this is version one. The MCP framework, the skills structure, and Claude’s integration with Figma will all improve. The designers who understand the setup now will have less to learn when the technology becomes more reliable.
Where to Start
Follow Figma’s own blog post. Use the community skills page. Start with the audit skill on an existing file before trying to generate anything new. Keep expectations proportionate to where the technology actually is, not where the demos want you to think it is.
We have made a detailed breakdown if you want to go deeper into how to set this up.
