Figma + Claude Code + React: design system with your own hands - without paid courses

## What will you get in the end

After this guide you will have:

• Next.js application with components from your design system
• Figma is connected to Claude via MCP – it reads tokens directly
• Claude can draw in Figme for you: create components, add options, write documentation
• Sandbox for assembling prototypes from finished components
• CLAUDE.md file with project rules and conventions – Claude reads it at the beginning of each session
• Deployment to the server or Vercel

## What do you need

Tools:

• *Claude Pro ($20/month) – includes Claude Code, but tokens are paid separately upon use. For active work, it is more convenient Max ($ 100 / month) with tokens included.
• Figma Pro ($20/month) for MCP server
• Node.js 20+ – install from nodejs.org
• Git - install from git-scm.com

Figma MCP works on any plan, but with limitations: the starting plan gives only 6 tool calls per month – this is enough to try, but not for regular work. For normal operation, you need a Dev or Full seat on a paid plan.

## Part 1. Environment installation

### Step 1. Install Claude Code

Open the terminal and enter:

npm install -g @anthropic-ai/claude-code

Check what's set up:

claude --version

It should be a version. If access rights error, add sudo before the command.

After that, run claude in any folder and log in through the browser. Claude will open the login page – sign in to your Anthropic account.

### Step 2. Create a Next.js Project

You can do it with your hands or ask for Claude Code:

Create Next.js with TypeScript, Tailwind CSS and App Router.
Name the folder my-design-system.

If you do it yourself:

npx create-next-app@latest my-design-system --typescript --tailwind --app
cd my-design-system

The team will create a project with TypeScript, Tailwind CSS and App Router. This is the standard base for everything we do next.

Make sure everything works:

npm run dev

Open http://localhost:3000 - the Next.js start page should open.

### Step 3. Initialize Git

Claude Code can do this as well. Prompt:

Initialize Git in the project, make the first commit
And put it on GitHub into a new repository called my-design-system.

Or hands:

git init
git add .
git commit -m "init"

Create a repository on GitHub: go to github.com → New repository → copy the URL.

git remote add origin https://github.com/ваш-юзернейм/my-design-system.git
git push -u origin main

Git is for deploitation and for rollback if something goes wrong.

## Part 2. Connect Figma to Claude

### Step 4. Connect Figma MCP to Claude Code

The official method is to install the Figma plugin with one command in the terminal:

claude plugin install figma@claude-plugins-official

The plugin will install the MCP server and add Agent Skills – ready instructions for Claude to work with the design system. After installation, start a new Claude Code session and type /mcp – figma should appear in the list of servers.

Click Authenticate and log in through the browser – Figma will ask for permission. There is no need to manually copy the token.

### Step 5. An alternative method is manual adjustment

If the plugin is not installed, you can add MCP manually:

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

The --scope user flag makes the server available on all projects, not just the current one. Then re-enter /mcp in Claude Code and log in.

### Step 6. What does Claude do with Figma MCP

Once connected, Claude has access to several tools:

An important difference from the screenshot: Claude gets real values, not pixels. get_metadata on the button will return paddingLeft: 12, rather than “looks like 12 pixels.”.

## Part 3. Transfer the design system from Figma to React

### Step 7. Launch Claude Code in the Project

cd my-design-system
claude

Now you're in Claude Code. It already sees the project files and the connected Figma MCP.

### Step 8. Create CLAUDE.md – Rules First, Code Next

CLAUDE.md is a file that Claude reads at the beginning of each session. It describes the stack, naming conventions, folder structure, and limitations. One file replaces the explanations in each prompt.

It’s important to create it before you start generating components, otherwise the first components are made without your rules.

You can ask Claude to create it for you:

Create a CLAUDE.md file at the root of the project.
Stack: Next.js App Router, TypeScript strict mode, Tailwind CSS.
Rules: only tokens from tailwind.config.ts, components from src/components/,
PascalCase for components, kebab case for files.
Add a section to the aesthetics - I'll fill it out myself.

Or create a manual template:

# Project: [title]

##Stack
Next.js App Router, TypeScript strict mode
- Tailwind CSS - only through our tailwind tokens. config.ts
- Components from src/components/

#
- No arbitrary colors in the code - only tokens
All components are functional, with TypeScript interfaces
Name: PascalCase for components, kebab case for files
Do not create a new component if a similar one already exists in src/components.

## Structure
- src/components/ - reused components
- src/app/ - pages and routes
src/styles/ – tokens and global styles

#Aesthetics
[Describe the visual language of your project: the tone from which you are leaving.]
what you're looking at]

## Design system at Figma
[link to your Figma file]

The more detailed CLAUDE.md is, the more Claude follows your rules without further explanation in each prompt.

### Step 9. Extract tokens from Figma

Open your design file in Figma. Select any frame or component, right-click → Copy link to selection – this will give a link to a specific node, not the entire file. Claude works more precisely with such references.

Give Claude the first promp:

Open my Figma file at [link to frame or component]

Remove all variables and tokens from the design system.
Create them on the basis of:
1. tailwind.config.ts with custom colors, fonts and indentations
2. src/styles/tokens.css file with CSS variables

Name colors semantically: primary, secondary, neutral, accent.
Not by hex.

