@tdesign/d2c-utils

将 Figma 设计稿转换为 HTML 的工具库。

📦 开箱即用

npm install @tdesign/d2c-utils

🔨 脚本模式

在 Node.js 中调用，获取转换内容。

import { figma2Html, figma2Image } from "@tdesign/d2c-utils";

const html = await figma2Html(figmaToken, figmaUrl, {
  autoLayout: true,
  tokenType: "personal",
});

const imageUrl = await figma2Image(figmaToken, figmaUrl, {
  tokenType: "personal",
  format: "png",
  scale: 1,
});

公共参数

| 参数 | 类型 | 说明 | |------|------|------| | figmaToken | string | Figma API 的访问凭证（必填） | | figmaUrl | string | Figma 画布中目标节点的链接（必填） |

figma2Html 参数

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | tokenType | 'personal' | 'oauth' | 'personal' | Token 类型- personal：Personal Access Token（个人简单集成场景）- oauth：OAuth2 Token（第三方应用集成场景） | | autoLayout | boolean | true | 是否根据 Auto Layout 生成相对定位的布局，关闭后全部为绝对定位 | | nameFilter | boolean | (originalName: string) => string | true | 控制 data-name 属性的过滤策略：- true：移除无意义的默认图层名（Frame、Group 等），并移除与同标签内 data-component-name 完全重复的 data-name- false：保留所有原始图层名- 自定义函数：返回非空字符串作为最终的 data-name，返回空串则移除该属性 | | stripNodeId | boolean | true | 是否移除每个元素上的 data-node-id 属性，关闭后将保留 | | borderBox | boolean | true | 是否全局注入 * { box-sizing: border-box } 样式 | | responsive | false | { mode: 'vw' } | { mode: 'rem'; designWidth?: number } | false | 响应式布局配置：- false：输出 px- { mode: 'vw' }：输出 vw- { mode: 'rem' }：输出 rem，designWidth 默认使用 Figma 画布宽度 | | rasterize | RasterizeConfig | - | 栅格化配置，控制哪些节点转为图片而非 HTML 元素，详见下方说明 |

RasterizeConfig 栅格化配置

| 字段 | 类型 | 说明 | |------|------|------| | rules | string[] | JS 断言表达式，命中任意一条则栅格化。可用变量：node（Figma REST API 节点，参考 类型文档）。示例：["node.type === 'VECTOR'"] | | includeNodeIds | string[] | 按节点 ID 强制栅格化，优先级高于 rules | | excludeNodeIds | string[] | 按节点 ID 强制跳过栅格化，优先级最高 | | mergeNodeIds | string[][] | 将游离节点合并为一张图片，每个子数组为一个合并组，合并结果以 Base64 格式内联在 HTML 中 |

figma2Image 参数

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | tokenType | 'personal' | 'oauth' | 'personal' | Token 类型 | | format | 'png' | 'jpg' | 'svg' | 'png' | 导出图片的格式 | | scale | number | 1 | 导出图片的分辨率倍数 |

🖥️ CLI 模式

在终端中调用，产物直接写入本地文件。

# 导出节点为 HTML 和图片资源
npx tdesign-d2c --token <figma-token> --url <figma-url>

# 启动可视化面板
npx tdesign-d2c ui --token <figma-token>

# 导出节点为图片
npx tdesign-d2c image --token <figma-token> --url <figma-url>

📖 完整参数查询

npx tdesign-d2c --help