From Design to Code in Minutes: Using Figma MCP with Claude Code

The old way of turning a Figma design into a real product was painful. You'd hand off to engineers, watch details get lost in translation, wait weeks, and end up with something that looked "close enough." This tutorial shows you the new way — where Claude Code reads your actual Figma file and builds it directly, pixel by pixel.

What You'll Need

• A Figma account with a design file ready
• Claude Code installed (requires Node.js 18+)
• A basic Next.js + Tailwind project (or we'll set one up)
• 30 minutes

Step 1: Get Your Figma Personal Access Token

Your Figma token is what lets Claude Code authenticate with Figma's API and read your design files.

1. Go to figma.com and log in
2. Click your profile picture in the top-left corner
3. Select Settings
4. Navigate to the Security tab
5. Scroll down to Personal access tokens
6. Click Generate new token
7. Give it a name (e.g. claude-code) and set an expiration if desired
8. Copy the token immediately — you won't be able to see it again

Your token will look something like: figd_xxxxxxxxxxxxxxxxxxxxxxxxxx