Turn a Figma Design into a React Component

Use Figma MCP and Claude Code to generate a React component from a design.

Introduction

30 Second Summary

Designers create beautiful mockups, and developers rebuild them from scratch in code. That handoff is one of the slowest, most error-prone parts of building any product.

In this project, you will design a product card in Figma, connect Claude Code directly to your Figma file using the Model Context Protocol (MCP), and let AI generate a pixel-accurate React component from your design data.

What You'll Build

You will build a complete design-to-code pipeline that reads a Figma design through MCP and generates a running React component in the browser.

By the end of this project, you'll have:

  • A Figma MCP server connection configured in Claude Code, giving your AI direct access to design data.
  • A styled React component generated from a Figma product card design, running live in the browser.
  • Experience iterating on AI-generated code using follow-up prompts with real design context from Figma.
  • Secret Mission: push your finished React UI back into Figma as an editable frame, completing the two-way design-to-code loop.

Are there any prerequisites?

You need a Figma account with a Dev or Full seat (Professional plan or higher at $12/month per editor), an Anthropic account with Claude Code access, and Node.js 20.19+ installed on your machine.

Basic familiarity with the terminal, React, and Figma will help you move through the project smoothly.

Set Up the Figma MCP Connection in Claude Code

Figma and your code editor live in two separate worlds. The Model Context Protocol bridges this gap by letting Claude Code pull design data directly from your Figma files.

In this step, you'll install the Figma MCP plugin in Claude Code and authorize the connection. Once connected, Claude Code can inspect your designs and extract details like colors, spacing, and typography.

In this step, get ready to:
  • Install the Figma MCP plugin in Claude Code.
  • Authenticate Claude Code with your Figma account.
  • Verify the connection by reading a Figma file.
Install the Figma plugin for Claude Code

The Figma plugin for Claude Code configures a connection to Figma's remote MCP server. It also adds Agent Skills that help Claude Code handle common Figma workflows like reading design tokens and inspecting layers.

What is MCP?

MCP stands for Model Context Protocol. It is an open standard that lets AI tools communicate with external services through a structured interface.

In this project, the MCP server lets Claude Code read your Figma designs. Claude Code can pull layer names, colors, spacing, and typography without you copying anything manually.

  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type Terminal and press Enter to open it.
  • Install the Figma plugin by running this command:
claude plugin install figma@claude-plugins-official

What does this command install?

This installs two things into your Claude Code setup.

  • The remote Figma MCP server configuration, which tells Claude Code where to connect when it needs to read your designs.
  • Agent Skills for common Figma workflows like reading design tokens and inspecting layer properties.
  • Confirm the plugin installed successfully by running:
claude mcp list

You should see a figma entry in the output.

Don't see a Figma server entry?

  • Make sure you typed the plugin name exactly as shown: figma@claude-plugins-official.
  • Check that Claude Code is up to date by running claude update and trying the install again.
  • Help me troubleshoot my Figma MCP plugin installation in Claude Code.
Authenticate with Figma

Claude Code needs permission to access your Figma files. You'll authorize the connection through an OAuth flow that opens in your browser.

What is OAuth?

OAuth is a standard way for one app to request limited access to another app's data without sharing your password. When you authorize Claude Code, Figma gives it a token that grants access to your files.

  • Launch Claude Code by running this command in your terminal:
claude

Claude Code opens as an interactive session in your terminal. You'll type commands and prompts directly into this session from now on.

  • Type the following slash command to manage your MCP servers:
/mcp
  • Select figma from the server list.
  • Select Authenticate.

Your default browser will open a Figma authorization page. This is the OAuth flow requesting permission for Claude Code to read your Figma files.

  • Click Allow Access in your browser to grant Claude Code access to your Figma files.
  • Return to your terminal after authorizing.

You should see the message Authentication successful. Connected to figma in your terminal.

