From Figma to React: A Step-by-Step Guide to AI-Powered Component Generation |

This article explains how to create a React component directly from a Figma design using an AI-powered workflow. We will leverage the Figma Model Content Protocol (MCP), Visual Studio Code, the Rode extension, and Google Gemini AI to seamlessly convert a Figma button component into a functional React component, complete with a Storybook for interactive testing.

This guide will walk you through the entire process, covering the necessary requirements, the setup for all tools and services, the AI-driven generation of the button component, and the subsequent refinement and testing steps.

Prerequisites: What You'll Need

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

Figma: A paid Figma plan is required, as this workflow depends on Dev Mode and Figma Code Connect to establish a connection with Visual Studio Code. You will also need the desktop application.
Visual Studio Code: The free and popular code editor.
Rode Extension for VS Code: This extension integrates Large Language Models (LLMs) directly into the editor.
Google AI for Developers Account: You'll need an account to generate an API key for Google Gemini. This requires adding billing information.
Project Files:
- A Figma file containing the component designs. For this guide, we use a file based on the "Scale" design system.
- A base project folder (unzipped) to open in Visual Studio Code.

Step 1: Setting Up Your Environment

Figma Configuration

Once you are logged into the Figma desktop app, create a new project. Then, locate the downloaded Figma file and drag it into your project to import it.

After opening the file, navigate to the "Button" page. Select the main button component to inspect its variants. You will see a comprehensive set of styles, including:

Standard Buttons:
- primary
- secondary
- tertiary, tertiary-mono
- inverse, inverse-mono
- outline, outline-mono
- text, text-mono
Destructive Buttons:
- negative-primary
- negative-outline
- negative-text

The goal is to convert all these variants, including their associated spinners and icons, into a single, robust React component. The Figma file also contains the necessary spinner components and icons (Feather icons in 16, 24, and 32px sizes), which we will map to the react-feather library.

Visual Studio Code and Rode Setup

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

Once installed, a new icon will appear on the right-hand sidebar. Click it to open the Rode panel. Initially, it won't be able to do anything as it requires an AI agent to be configured.

Step 2: Configuring the AI Agent

Get a Google Gemini API Key

Log in to Google AI Studio with your Google account. In the top right corner, click "Get API key" and then "Create API key" in a new project. Copy this key and store it securely.

Next, you must set up a billing account. From the left-hand menu, go to Usage and billing, select Billing, and follow the prompts to set up a new payments profile.

Connect Rode to Gemini

Back in VS Code, open the Rode panel.

Click on Select API Configuration and go to Settings.
Add a new configuration, name it "Gemini," and select Google Gemini as the provider.
Paste your API key into the designated field and save.
In the model settings, select Gemini 1.5 Pro.
Open Advanced Settings and set the Rate Limit to 0. Save the configuration.

To finalize the setup, we need to configure the MCP server. In the Rode panel, click the "More" icon (...), select MCP Servers, and then Edit Global MCP. Paste the contents of the mcp-settings.json file from your project's context folder into this editor and save.

Step 3: Generating the React Component with AI

With everything configured, let's test the connection. In Figma, ensure the main button component is selected. In the Rode chat panel in VS Code, type the following prompt:

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

The AI should respond by identifying the "Button" component. This confirms the connection is working. Now, let's gather more detailed information before generating the code.

Tell me what its variants, properties, styles, and structures are. Map its styles to the variables that you can find here: [path to your styles folder]

This prompt instructs the AI to analyze the component in-depth and map its design tokens to the CSS variables defined in your project.

Finally, provide the main instruction to build the component. You can reference a context file with detailed steps for the AI to follow.

Create a React version of the selected Figma component. Follow all of the steps outlined in this file: [path to your context file]

Rode will generate a to-do list for the task. Once you approve it, the AI will begin writing the files directly into your project's components directory. You can watch as it creates the folder structure, props, and component logic, correctly applying the semantic variables from your styles.

Step 4: Previewing and Refining in Storybook

Once the initial files are generated, let's ask the AI how to view the component.

How can we preview the button component in Storybook?

The AI will likely suggest running the Storybook command. Open your terminal and execute it:

npm run storybook

This will launch Storybook in your browser.

Iterative Refinement

You will likely encounter issues that require further refinement. This is where the back-and-forth with the AI agent becomes powerful.

Problem 1: Styles are not displaying. The component might appear unstyled. Let's ask the AI to fix it.

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

The AI will analyze the project, identify the missing import or configuration, and apply a fix.

Problem 2: Icons are missing. The button works, but the leading and trailing icons are not present.

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

The AI will rescan the Figma component, identify the icon properties, and integrate the react-feather library to render them.

Problem 3: Icon controls are not user-friendly. The icons might be hardcoded. Let's improve the Storybook controls.

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 Storybook interface, replacing boolean toggles with dropdowns that list available icons, making testing much more intuitive.

Problem 4: The loader is the native browser default. The button's loading state should use the custom spinner from our Figma file.

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

Make sure the spinner component is selected in Figma. The AI will extract the SVG code, create a new Spinner React component with the appropriate CSS for animation, and integrate it into the button's loading state.

Final Polish To clean up the Storybook interface, you can ask the AI to make final adjustments.

Change the property called children to label.

Remove the state property from the Storybook props list.

After these changes, the component should be fully functional and match the Figma design, with a clean and easy-to-use Storybook interface.

Conclusion

This workflow demonstrates the incredible potential of AI-assisted development. By connecting design tools like Figma to a powerful LLM within a familiar code editor, developers and designers can automate the tedious process of translating design systems into production-ready code. This not only accelerates development but also ensures a higher degree of consistency between design and implementation, allowing teams to build sophisticated components with remarkable efficiency.