Turn Any Figma Design Into Code with Claude (tutorial), by Ryan Hayward on YouTube. 12 min 10 s.
- Video length
- 12 min 10 s
- Time to do it
- 25 minutes
- Difficulty
- Medium
- Steps
- 8
What you need
Steps
Install Node.js, open a terminal and create an empty folder for the project. Move into that folder, since Claude Code and the local dev server both run from there.
Install Claude Code with npm i -g @anthropic-ai/claude-code, then start it inside the project folder and sign in with your Anthropic account.
In Figma, open your design, go to Settings then Security, and generate a personal access token with read access to the file. Copy it somewhere safe.
Add the Figma MCP server to Claude with the claude mcp add command, pasting the token when prompted, then confirm the server shows as connected.
Select the frame you want built, right-click it and choose Copy link to selection, then paste that link into the Claude prompt and name the framework you want.
Let Claude read the file through MCP, then review the components, styles and assets it writes before running the dev server to preview the page.
Ask Claude for specific fixes when the layout drifts, such as spacing, font sizes or flex direction, and paste the frame link again if it loses context.
Publish by running npm i -g vercel, then vercel --prod in the project folder, and follow the prompts to get a live URL.
Tips and common mistakes
Start with one small frame or component, not a whole page, so the generated code stays easy to check.
Treat your Figma token like a password and revoke it when you finish the project.
Name layers clearly and use auto layout in Figma, because tidy names give Claude a better structure to copy.
Read the generated code before deploying, as AI output often leaves unused styles or placeholder text.
Questions
Do I need to know how to code?
Not much, but you should be comfortable running commands in a terminal and reading basic error messages. Knowing HTML and CSS helps you spot when the output does not match the design.
Does this work with any Figma file?
It works with files you can open and a token that has read access to them. Very large files with many frames take longer and often work better split into separate frames.
What is the Figma MCP server?
It is a small connector that lets Claude request details from your Figma file, such as layout, colours and text. You add it once, then Claude can read any frame link you give it.
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.