Claude will choose the right tools for reading Figma. You do not need to tell him which method to use.

### Step 10. Move components

For each component, give a separate prompt. Select a component in Figma, copy the link to it. For example, for a button:

Open the Button component at [link to the Button component in Figma]

Create the React component src/components/Button.tsx:
- Accurate matching of styles from Figma
- Tailwind CSS, only our tailwind tokens. config.ts
TypeScript with typed props
All versions of Figma: primary, secondary, ghost
- Conditions hover and focus from design
Availability attributes: aria-label, correct button tag

Repeat for each component: Card, Input, Badge, Typography, Icon and so on.

Tip: let’s have one component per prompt, and not all at once – it’s easier to check each result and catch discrepancies with the design.

## Part 4. Build a prototype in code

### Step 11. Create a sandbox of components

A sandbox is a page where all your components are put together. Convenient for inspection and demonstration.

Create src/app/sandbox/page.tsx.

Show all components from src/components/:
Each component in a separate section with a header
- All options and conditions
Use realistic content, not Lorem ipsum

The page should look like a component documentation.

### Step 12. Build a prototype landing or interface

Now you can build real screens from your components:

Put together a landing page for [product description].

Use only src/components/ components.
Structure: Hero, Features (3 cards), CTA.
Real text, not stubs.
Adaptive layout: mobile-first.

Claude will assemble the screen from your components – not invent new styles, but uses what is already in the system.

## Part 5 Claude draws in Figma for you

Figma MCP supports writing in canvas – Claude can not only read your file, but also draw in it. Now it's beta, free, but Figma plans to make it payable. Use it while you can.

Write-to-canvas requires Figma Skills from the plugin – they are already installed with it in step 4.

### Add a component version

Select the desired component in Figma, copy the link to it:

Here's the Button component: [link]

Add the Disabled option, visually the same as Primary.
but with reduced opacity (40%) and not-allowed cursor.

### Write documentation directly in Figma

Go through all the components in our Figma library: [link to the file]

For each component, add an annotation:
When to use this component
- When not to use
- A brief description of each option

Write briefly and specifically, without water.

### Audit of discrepancies between Figma and code

Look at the components in Figma: [link]
Compare it to the src/components.

Make a table:
1. It's in Figma, not in the code.
2. It's in code, not in Figma.
3. Components where something visually diverges

## Part 6. Lock it to the server

### Option A. Vercel - fast and free

The easiest way. Go to vercel.com, log in via GitHub, click Import, select your repository. Vercel will determine Next.js and get it in a few minutes.

Each push in main → is automatically new.

### Option B. Your VPS

If you need a dedicated server - buy VPS on Timeweb, Selectel or DigitalOcean (from 300 rubles / month). Claude Code is one of the best examples of what an agent does himself. Prompt:

My VPS: IP [address], root user, password [password].
Next.js application:
- Install Node.js, nginx, PM2
- Close the repository [link to GitHub]
Configure Nginx as reverse proxy to port 3000
- Run through PM2 with autorun
- Set up SSL via Let's Encrypt for the domain [domain]

Claude will complete all steps through the terminal. In 10-15 minutes, the application will be available on your HTTPS domain.

## Part 7. Update the design system through prompts

### Update the token in the entire project

The designer changed the primary color to Figma. It used to be a manual bypass of all components. Now:

In our Figma file, the primary color has been updated.
Read the current value from Figma and update it
in tailwind.config.ts and src/styles/tokens.css.
Check to see if the components have hard-cut old values.

### Change the scale of typography

Increase all font sizes one step up the scale.
Now: base 14px, lg 16px, xl 20px, 2xl 24px.
Need: base 16px, lg 18px, xl 22px, 2xl 28px.
Update tailwind.config.ts and all places where fixed size is used.

### Weekly report on changes

Check the git log for the last 7 days.
Make a report:
- What components have been added
- What tokens have changed
Are there components without TypeScript types?
Are there components without aria attributes

## Typical problems and how to solve them

Claude generates arbitrary colors instead of tokens. Add an explicit ban to CLAUDE.md: Never use arbitrary hex values. Only tokens from tailwind.config.ts.” The stricter the rule in CLAUDE.md, the more accurately it is observed.

**Figma MCP is not connected. ** Enter /mcp in Claude Code and see the status of the figma server. If it says “not authorized” – re-authorize through Authenticate. If the server does not appear at all, reinstall the plugin: claude plugin install figma@claude-plugins-official.

The component in the code is not the same as Figma. Use get_screenshot for visual comparison: ask Claude to get a screenshot of a component from Figma and compare it to what is rendered in the browser. He'll find his differences.

Claude creates new components instead of using existing ones. In the prompt, explicitly state: “Use only src/components/ components. Don't create new ones”. In CLAUDE.md, add this usually.

## Bottom line: what you have now

CLAUDE.md is what makes the project predictable. Claude doesn’t guess your stack and ask about conventions — it just reads the file and follows it. The more detailed the rules are described, the less discrepancies there are as a result.

## What to do next

If you want to go deeper:

• DESIGN.md – How to Pack Visual Style into an AI File
• MCP – How to connect other tools to Claude Code
• Claude Code – A Complete Guide to Agent Development