Figma数据提取工具

Figma MCP

获取Figma帧数据并将其简化为开发所需的基本属性的实用程序。

先决条件

• Node.js（v18+）
• Figma个人访问令牌

设置

1. 安装依赖项：

npm install

2. 创建一个 .env 使用您的Figma令牌创建文件：

FIGMA_TOKEN=your_figma_personal_access_token

要获取Figma令牌：

• 前往Figma→ 设置→ 账户→ 个人访问令牌
• 生成新令牌并复制它

用法

步骤1：配置目标帧

编辑 fetch-figma.js 并更新这些值：

const FILE_KEY = "your_file_key";  // From the Figma URL
const NODE_ID = "27729:93910";      // Node ID with colon separator

找到这些值：

• FILE_KEY：在您的Figma URL中 https://www.figma.com/file/5P0b5DsHL4adbsvcHFhdEz/...，关键是 5P0b5DsHL4adbsvcHFhdEz
• NODE_ID：在Figma中的帧上单击鼠标右键→ “复制链接”→ 该URL包含 node-id=27729-93910.用冒号替换破折号： 27729:93910

步骤2：获取帧数据

node fetch-figma.js

node fetch-figma.js > figma.json

这将把完整的Figma节点数据保存到 frame.json.

步骤3：减少JSON

node reduce-frame.js

这创造了 frame.reduced.json 仅具有基本属性：

• 布局（宽度、高度、x、y）
• 自动布局设置（布局模式、对齐、间距、填充）
• 视觉特性（填充、笔划、角半径）
• 文本内容和样式
• 嵌套子结构

输出

简化的JSON包括：

许可证

麻省理工学院