Claude Code Setup Guide

Feb 25, 2026 · 4 steps

Everything you need to install Claude Code, connect Figma, and start building as a designer. Every command. Every prompt. Step by step.

Part 1 - Setup

  1. 1

    Step 1

    Install your environment

    You need a code editor to store your files and run AI models. The three most popular options are:

    • VS Code - Free, by Microsoft
    • Cursor - AI-native editor (what we’re using in the video)
    • Antigravity - Newer option, gaining traction

    I use Cursor. Download it here: cursor.com

  2. 2

    Step 2

    Choose local or GitHub

    Once inside Cursor, you have two options:

    • Connect to GitHub - Your code lives on the cloud, accessible anywhere
    • Build locally first - Only visible to you. Push to GitHub when it's ready

    I recommend building locally, then pushing to GitHub once your project is finished.

  3. 3

    Step 3

    Install Claude Code

    Go to the Claude Code website and select a plan:

    👉 claude.ai/code

    • Basic plan - Good to try it out
    • Max plan - Run multiple agents at the same time, no credit limits. Best for building full apps

    Once subscribed:

    1. In Cursor, click the Extensions button
    2. Search for Claude Code
    3. Install it
    4. Connect your Anthropic account
    5. Open Claude Code from the command bar
  4. 4

    Step 4

    Connect Figma

    Run this command inside Claude Code:

    Terminal
    claude plugin install figma@claude-plugins-official

    Then authenticate:

    1. Type /mcp inside Claude Code
    2. Select Figma
    3. Click Authenticate
    4. Allow access in the browser window that opens
    5. You should see: Authentication successful. Connected to Figma

    You're set up. Claude Code can now read your Figma files.

    If it’s not working: Try closing Claude Code completely and reopening it. Ask Claude Code to fix the issues if needed.

Part 2 - Use cases

Use case 1: Design system → code

Take your entire design system from Figma and turn it into code variables in one prompt.

Step 1: In Figma, right-click your Design System page → Copy link to page

Step 2: In Claude Code, paste the link with this prompt:

Prompt
Read this Figma design system page. Extract all design tokens — colors, typography, shadows, border radius, spacing — and output them as CSS variables organized by category.

Step 3: Once the tokens are extracted, generate components:

Prompt
Now generate a button component using these tokens, matching the Button frame in the design system.

Claude builds components using your actual design system values, not generic defaults.

Use case 2: Rapid prototyping from inspiration

Take a design you like, describe your app, and get a working prototype in minutes.

Step 1: Find a design inspiration (Behance, Dribbble, etc.) and take a screenshot of the screens that define the visual identity.

Step 2: In Claude Code, drop the screenshot and use this prompt:

Prompt
I'm building a [describe your app] with [key features]. Use the attached screenshot as visual inspiration — match the layout style, color approach, spacing, and overall feel. Generate a single HTML file with CSS.

Step 3: Iterate until it's right:

Prompt
Make the sidebar darker, add a gradient accent on the header, and increase the card border radius.

Step 4: Push to Figma. Open the HTML file in your browser, then use the html.to.design Figma plugin to convert it into editable Figma layers.

Use case 3: Figma → working code

Go from a finished Figma design to a fully coded page.

Step 1: In Figma, select the frame you want to build → Right-click → Copy link to selection

Step 2: In Claude Code, paste the link with this prompt:

Prompt
Build this page from my Figma design. Use HTML and CSS. Match the design exactly — colors, spacing, typography, layout.

Step 3: Refine with follow-up prompts:

Prompt
Reduce the gap between the cards to 16px and make the heading semi-bold.

Claude reads the full frame through the MCP (layer hierarchy, colors, typography, spacing, auto-layout) and generates a matching page.

Part 3 - Where not to use it

Claude Code is incredible for prototyping, pulling design systems into code, and going from Figma to a working product in minutes.

Where it falls short:

  • User authentication - Login systems, sessions, security
  • Databases - Complex data structures, migrations
  • Payment systems - Stripe, billing logic, webhooks

These need to be secure. For now, you need a real developer behind that. Use Claude Code for the interface and the prototype. Bring in a developer when it's time to scale.

Quick reference - All commands

ActionCommand
Install Figma pluginclaude plugin install figma@claude-plugins-official
Check MCP connections/mcp
Authenticate Figma/mcp → Select Figma → Authenticate

Quick reference - All prompts

Use casePrompt
Extract design tokensRead this Figma design system page. Extract all design tokens — colors, typography, shadows, border radius, spacing — and output them as CSS variables organized by category.
Generate component from tokensNow generate a button component using these tokens, matching the Button frame in the design system.
Rapid prototype from inspirationI'm building a [your app] with [features]. Use the attached screenshot as visual inspiration — match the layout style, color approach, spacing, and overall feel. Generate a single HTML file with CSS.
Figma frame to codeBuild this page from my Figma design. Use HTML and CSS. Match the design exactly — colors, spacing, typography, layout.
Iterate on designReduce the gap between the cards to 16px and make the heading semi-bold.