Creating Clickable Figma Prototypes with Lovable and Cursor

Setup for a Prototype Pipeline and Handover

Setting up an AI-powered pipeline requires a few key elements, as follows:

• Figma components:
• Create basic user-interface (UI) elements such as buttons, forms, and cards.
• Organize these elements into a shared library for easy export.
• Use design tokens to transfer styles—including colors and fonts—quickly and consistently.
• A Managed Service Provider (MSP) Server:
• This middleware provides a bridge between Figma and Cursor.
• The server receives JSON (JavaScript Object Notation) data from the Figma API (Application Programming Interface) and transforms the Figma components into React/Next.js.
• Leverage basic component libraries such as tailwindcss, shadcn/ui, framer-motion, or lucide-react as the foundation.

Connecting MCP to Design Tools

An MCP (Model Context Protocol) server enables external applications to access your design structure, including frames, colors, spacing, and components.

Step 1: Activate MCP in Figma.

Step 1 is crucial to connecting your design system with AI tools such as Lovable and Cursor, so they can automatically read and transform your Figma designs. To get started, enable MCP in the Figma desktop application.

1. Open Figma.
2. Under Preferences, select Enable desktop MCP server, as shown in Figure 1

3. Set up an MCP client, as shown in Figure 2.

Step 2: Connect MCP to Cursor.

Once MCP is active, link the server to your local Cursor setup, making your design data accessible to AI-powered workflows, as follows:

1. Open Cursor.
2. On the General tab, select Agent, as shown in Figure 3.

3. Go to the Tools & MCP section on the sidebar
   
4. To set up the connection, add the server address to the configuration file, as shown in Figure 4. Now, Cursor will be able to see your selected frames directly from Figma.
   

Step 3: Use MCP and Cursor for AI Prototyping.

Once you’ve established a connection between MCP and Cursor, Cursor can access all your design-data layers, colors, text, spacing, and components. You can then make AI requests directly—for example:

• “Create a page from this frame.”
• “Generate a responsive version of this design.”

The AI leverages MCP data to accurately translate your Figma layout into working code, enabling fast, interactive prototyping without any manual handoff. Thus, you can quickly test UX design ideas and iterate your designs in real-time.

Let’s look at how this process works, step by step:

1. Provide a prompt for a specific file or frame. Cursor will suggest terminal commands to scaffold the project.
2. Initialize the project by clicking the Run command on the Control widget, as shown in Figure 5.

3. Once the AI generates specific components, you must confirm or reject the code changes. To apply the changes to your local files, review the differences, then click Accept, as shown in Figure 6.

4. Once you’ve applied the code, you must debug the code on your local server. Check the terminal to ensure the local development server is running, and the terminal will confirm the status—for example, Ready in 755ms, as shown in Figure 7.

Generating a React Clickable Prototype from Figma MCP

Use Figma MCP to generate a fully clickable prototype directly from your Figma design. To create a prototype with which users can interact like a real product, the output should be a React project that is styled with Tailwind CSS and uses shadcn/ui components. I used this approach when prototyping a project for people with chronic medical conditions, enabling my team to rapidly validate an AI-driven module. To generate a clickable prototype, follow these steps.

Step 1: Connect to Figma MCP.

First, make sure you can access your Figma data via MCP:

• Establish a connection to Figma through MCP.
• Open the Figma file.
• Retrieve all relevant design data, including the following:
  
  • layout structure
  • typography
  • spacing
  • component hierarchy

This step ensures that all design details are available for AI-based component generation.

Step 2: Set Up React Project.

Set up your React project, as follows:

1. Create a new project using Vite or Next.js.
2. Install and configure Tailwind CSS for styling.
3. Install shadcn/ui and set up base components such as the following <Button>, <Card>, <Input>, and <Modal>. This project provides the foundation for all generated components.

Step 3: Generate Components.

Do the following for each Figma component:

1. Convert it into a functional React component.
2. Use shadcn/ui equivalents where applicable.
3. Apply Tailwind classes for layout, spacing, and colors.
4. Keep components modular, reusable, and typed using TypeScript.

Step 4: Define the Prototype’s Behavior and Outputs.

1. Implement clickable navigation between screens—for example, Landing → Form → Confirmation.
2. Use React Router or next/link, depending on your setup.
3. Add basic interaction states, including hover, focus, and active.

Your project should have a clear structure similar to the following:

src/

components/

pages/

routes/

styles/

Outputs should include the following:

• an md file with setup and run instructions
• a preview that closely matches the original Figma design, as follows:
  
  • proportions
  • typography
  • colors
• buttons and routes that are all interactive and mimic the real product’s behavior

Step 5: Complete the Process.

1. Deploy a local preview using Vercel, for Next.js, or a development server, for Vite.
2. Provide a live, clickable prototype link to team members.
3. Provide relevant code snippets for the generated components.

Example output request: “Using the Figma MCP connection, generate a React + Tailwind + shadcn prototype that replicates the Figma design. Include all interactive routes and buttons so it behaves like a real, clickable prototype.”

Using Lovable

Lovable is ideal for quickly validating UX flows, usage scenarios, or button logic during the early concept stage. In practice, Lovable works best in combination with Cursor.

• Lovable—Lets you explore and shape ideas.
• Cursor—Turns ideas into working code.

Deliverables for clients:

• Deploy the prototype to Vercel or Netlify for direct testing.
• Optionally, record a video demo using Loom to walk clients through the clickable flow.

Pros and Cons

The main advantages and limitations of using AI-powered prototyping include the following:

• Pros:
• speed—hours instead of days
• realism—live code, not just static mockups
• easy iteration and testing
• reduced handoff friction between Design and Development
• Cons:
• Code often needs refactoring.
• Not ideal for complex industries such as Fintech or healthcare.
• Design quality may be mediocre without refinement.
• Reliance on the stability of new AI tools.

Example Prompts

Let’s look at some example prompts to guide your AI tools.

Prompts for Cursor

Create an onboarding prototype for a new SaaS product that has the following flow:

1. A Welcome screen with a logo and Get Started button
2. A form with three multiple-choice questions
3. A confirmation screen that displays the selected answers
4. A dashboard with placeholder cards

Use the following components: Button, Input, Card (shadcn/ui), Tailwind CSS, framer-motion, and lucide-react.

Structure the code as a Next.js project with navigation between screens.

Prompts for Lovable

Design a modern Web user interface for POI (points of interest) search, that meets the following requirements:

1. A central interactive map with zoom
2. A sidebar panel with the following tools: Tools & Settings, Finish Setup, Add More POIs, Adjust Radius, Measure Distances
3. User hints: Select a POI on the map or in the left panel to view and edit its properties.

Create a minimalistic, modern user interface with an interactive map and panel behavior.

A Combination of Lovable and Cursor

You can create a UX design prototype using a combination of Lovable and Cursor, as follows:

1. Use Lovable to create your UX design prototype, including flows and scenarios.
2. If the flow works well, copy the description into Cursor.
3. Add Tailwind, shadcn/ui, and framer-motion.
4. Generate the code.
5. Deploy to Vercel or Netlify.
6. Share the clickable prototype’s link with the client.

Summary

Using Lovable and Cursor lets you turn your ideas into interactive prototypes in hours instead of days. You can test UX flows, iterate quickly, and share clickable prototypes with clients or users almost instantly. While this process doesn’t replace full-scale design, for fast hypothesis testing, these tools are incredibly effective. Give this approach a try, experiment freely, and enjoy seeing your ideas come to life. Happy prototyping!