How to Connect Cursor AI with Figma via MCP for Automatic UI Design

Environment Setup

System: macOS

Software version: Figma (web or app) and Cursor 0.47.x or later

Other tools: Bun (will be installed automatically)

Operation Process

1. Configure MCP Server

Run the following commands to set up the server environment:

# Clone the project repository
git clone [email protected]:sonnylazuardi/cursor-talk-to-figma-mcp.git
# Enter the project directory
cd cursor-talk-to-figma-mcp
# Open the project with Cursor
cursor .

# Install Bun runtime
curl -fsSL https://bun.sh/install | bash
# Set up the project environment
bun setup
# Start the WebSocket service
bun start

When the service starts successfully, the terminal will display a confirmation message:

2. Figma Plugin Configuration

Follow these steps inside Figma:

Create a new Drafts file.

Open the Plugins & widgets menu.

Select the Import from manifest option.

Choose the manifest.json file from the cloned repository.

After importing, run the plugin and note the Channel code (e.g., "f4hjygha").

3. Cursor Configuration and Usage

1. Open the Cursor settings panel and enable the MCP service.

2. Use the recorded Channel code to establish a connection with Figma.

3. Provide a prompt template to the AI. The following example is a detailed prompt for designing a fitness Pilates iOS app:

You are a senior UI/UX designer with extensive experience in fitness app design and deep knowledge of Apple Human Interface Guidelines. Your task is to help a middle‑school user create a "Fitness Pilates" iOS app prototype.

Please output a complete set of high‑quality app mockups:

1. Design goals
   - Create iOS‑native style designs that follow the Human Interface Guidelines.
   - Target Pilates beginners to intermediate users with a clean, intuitive interface.
   - Ensure the mockups clearly illustrate app functionality and user experience.

2. User needs analysis
   - Target users: people who want to improve posture and core strength through Pilates.
   - Pain points: lack of professional guidance, uncertainty about correct practice, difficulty staying motivated.
   - Expectations: visual exercise demos, personalized training plans, progress tracking, achievement incentives.

3. Feature planning
   - Home: quick access to workouts, progress, profile.
   - Workout library: tiered Pilates moves with detailed video guidance.
   - Training plan: personalized daily recommendations.
   - Progress tracker: record workout history and body changes.
   - Community: share achievements and get motivation.
   - Settings: manage personal info and notifications.

4. Design specifications
   - Use the latest iOS design elements and interaction patterns.
   - Follow iPhone 16 Pro dimensions (width 393 px).
   - Apply a bright, energetic color palette suitable for fitness.
   - Ensure accessibility with proper contrast and touch target sizes.
   - Use clean icons and illustration style.

5. Mockup requirements
   - Create all screens in Figma.
   - Provide 1‑2 screens per feature (e.g., login, home, workout library, progress, community, settings).
   - Arrange up to three screens per row, then wrap to the next line.
   - Add device frames and subtle shadows without covering screen content.
   - Include brief annotations explaining each screen’s purpose and design rationale.

First show the app’s information architecture and user flow diagram, then present high‑fidelity mockup screens for each key user journey, and finally summarize the design guidelines.

Note: The design generation process typically takes 5‑10 minutes; you can work on other tasks meanwhile.

After the design is generated, you can use multimodal features (screenshot + text description) to let Claude 3.7 refine and optimize the output.

Results Showcase

Cursor MCP Call Process

Figma Design Deliverables

Usage Experience and Recommendations

Prompt quality is crucial: Well‑crafted prompts produce more professional designs. Non‑designers should provide detailed requirements and references.

Design quality comparison: The generated UI is relatively minimalistic; it may lack the polish of manually crafted prototypes but offers the advantage of being directly editable in Figma.

Technical outlook: The MCP protocol is still evolving; future versions are expected to generate higher‑fidelity design files.

Full design files can be viewed in the Figma community.