Browser didn't open?

  • Make sure your default browser is set and not blocked by a firewall or VPN.
  • Check that your Figma account has a Dev or Full seat on a Professional plan or higher. Starter, View, and Collab seats are limited to 6 MCP tool calls per month.
  • Help me troubleshoot my Figma OAuth authentication in Claude Code.
Verify the connection works

The best way to confirm everything is working is to ask Claude Code to read a real Figma file. Even an empty file will work for this test.

  • Open any existing Figma file in your browser.
  • Copy the URL from your browser's address bar.

No Figma files yet?

Create a quick blank design file in Figma. Even an empty file has enough structure for Claude Code to read and describe.

  • Back in your Claude Code session, paste the following prompt with your Figma URL:
Describe the structure of this Figma file: [[FIGMA_LINK="your Figma file URL"]]

What should I see?

Claude Code uses the MCP server to fetch your file's structure. It should return a description of the file's pages along with any frames and components on each page.

If the file is empty, Claude Code will describe a single empty page. That still confirms the connection is working.

Seeing an error?

  • A 403 error means your Figma account does not have permission to access that file. Make sure you own the file or have edit access.
  • If Claude Code says it cannot reach the MCP server, type /mcp and re-authenticate with the Figma server.
  • Confirm your Figma account has a Dev or Full seat on a Professional plan or higher.
  • Help me fix an error when reading my Figma file via MCP in Claude Code.

Your Claude Code is now connected to Figma and ready to read your designs. Next up, you'll design a product card in Figma that Claude Code will translate into a real React component.

Design a Product Card in Figma

Your Figma MCP connection is live. Claude Code can now reach into your Figma files and pull out design data like colors, spacing, typography, and layer structure.

The quality of that data depends on how well you structure your design. In this step, you'll build a product card with clean layer names and Auto Layout so the MCP server can extract everything it needs to generate a React component.

In this step, get ready to:
  • Create a ProductCard frame with Auto Layout in Figma.
  • Add styled content layers for the image, text, and button.
  • Copy the frame link to use in Claude Code.
Create the card frame

