@tdesign/d2c-utils

A utility library for converting Figma designs to HTML.

📦 开箱即用

npm install @tdesign/d2c-utils

🔨 脚本模式

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 属性，关闭后将保留

figma2Image 参数

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

🖥️ 可视化模式

启动本地服务器，在浏览器中转换 Figma 节点为 HTML，并调整结果

npx @tdesign/d2c-utils --token <figma-token> [options]

CLI 参数

| 参数 | 默认值 | 说明 | |------|--------|------| | --url <figma-url> | - | Figma 节点链接，也可在浏览器 UI 中填写 | | --port <number> | 2657 | 本地服务器端口 | | --export <path> | - | 将导出结果写入本地文件，而非通过浏览器下载 |