@tdesign/d2c-utils

A utility library for converting Figma designs to HTML.

📦 开箱即用

npm install @tdesign/d2c-utils

🔨 使用方式

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

const html = await figma2Html(figmaToken, figmaUrl, {
  /**
   * 产物布局逻辑
   * - true：根据 Auto Layout 生成相对定位
   * - false：所有元素使用绝对定位
   * @default true
   */
  autoLayout: true,

  /**
   * Token 类型
   * - 'personal'：Personal Access Token
   * - 'oauth'：OAuth2 Token
   * @default "personal"
   */
  tokenType: "personal",
});

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

const { fileKey, nodeId } = parseFigmaUrl(figmaUrl);

| 参数 | 说明 | |------|------| | figmaToken | 访问 Figma API 的认证凭证支持类型：- Personal Access Token：适用于个人简单集成场景 https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens- OAuth2 Token：适用于第三方应用集成场景 https://developers.figma.com/docs/rest-api/authentication/#oauth-apps | | figmaUrl | Figma 画布中目标节点的链接