Every good component starts with a well-structured container. You'll create a frame with specific dimensions, Auto Layout, and styling that maps directly to CSS properties like border-radius and box-shadow.

  • Open figma.com in your browser and sign in to your account.
  • Click + Design file on the home screen to create a new file.
  • Press F on your keyboard to activate the Frame tool.
  • Click and drag anywhere on the canvas to draw a frame.
  • In the right Design panel, set W (width) to 360.
  • Double-click the frame name at the top of the Layers panel on the left and rename it to ProductCard.
  • With the frame selected, press Shift+A to apply Auto Layout.
  • In the Auto Layout section of the right panel, set the direction to Vertical.
  • Set the gap between items to 16.
  • Set all four padding values to 20.
  • In the Fill section of the right panel, click the color swatch and set the color to white (#FFFFFF).
  • Set the corner radius to 12 in the right panel.
  • Click the + icon next to Effects in the right panel.
  • Select Drop shadow from the dropdown.
  • Click the sun icon to the left of the shadow entry to open its settings. Set X to 0, Y to 2, Blur to 8, and the shadow color to black (#000000) at 10% opacity.

You should see a white, rounded rectangle on your canvas with ProductCard in the Layers panel.

What is Auto Layout?

Auto Layout is Figma's system for building responsive frames that resize automatically based on their content. When the MCP server reads a frame with Auto Layout, it translates the direction, gap, and padding into CSS flexbox properties.

This is why your generated React code will use display: flex and gap instead of fixed pixel positions.

Frame not resizing with its content?

Make sure you applied Auto Layout with Shift+A after creating the frame. If the height is still fixed, click the height value in the right panel and switch it to Hug contents.

Help me fix my Figma Auto Layout frame so it resizes automatically.

Add the card content

Now you'll fill the card with five layers. Each layer needs a semantic name that describes its purpose. The MCP server reads these names to understand what each element represents, so ProductImage produces much better code than Rectangle 1.

Start with the image placeholder.

  • Press R to select the Rectangle tool and draw a rectangle inside the ProductCard frame.
  • In the right panel, set W to 360 and H to 200.
  • Set the fill color to a light gray (#E0E0E0).
  • Set the corner radius to 8.
  • In the Layers panel, double-click the layer name and rename it to ProductImage.

Next, add the three text layers for the product details.

  • Press T to select the Text tool and click inside the frame, below the image rectangle.
  • Type Wireless Headphones.
  • In the right Text section, set the font size to 18 and weight to SemiBold.
  • Set the text color to dark gray (#333333).
  • Rename the layer to ProductName.
  • Press T again and click below ProductName.
  • Type $79.99.
  • Set the font size to 24 and weight to Bold.
  • Set the text color to dark blue (#1A365D).
  • Rename the layer to Price.
  • Press T and click below Price.
  • Type Premium noise-cancelling headphones with 30-hour battery life..
  • Set the font size to 14 and weight to Regular.
  • Set the text color to medium gray (#666666).
  • Rename the layer to Description.

The last element is the Add to Cart button.

  • Press T and click inside the frame, below the description text.
  • Type Add to Cart.
  • Select the text layer you just created and press Shift+A to wrap it in an Auto Layout frame.
  • Set the Auto Layout frame's fill color to blue (#3B82F6).
  • Set the corner radius to 8.
  • In the Auto Layout section, set the frame's height to a fixed value of 44.
  • Set the horizontal resizing to Fill container so the button stretches to the full card width.
  • Set the alignment to center both horizontally and vertically so the text sits in the middle of the button.
  • Select the Add to Cart text inside the button.
  • Set the text color to white (#FFFFFF), font size to 16, and weight to SemiBold.
  • Select the outer Auto Layout frame and rename it to AddToCartButton in the Layers panel.

Your card should now show all five layers stacked vertically: a gray image placeholder, the product name, price, description, and a blue button.

Why do layer names matter for MCP?

The Figma MCP server reads your layer names to figure out what each element represents. A layer called ProductName tells Claude Code this is a heading for the product. A layer called Text 3 tells it nothing.

Clean, descriptive names lead to clean, descriptive variable and class names in the generated code.

Layers landing outside the card?

If new elements appear next to the card instead of inside it, make sure you click inside the ProductCard frame before drawing or typing. You can also drag a stray layer into the frame using the Layers panel on the left.

Help me fix layers that ended up outside my Figma Auto Layout frame.

Review your layers and copy the frame link

The remote Figma MCP server is link-based. Claude Code needs a direct URL to your frame to fetch its design data. Before you leave Figma, you'll review your layer names and grab that link.

  • Open the Layers panel on the left and expand the ProductCard frame.
  • Confirm that every layer has a clean, descriptive name: ProductImage, ProductName, Price, Description, and AddToCartButton.
  • Rename any layer that still has a default name like Rectangle 1 or Group 5.
  • Click on the ProductCard frame to select it.
  • Right-click the frame and choose Copy link to selection.
  • Paste the link somewhere safe (a text file, a note, or your clipboard history). You will use this link in the next step.

Why do I need the frame link?

The remote Figma MCP server is link-based. When you paste a Figma URL into Claude Code, the MCP server uses that link to fetch the exact frame's design data. Without it, Claude Code has no way to know which part of your file to read.

Don't see Copy link to selection?

Make sure you selected the ProductCard frame itself, not a child layer inside it. Click the frame name in the Layers panel to select the frame directly, then right-click it on the canvas.

Help me copy a link to my Figma frame.

Your product card design is ready and the frame link is saved. Next, you'll feed this design into Claude Code and watch it generate a React component that matches your Figma mock.

Generate the React Component with Claude Code

Your Figma design is locked in with cleanly named layers and a frame link ready to go. Now it's time to put that design to work.

In this step, you'll scaffold a React project, then feed your Figma link into Claude Code. Claude Code will use the MCP server to read your design data and generate a matching React component.

In this step, get ready to:
  • Scaffold a React project using Vite.
  • Prompt Claude Code to generate a React component from your Figma design.
  • Run the component in the browser and compare it with your design.
Scaffold a React project

Before Claude Code can generate your component, you need a React project for the code to live in. You'll use Vite to scaffold a starter project in seconds.

  • Open a regular terminal window (not Claude Code). Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type Terminal (macOS) or Command Prompt (Windows) and press Enter to open it.
  • Move to your Desktop and scaffold the project by running these commands:
cd ~/Desktop
npm create vite@latest figma-product-card -- --template react

What does this command do?

npm create vite@latest downloads and runs Vite's project scaffolding tool. The --template react flag tells it to set up a React project, so you skip any interactive prompts.

figma-product-card is the name of the folder Vite creates on your Desktop.

You should see Vite print a success message listing the scaffolded files.

Seeing a 'command not found' error?

Make sure Node.js 20.19 or higher is installed. Run node --version to check.

Help me fix a 'command not found' error when running npm create vite

  • Move into the new project folder and install its dependencies by running these commands:
cd figma-product-card
npm install

You should see npm download the project's packages. This takes a few seconds.

npm install failing?

Check that you ran cd figma-product-card first. If you are not inside the project folder, npm install will fail because there is no package.json to read.

Help me fix npm install inside my Vite project

  • Start Claude Code inside the project by running:
claude

Claude Code launches in the same terminal and shows its > prompt. It automatically indexes the files in figma-product-card/, so it knows the project structure.

Claude Code not starting?

If you see a 'command not found' error, Claude Code may not be installed. Install it by running:

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

Then try running claude again.

Prompt Claude Code with your Figma link

This is where MCP does the heavy lifting. You'll paste your Figma frame link into Claude Code along with a prompt describing what you want. Claude Code will call the Figma MCP server to read your design's layers, colors, spacing, and typography, then generate the component code.

  • At the Claude Code > prompt, paste the following (replacing the Figma link with your own):
Implement this Figma design as a React component: [[FIGMA_FRAME_URL="your copied Figma frame link"]]. Use CSS modules for styling. Place the component in src/components/ProductCard/. Keep it responsive.

What does this prompt do?

When Claude Code sees the Figma URL, it calls the MCP server's get_design_context tool to pull your design data. It receives the exact layer names, sizes, colors, fonts, padding, and shadow values you set in Figma.

The rest of the prompt tells Claude Code how to structure the output. You are asking for CSS Modules instead of Tailwind, and specifying the folder path so the files land in the right place.

Why CSS Modules instead of Tailwind?

The Figma MCP server defaults to React + Tailwind output. CSS Modules are a better fit here because the generated CSS properties (colors, spacing, shadows) map directly to the values in Figma. Comparing your code with your design is much easier when you can read named CSS classes rather than long utility strings.

CSS Modules also avoid adding Tailwind as an extra dependency to learn and configure.

  • Press Enter to send the prompt.

Claude Code will start working. You'll see it call the Figma MCP tool, then begin generating files.

What if Claude Code asks for permission?

Claude Code may ask permission to create new files or directories. This is normal. Accept the permissions so it can write the component files to your project.

  • Wait for Claude Code to finish generating. It will create two new files:
  • src/components/ProductCard/ProductCard.jsx for the React component.
  • src/components/ProductCard/ProductCard.module.css for the styles.
  • Confirm the files were created by running this in Claude Code:
List the files in src/components/ProductCard/

You should see both ProductCard.jsx and ProductCard.module.css listed.

Claude Code stuck on 'Loading tools'?

This usually means the MCP server connection dropped. Type /mcp to check the server status. If the Figma server shows as disconnected, re-authenticate by selecting it and completing the OAuth flow again.

Also check that your Figma account has a Dev or Full seat. Starter and free seats are limited to 6 MCP tool calls per month.

Help me fix a stuck Figma MCP connection in Claude Code

Review and run the output

The component files exist, but they are not connected to the app yet. The default App.jsx still shows the Vite starter page. You need to swap that out for your new ProductCard.

  • In Claude Code, ask it to update the app entry point by typing this prompt:
Update src/App.jsx to import and render the ProductCard component. Center it on the page with a light gray background.

What does this do?

This tells Claude Code to replace the default Vite starter content in App.jsx with an import and render of your ProductCard component. The centering and background color keep the card easy to view in the browser.

  • Accept any file-edit permissions Claude Code requests.

Now you need to start the dev server. Claude Code is occupying your current terminal, so you'll open a second one.

  • Open a new terminal window. Press Cmd+Space (macOS) or the Windows key (Windows) and search for Terminal or Command Prompt again.
  • Navigate to your project folder and start the dev server by running these commands:
cd ~/Desktop/figma-product-card
npm run dev

Vite starts the dev server and prints a local URL.

  • Open your browser and go to http://localhost:5173.

You should see your ProductCard component centered on a light gray page. It displays a gray placeholder image area at the top, the heading "Wireless Headphones", the price "$79.99", a short description, and a blue "Add to Cart" button.

  • Open your Figma file side by side with the browser window. Compare the two to confirm the component reflects your design.

Will it match perfectly?

The first generation from Claude Code is usually close but not pixel-perfect. Colors, font weights, and shadows may drift slightly from your Figma values. That's expected. The next step walks you through refining those differences.

Don't see the component in the browser?

If you see the default Vite + React starter page, Claude Code did not update App.jsx. Go back to Claude Code and resend the prompt asking it to update src/App.jsx.

If you see a blank white page, open your browser's DevTools console (Cmd+Option+J on macOS, Ctrl+Shift+J on Windows) and check for import errors. A common cause is a mismatched file path in the import statement.

Help me debug why my ProductCard is not showing in the browser

Since Claude Code generates the code, your output may not be identical to the reference below. Use the following tab to compare and make sure your component has the right structure.

✔️ Awesome, I've got everything!

Great. Double check you've saved all your files before moving on.

ⓧ I'd like to double check the full code

Here is the reference code for each file. If Claude Code generated something different, you can update your files to match.

import styles from './ProductCard.module.css';

function ProductCard() {
  const handleAddToCart = () => {
    console.log('Added to cart: Wireless Headphones');
  };

  return (
    <div className={styles.card}>
      <div className={styles.productImage} />
      <div className={styles.content}>
        <h2 className={styles.productName}>Wireless Headphones</h2>
        <p className={styles.price}>$79.99</p>
        <p className={styles.description}>
          Premium noise-cancelling headphones with 30-hour battery life.
        </p>
        <button className={styles.addToCartButton} onClick={handleAddToCart}>
          Add to Cart
        </button>
      </div>
    </div>
  );
}

export default ProductCard;
.card {
  width: 360px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.productImage {
  width: 100%;
  height: 200px;
  background: #e0e0e0;
  border-radius: 8px 8px 0 0;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.productName {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.price {
  font-size: 24px;
  font-weight: 700;
  color: #1a365d;
  margin: 0;
}

.description {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  margin: 0;
  line-height: 1.5;
}

.addToCartButton {
  width: 100%;
  height: 44px;
  background: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.addToCartButton:hover {
  background: #2563eb;
}
import ProductCard from './components/ProductCard/ProductCard';

function App() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh', background: '#f5f5f5' }}>
      <ProductCard />
    </div>
  );
}

export default App;
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Your design-to-code pipeline is live. A Figma design went in, and a running React component came out. Next up, you'll refine the output and add interactivity so the component feels production-ready.

Iterate and Refine the Component

Your ProductCard component is live in the browser, generated directly from your Figma design data. AI-generated code gets close on the first pass, but it rarely nails every design detail.

In this step, you'll put your Figma design and the live component side by side to spot differences. Then you'll use follow-up prompts in Claude Code to close those gaps and add interactive behavior.

In this step, get ready to:
  • Compare the browser output with your Figma design to spot visual differences.
  • Use follow-up prompts to have Claude Code refine the component styling.
  • Add a hover effect and click handler to the Add to Cart button.
Identify differences between your design and the browser

The first round of AI-generated code captures the overall structure, but small details often drift. Spacing, exact color values, font weights, and shadow intensities are the most common areas where output diverges from the original design.

  • Open your browser at http://localhost:5173 and place it side by side with your Figma file.
  • Compare these specific properties between your Figma design and the browser output:
  • Padding and gap values. Your design uses 20px padding and a 16px gap.
  • Font sizes and weights. ProductName should be 18px semibold. Price should be 24px bold. Description should be 14px regular.
  • Colors. Product name in dark gray, price in dark blue, description in medium gray.
  • Corner radius. 12px on the card, 8px on the image and button.
  • Drop shadow. The card should have a subtle elevation visible against the background.

Use Figma's Inspect panel

Select any layer in your ProductCard frame and open the Inspect panel on the right side of Figma. It shows exact pixel values, hex colors, and font properties you can compare directly against your browser's DevTools.

Make a mental note of any differences you spot. You'll feed these observations into Claude Code next.

Refine styling with follow-up prompts

The real power of the MCP connection is that Claude Code can re-read your Figma design data on every prompt. When you describe what needs fixing, Claude Code fetches the latest design context and adjusts the code to match.

  • Switch back to your Claude Code terminal.
  • Type a refinement prompt that describes the visual differences you spotted. Here is a starting point you can customize:
The button padding looks too tight and the shadow is missing. Refer back to the Figma design and fix the styling to match exactly.

What happens when you send this prompt?

Claude Code uses the Figma MCP server to re-read your design frame. It compares the current CSS values against the Figma layer properties and generates updated code for ProductCard.module.css.

You do not need to manually edit any files. Claude Code writes the changes directly.

  • Check your browser. The dev server hot-reloads, so changes appear automatically.
  • If you still see differences, send another follow-up prompt describing what remains off.

How many rounds of iteration is normal?

Two to three rounds is typical. Each round gets closer as Claude Code narrows in on the exact values from your Figma frame. Focus on the biggest differences first, then fine-tune smaller details.

Changes not appearing in the browser?

Make sure your dev server is still running in a separate terminal. If it stopped, restart it by running npm run dev inside the figma-product-card folder.

Check that Claude Code actually modified the files. Look for file paths in Claude Code's output to confirm it wrote to ProductCard.module.css.

Help me debug why my Figma MCP refinements are not showing in the browser.

Add hover and click interactivity

Your component looks right, but it does not behave like a real product card yet. A static button with no feedback feels lifeless. You'll ask Claude Code to add a hover effect and a click handler.

  • In Claude Code, type this prompt to add interactivity:
Add a hover effect to the Add to Cart button that darkens the background. Add a click handler that logs 'Added to cart: Wireless Headphones' to the console.

What does this prompt add?

  • A CSS :hover rule on .addToCartButton that changes the background to a darker shade on mouseover.
  • A handleAddToCart function in the React component that calls console.log when the button is clicked.

Claude Code updates both ProductCard.jsx and ProductCard.module.css with these additions.

  • In your browser, hover over the Add to Cart button. The background color should darken slightly.
  • Click the Add to Cart button.
  • Open DevTools by pressing Cmd+Option+I (macOS) or Ctrl+Shift+I (Windows).
  • Select the Console tab. You should see Added to cart: Wireless Headphones logged.

Hover effect or console log not working?

Confirm Claude Code created or updated the .addToCartButton:hover rule in ProductCard.module.css. If the rule is missing, prompt Claude Code again with a more specific request.

Check that the onClick={handleAddToCart} attribute is on the <button> element in ProductCard.jsx. Also verify that the handleAddToCart function is defined inside the component.

Help me debug my ProductCard hover effect and click handler.

✔️ Awesome, I've got everything!

Great. Double check you have saved both ProductCard.jsx and ProductCard.module.css.

ⓧ I'd like to double check the full code

Here is what your files should look like after Claude Code has finished all refinements.

import styles from './ProductCard.module.css';

function ProductCard() {
  const handleAddToCart = () => {
    console.log('Added to cart: Wireless Headphones');
  };

  return (
    <div className={styles.card}>
      <div className={styles.productImage} />
      <div className={styles.content}>
        <h2 className={styles.productName}>Wireless Headphones</h2>
        <p className={styles.price}>$79.99</p>
        <p className={styles.description}>
          Premium noise-cancelling headphones with 30-hour battery life.
        </p>
        <button className={styles.addToCartButton} onClick={handleAddToCart}>
          Add to Cart
        </button>
      </div>
    </div>
  );
}

export default ProductCard;
.card {
  width: 360px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.productImage {
  width: 100%;
  height: 200px;
  background: #e0e0e0;
  border-radius: 8px 8px 0 0;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.productName {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.price {
  font-size: 24px;
  font-weight: 700;
  color: #1a365d;
  margin: 0;
}

.description {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  margin: 0;
  line-height: 1.5;
}

.addToCartButton {
  width: 100%;
  height: 44px;
  background: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.addToCartButton:hover {
  background: #2563eb;
}

Your code may differ slightly depending on how Claude Code interpreted your Figma design. The important thing is that the visual output matches your design and the hover and click interactions work.

Secret mission

Complete the Two-Way Loop with Code-to-Figma

You've gone from design to code. But what about going from code back to design? Push your live React component back into Figma as an editable frame to complete the full two-way workflow.

Before you go

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs locally and uses your existing Figma and Anthropic subscriptions, so there are no additional ongoing costs.

Resources you used:

  • Figma design file containing the ProductCard frame.
  • Figma MCP server connection configured in Claude Code.
  • Local figma-product-card Vite + React project on your Desktop.
  • Local Vite dev server (if still running on http://localhost:5173).
  • Claude Code Figma plugin installed via claude plugin install.

Keep everything running

No action needed. Choose this if you are still actively building on your product card or want to experiment with more Figma-to-code workflows.

  • Your Vite dev server stays running at http://localhost:5173.
  • Your Figma MCP connection stays configured in Claude Code.
  • Your Figma design file remains in your Figma account.

Pause - I'll come back to this later

Shut down running processes to free up system resources, but keep your project files and configuration intact.

  • Stop the Vite dev server by pressing Ctrl+C in the terminal where it is running.
  • Your figma-product-card folder and all project files stay on your Desktop.
  • Your Figma MCP connection stays configured. To resume, open the figma-product-card folder in your terminal, run npm run dev, and launch Claude Code with claude.

Delete - I don't want to use this again

Remove all project resources and start fresh.

  • Stop the Vite dev server by pressing Ctrl+C in the terminal where it is running.
  • Delete the figma-product-card folder from your Desktop.
  • Remove the Figma MCP server from Claude Code by running claude mcp remove figma in your terminal.
  • Delete the Figma design file from your Figma account if you no longer need it.

Mission accomplished

That's a Wrap!

Nice work! You just built a complete design-to-code pipeline powered by AI.

You've learned how to:

  • Connected Figma to Claude Code using the MCP server and used design data to generate a production-quality React component.
  • Designed a product card in Figma with semantic layer naming and Auto Layout to produce clean, accurate code generation results.
  • Iterated on AI-generated code using follow-up prompts with real Figma design context to refine styling and add interactivity.
  • Pushed your live UI back into Figma as an editable frame, completing the full two-way design-to-code loop.

Ready to quiz yourself?