Using Figma MCP with Cursor AI IDE: A Step-by-Step Guide

Yesterday a friend shared an open‑source project github.com/GLips/Figma, which implements a Figma MCP (Model‑Control‑Protocol) service. MCP is a concept that provides an interface for AI applications to access external platforms and retrieve detailed data.

The Cursor AI IDE (version 0.45 or later) supports binding MCP services. In the Settings panel you can add an MCP server configuration.

Follow the project README to set up the service:

1. In Figma, click your avatar, go to Settings, and create a Figma api-key with read/write permissions (at least Dev resources read).

2. Copy the generated api-key and run the following command in a terminal:

pnpx figma-developer-mcp --figma-api-key=<your-figma-api-key>

The service starts locally on port 3333. Connect Cursor to http://localhost:3333/sse (the green dot indicates a successful link).

2025.3.20 – Updated: Cursor now writes the MCP configuration directly to a JSON file: <code>{ "mcpServers": { "Figma": { "url": "http://localhost:3333/sse" } } }</code>

In Figma, select the desired design components, copy them, and specify the target file and requirements. The AI then generates the corresponding code (using normal mode; agent mode may work better).

The final output includes a design mockup and a generated interface. Below is a React ECharts line‑chart example produced by the AI:

import ReactECharts from 'echarts-for-react';

export default function LineChart() {
  const data = [
    { date: '周一', value: 150 },
    { date: '周二', value: 230 },
    { date: '周三', value: 224 },
    { date: '周四', value: 218 },
    { date: '周五', value: 135 },
    { date: '周六', value: 147 },
    { date: '周日', value: 260 },
  ];

  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderWidth: 0,
      textStyle: { color: '#333' },
    },
    grid: { left: '1%', right: '1%', bottom: '1%', top: '3%', containLabel: true },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data.map(item => item.date),
      axisLine: { lineStyle: { color: '#E5E7EB' } },
      axisLabel: { color: '#6B7280' },
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { lineStyle: { color: '#E5E7EB', type: 'dashed' } },
      axisLabel: { color: '#6B7280' },
    },
    series: [{
      name: '客服消息量',
      type: 'line',
      smooth: true,
      data: data.map(item => item.value),
      symbol: 'circle',
      symbolSize: 6,
      itemStyle: { color: '#1677FF' },
      lineStyle: { width: 2, color: '#1677FF' },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(22, 119, 255, 0.2)' },
            { offset: 1, color: 'rgba(22, 119, 255, 0)' },
          ],
        },
      },
    }],
  };

  return (
    <ReactECharts option={option} style={{ height: '100%', width: '100%', display: 'flex', justifyContent: 'center' }} />
  );
}

If the integration does not work, check the following:

Ensure the generated Figma api key has sufficient permissions.

Confirm the MCP service shows a green indicator.

Use Designer mode when copying selections in Figma.

Upgrade your npm version (see github.com/getcursor/c…).

Consider using agent mode for communication.

Using Figma MCP improves accuracy compared to sending screenshots to AI models like Claude, as the AI can directly read Figma metadata. This results in better reconstruction of designs and saves time.

Feel free to share other useful MCP services in the comments.