Reader

前言

昨天朋友发给我一个开源项目 github.com/GLips/Figma… 是一个 Figma 的 MCP 服务。

MCP 是最近比较火的概念，你可能在推特经常能看到。我用自己的话理解，简单讲就是一个开放给 AI 应用访问外部某某平台，某某应用的一个接口，AI 可以通过 MCP 来获取到更具体的相关数据。

站内优秀文章更详细的可以看下这篇文章的介绍 juejin.cn/post/747830… (下图来源自互联网蛮形象的)

Cursor 不用介绍了吧。大名鼎鼎的 AI IDE Cursor 官网他支持绑定 MCP 服务，我使用的 0.45 版本，应该此版本以上都支持。在 Setting 中找到 MCP Server 进行添加配置。

我直接使用了下这个 Figma MCP + Cursor 感觉很不错，感恩开源。下面介绍下使用教程。

按照项目 Readme 操作

在 Figma 点击头像然后进入 Setting 先创建一个 Figma api-key。

给予一些权限。我这里给可读可写了。可自行修改。应该是至少需要 Dev resources 可读的。

复制下来生成的 api-key 然后在终端执行命令。

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

看到显示在本地 3333 端口启动服务了，就可以去 Cursor 链接了。

添加上亮小绿点就表示链接成功了。

在 Figma 复制选中的模块

指定要写入的文件，并提出相对应的要求。他就开始写了。（好像开启 agent 模式效果更佳，我直接使用的 nomal，朋友用 nomal 读取不到 Figma）

最后的成品下方是设计稿，上方是他一次性就实现的界面。还是很赞的，调整下高度和边距就可以用了。

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' as const,
      boundaryGap: false,
      data: data.map((item) => item.date),
      axisLine: {
        lineStyle: {
          color: '#E5E7EB',
        },
      },
      axisLabel: {
        color: '#6B7280',
      },
    },
    yAxis: {
      type: 'value' as const,
      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' }}
    />
  );
}

结语

使用 Figma MCP 对比之前我直接截图给 AI 进行还原，进一步提升了准确性，原先 claude 是需要识别图片，现在可以直接读取 Figma 的元数据了。实现的效果更好了。感恩 AI，让我摸鱼时间更多了，逃~ 😂

有更好用的 MCP 欢迎大家在评论区分享，ღ( ´･ᴗ･` )比心。

Reader

前端开发又幸福了，Cursor + Figma MCP 快速还原设计稿

前言

按照项目 Readme 操作

结语