From Figma to React: A Developer's Guide to AI-Assisted Component Creation

In this article, we'll walk through creating a React component directly from a Figma design using a powerful toolchain: Figma MCP, Visual Studio Code, the Rode extension, and Google Gemini AI. This process demonstrates how to connect Figma to your code editor and leverage an LLM to automatically generate a functional React component, complete with a Storybook for interactive testing.

The Workflow at a Glance

Our journey will cover the essential steps from setup to a fully refined component: 1. Requirements: Outlining the necessary software and services. 2. Environment Setup: Configuring all the tools to work together. 3. Component Generation: Using AI to convert the Figma design into React code. 4. Refinement & Testing: Iteratively improving the component and verifying its functionality in Storybook.

Required Tools and Services

Before we begin, ensure you have the following set up:

  • Figma (Paid Plan): You'll need a paid Figma account, as Figma's Code Connect and Dev Mode are required for the integration with Visual Studio Code. The desktop app is also mandatory for this process.
  • Visual Studio Code: The free and popular code editor from Microsoft.
  • Rode VS Code Extension: An extension that integrates LLMs directly into your editor.
  • Google AI Account: You'll need to sign up for Google AI for Developers to get a Gemini API key and set up billing.
  • Project Files:
    • A Figma file containing the design components (a custom design system named Scale is used in this example).
    • A base project in a zip file, which you'll open in Visual Studio Code.

Setting Up Your Environment

Step 1: Figma Setup

Once you've installed and logged into Figma, create a new project. Then, locate the downloaded .fig file and drag it into your Figma project to import it.

After opening the file, navigate to the "Button" page. You will see a comprehensive button component with numerous variants, including: - primary, secondary, tertiary, tertiary-mono - inverse, inverse-mono - outline, outline-mono - text, text-mono - Destructive states: negative-primary, negative-outline, negative-text

The goal is to convert all these variants, including their associated spinners and icons (Feather icons in 16, 24, and 32px sizes), into a single, versatile React component.

Step 2: Visual Studio Code and Rode Installation

Open the base project folder in Visual Studio Code. Navigate to the Extensions view on the left sidebar, search for "Rode," and install it.

Once installed, a new sidebar for Rode will appear. To activate it, you need to configure it with a Google Gemini API key.

Step 3: Google AI and Billing Setup

  1. Go to Google AI for Developers and sign in.
  2. In the Google AI Studio, navigate to Get API key and select Create API key.
  3. Create the key in a new or existing project and copy it to a safe place.
  4. Next, set up billing. Go to Usage and billing, select Setup billing, and follow the prompts to create a payments profile and add a payment method.

Step 4: Configure Rode in VS Code

  1. Back in VS Code, open the Rode sidebar.
  2. Select API Configuration > Settings.
  3. Add a new configuration, name it "Gemini," select "Google Gemini," and paste your API key.
  4. In the model settings, choose Gemini 1.5 Pro and set the Rate Limit in advanced settings to 0. Save the configuration.
  5. Next, in the Rode sidebar, click the "more" icon, go to MCP Servers, and select Edit global MCP.
  6. Paste the following configuration, which was included in the project files under context/mcp_settings.json:
{
  "servers": [
    {
      "name": "Figma",
      "type": "Figma",
      "config": {
        "redacted": false
      }
    }
  ]
}
  1. Save the configuration and ensure you select "Always Allow" for any permissions prompts to streamline the workflow.

Generating the React Component with AI

With the setup complete, let's test the connection. In the Rode chat panel, ask a question to see if it can see your Figma selection:

Can you tell me what component I have selected in Figma?

Rode should correctly identify the "Button" component. To ensure it can access all the necessary details, ask a follow-up question:

Tell me what its variants, properties, styles, and structures are. Map its styles to the variables that you can find in the styles folder.

This prompt instructs the AI to analyze the component's structure and map its design tokens to the CSS variables defined in your project. Once you're confident the AI has the full context, provide the main instruction:

Create a React version of the selected Figma component and follow all of these steps.

The AI will generate a to-do list of its plan. After approval, it will begin creating the necessary files and folders (components/Button) and writing the code, including props and mappings to your semantic variables.

Refining and Testing in Storybook

Once the initial generation is complete, it's time to preview and refine the component.

First, ask the AI how to view the component:

How can we preview the button component in Storybook?

It will likely suggest the command to run Storybook:

npm run storybook

Iteration 1: Fixing Styles

You may notice that the component renders in Storybook without any of its styles applied. To fix this, simply ask the AI:

Storybook is displaying the button page but not displaying the styles. Can you fix this?

The AI will analyze the project setup and make the necessary changes to the Storybook configuration to correctly import the CSS styles.

Iteration 2: Adding Missing Icons

The initial component might be missing the leading and trailing icons. Instruct the AI to add them:

The leading and trailing icons are missing. Can you rescan the button component in Figma for these properties and use the feather-react library to add the icons to our button component?

The AI will rescan the Figma file, identify the icon properties, and update the React component to include them using the specified library.

Iteration 3: Improving Icon Controls

The icons might appear by default. A better user experience is to control their visibility via props. Let's refine this:

Can you change the leadingIcon and trailingIcon props to only show when an icon has been selected from a string dropdown?

This prompt refines the component's API, creating dropdown controls in Storybook to select icons by name, which dynamically renders them.

Iteration 4: Implementing the Custom Loader

The button's loading state might be using a default spinner. We can replace it with the one from our Figma design. Select the spinner component in Figma and prompt the AI:

Can you replace the native loader you have used with one that looks like the spinner component in the Figma file?

The AI will extract the spinner's SVG, create a new Spinner component with the necessary CSS for animation, and integrate it into the Button component's loading state.

Final Touches

Finally, perform some minor cleanup to improve the component's props and Storybook presentation:

  1. Rename children to label:

    Change the property called children to label.

  2. Remove the state prop: The hover and press states are handled automatically by CSS, so the control is redundant.

    Remove the state property from the Storybook props list.

After these steps, you will have a clean, fully functional, and interactive button component in Storybook with controls for its label, variants, icons, and loading state.

Conclusion

This workflow demonstrates the incredible potential of AI-assisted development. By connecting design tools like Figma directly to a code editor equipped with a powerful LLM, developers—and even designers—can automate the tedious process of translating design systems into production-ready code. The key is an iterative process of prompting, testing, and refining, which dramatically accelerates development and bridges the gap between design and implementation.