Set up

Module overview

You'll install the required tools, connect Claude to Figma, design your first widget, and turn it into a working application running on Localhost.

1. Get started with Claude

Install Claude Code, Install Node.js & First Claude conversation.

2. Connect Claude Code to Figma

Install desktop bridge plugin, connect Claude to Figma & Claude enters your Figma.

3. Design a sample widget

Your first design in Figma with Claude via MCP.

4. Localhost

Claude writes the code & your design is live in Localhost.

Before we begin building, it's important to understand the Claude ecosystem. In this lesson, we'll explore the available Claude plans, the different ways you can access Claude, and the three modes available within the desktop application. By the end of this lesson, you'll know which plan is right for you and have Claude installed and ready to use throughout the course.

Claude plans

Claude is available in multiple plans, ranging from Free to Pro and Max. We'll review the differences between each plan and discuss which option is best suited for this course.

Download Claude

Claude can be accessed through the web, mobile apps, desktop application, and Claude Code. For this course, we'll primarily be using the desktop app together with Claude Code.

The three modes of Claude Desktop

• Chat — general conversations, research, and everyday AI assistance.
• Cowork — a collaborative workspace that can work with your local files and projects.
• Code — a terminal-based coding environment designed for software development and automation workflows.

Throughout this course, we'll primarily focus on Claude Code, as it serves as the foundation of our design-to-code workflow.

Mac

Open Terminal and run:

curl -fsSL https://claude.ai/install.sh | bash

Once the installation is complete, open a new Terminal window and launch Claude:

claude

You'll be prompted to sign in using either an Anthropic Max plan or an Anthropic API key.

Windows

Modern versions of Windows already include curl. Verify it in PowerShell or Command Prompt:

curl --version

If you see version information, you're ready to proceed.

Note: in PowerShell, curl is an alias for Invoke-WebRequest, not the actual curl executable. To avoid issues with command flags, use curl.exe explicitly.

curl.exe -fsSL https://claude.ai/install.sh -o install.sh

Then execute the installation script following the prompts. Once installed, open a new terminal and launch Claude:

claude

You'll be prompted to sign in using either an Anthropic Max plan or an Anthropic API key.

Claude Code relies on Node.js and npx to install and run various tools throughout this course. In this lesson, we'll install Node.js using NVM (Node Version Manager), which makes it easy to manage and update Node.js versions in the future.

Install NVM

Open Terminal and run:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.2/install.sh | bash

Once the installation is complete, close and reopen your Terminal.

Install Node.js (LTS)

nvm install --lts

This will install Node.js, npm (Node Package Manager) and npx (Node Package Execute).

Verify installation

node --version
npx --version

In this lesson, you'll connect Claude Code directly to Figma using the Model Context Protocol (MCP). Once connected, Claude can read your designs, create new frames, modify existing files, and collaborate inside Figma just like another designer.

Step 1 — Launch & sign in to Claude Code

claude

When prompted, select Claude Code mode and choose your authentication method. Recommended: a Claude account on a Pro or Max subscription — it's the simplest setup and the best overall experience. Alternatives: Anthropic Console (API key), Amazon Bedrock, Microsoft Foundry, Google Vertex AI.

Step 2 — Add the official Figma MCP server

claude mcp add figma -s user --transport http https://mcp.figma.com/mcp

The first time you run this, your browser opens and asks you to authorize Claude to access your Figma account.

Step 3 — Create a Figma personal access token

Open Figma → Settings → Security → Personal Access Tokens and create a token with these permissions:

• File Content → Read
• Variables → Read
• Comments → Read & Write

Copy the generated token — it begins with figd_. Keep it secure; you'll use it in the next step.

Step 4 — Add the Figma Console MCP server

Replace <YOUR_FIGMA_TOKEN> with the token you just generated.

claude mcp add-json figma-console \
'{"command":"npx","args":["-y","figma-console-mcp@latest"],"env":{"FIGMA_ACCESS_TOKEN":"<YOUR_FIGMA_TOKEN>","ENABLE_MCP_APPS":"true"}}' \
-s user

Step 5 — Install the Figma Desktop Bridge plugin

Restart Claude Code, then open the Figma desktop app (not the browser version) and go to Plugins → Development → Import Plugin from Manifest. Select:

~/.figma-console-mcp/plugin/manifest.json

Import it, then launch it from Plugins → Development → Figma Desktop Bridge. This is a one-time setup — the plugin updates automatically whenever the MCP server updates.

Step 6 — Verify the connection

claude mcp list

You should see both figma and figma-console.

Verify the connection

Now that everything is configured, let's make sure Claude can successfully communicate with Figma. Open the Figma desktop app with any file you'd like to work with, then launch Claude Code:

claude

Make sure the Figma Desktop Bridge plugin is active. If it isn't running, launch it from Plugins → Development → Figma Desktop Bridge.

Test the connection

Copy the Figma file URL, paste it into Claude Code, and try a simple prompt:

Create me a revenue line chart widget with gradient fill.

Other things you can ask Claude

• Read the current Figma selection
• Inspect variables
• Create a new component
• Update an existing design
• Generate responsive layouts

In this lesson, you'll use Claude Code to transform a Figma design into a working local application. By the end of this exercise, you'll have your first interactive UI running in your browser.

Set up

Open the Figma desktop app with the design you'd like to convert into code, launch Claude Code, and make sure the Desktop Bridge plugin is active and connected.

claude

Generate the application

Copy the Figma file URL, paste it into Claude Code, then use this prompt:

Build this Figma as a working local demo with interactive hover tooltip
(month + value). Single HTML file, opened in my local server when ready.

Claude will analyze the design, generate the code, and prepare the application for preview. Approve any required permissions when prompted — Claude then starts the local server and opens the application in your browser.