This guide walks you through connecting Claude to your Figma files using the Console MCP. Instead of uploading screenshots and manually typing out your color values, Claude can read your actual designs, pull your real tokens (colors, spacing, typography), and even create things inside Figma.

You only need to do this setup once. After that, the connection works automatically every time you open Claude Code.

💡 No coding experience needed. Every step is spelled out. If something looks scary, just read slowly, it's simpler than it looks.

Time needed: About 15 minutes.

Before you start

You need three things:

1. A Claude Pro subscription ($20/month or higher)
2. A Figma account (any plan works, including free)
3. A Mac or PC

You do NOT need any coding experience. Every step below is copy-paste.

Step 1: Install Node.js

Node.js is a program that runs quietly in the background on your computer. You will never open it or interact with it directly. It's just something that Claude Code and the Figma connection need in order to work. Think of it like how your phone needs iOS to run apps. Node.js is the invisible layer underneath.

1. Go to nodejs.org in your browser
2. You'll see two big green download buttons. Click the one that says LTS (that stands for "Long Term Support," just meaning "the stable, reliable one")
3. A file will download. Open it.
4. Click through the installer. You don't need to change any of the default settings. Just keep clicking Continue and Agree until it says it's done.
5. That's it. You don't need to open Node.js or do anything else with it. It just lives on your computer now.

To double check it installed correctly: