@figit/dom-to-figma (英语)

在浏览器中将任意 DOM 树转换为 Figma 剪贴板有效载荷 .

import { createFigmaConverter } from "@figit/dom-to-figma";

const figma = createFigmaConverter();

const result = await figma.convert({
  element: document.getElementById("design"),
  width: 1280,
  height: 800,
  name: "Hero",
});

await navigator.clipboard.write([result.toClipboardItem()]);

贴入法相. 结束了.

安装

pnpm add @figit/dom-to-figma

它会做什么

行走一棵真正的 DOM 树,读取计算过的样式, 并制作Figma 在粘贴上读取的内容。 文本成为可编辑的文本;图像,向量,梯度,阴影,边框,并形成占位符全部结转.

被斯莱克用于生产,从浏览器直接将设计复制到Figma.

版式

默认转换器推断 本地图像自动显示:有弹性的容器,平板块流动,包裹行,并网格成为真正的堆栈(stackMode,相距相接,相接相接,相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相接相接相接相接相接相接相接相接相相接相接相接相接相相接相接相接相 推论是每个容器的,并对照浏览器所测量到的几何——任何不能完全复制的容器都回落到绝对定位上,因此结果永远不会比固定位置的粘贴更糟糕.

const figma = createFigmaConverter(); // layout: "auto" (default)

过 layout: "absolute" 以禁用推断和定位每个框架(1.0前行为):

const figma = createFigmaConverter({ layout: "absolute" });

多帧画布

过 frames 而不是一个 element 将数个 DOM 树复制到一个相片上 :

const result = await figma.convert({
  frames: [
    { element: a, width: 800, height: 600, x: 0,   y: 0, name: "Hero" },
    { element: b, width: 800, height: 600, x: 900, y: 0, name: "Pricing" },
  ],
  canvasName: "Landing",
});

await navigator.clipboard.write([result.toClipboardItem()]);

结果形状

type ConvertResult = {
  document: FigmaClipboard;          // raw node-change document
  bytes: Uint8Array;                 // encoded .fig-style binary
  base64: string;                    // base64 of bytes
  toClipboardItem(): ClipboardItem;  // ready for navigator.clipboard.write
  toClipboardHtml(): string;         // raw HTML envelope Figma reads on paste
};

跟踪模式

过 trace: true 也可以从每个发射的Figma节点取出一张地图,回到它来自的DOM元素. 它默认是关闭的,在被禁用时不增加成本,并且永远不会改变有效载荷字节——它的存在是为了工具(可视的抖动,调试)而不是生产拷贝.

const figma = createFigmaConverter({ trace: true });
const result = await figma.convert({ element, width: 1280, height: 800 });

for (const entry of result.trace.entries) {
  // entry.guid    → the emitted node's Figma GUID
  // entry.domPath → ":scope > div:nth-child(2) > p:nth-child(1)"
  // entry.rect    → source rect (getBoundingClientRect) at convert time
  // entry.kind / entry.tag / entry.text
}

domPath 以 root.querySelector(domPath) (根元素为: :scope) (中文(简体) ). 文本节点带有其所有元素的路径加一 ::text[i] 后缀,一个文本节点的每个被包裹的行段共享该路径. result.trace 实值 undefined 除非转换器是用 { trace: true }。 。 。 .

自定义装载器

转换器采用三个可选的钩:

const figma = createFigmaConverter({
  fontLoader,   // (props) => Promise<FontFile>
  imageLoader,  // (req) => Promise<ImageFile>
  classify,     // (element, defaultKind) => ElementKind
});

重复 convert() 调用相同的转换器再利用缓存字体和图像。 打电话 figma.clearCache() 把他们丢掉.

字体

默认 : createFontsourceLoader() 通过 jsDelivr 的 CDN 从字体源取出字体 。 覆盖所有Google字体外加其他开源家族. 不需要 API 密钥 .

import { createFontsourceLoader } from "@figit/dom-to-figma";

const figma = createFigmaConverter({
  fontLoader: createFontsourceLoader({ subset: "latin-ext" }),
});

对于非fontsource字体,请自写加载器:

import type { FontLoader } from "@figit/dom-to-figma";

const myFontLoader: FontLoader = async ({ family, weight, italic }) => {
  const url = await myFontCDN(family, weight, italic);
  const response = await fetch(url);
  return { bytes: await response.arrayBuffer() };
};

图像

默认 : createDirectImageLoader() 直接执行 fetch(src)。没有CORS的交叉原生图像需要自定义的加载器,一般是代理链:

import type { ImageLoader } from "@figit/dom-to-figma";

const myImageLoader: ImageLoader = async ({ src }) => {
  const url = `https://my-proxy.example/?url=${encodeURIComponent(src)}`;
  const response = await fetch(url);
  const blob = await response.blob();
  return {
    bytes: await blob.arrayBuffer(),
    mimeType: blob.type,
  };
};

软件包内部将WebP/AVIF/etc重新编码为PNG,因此装入器只需要返回生字节和一个MIME类型.

分类

classify 让您将 DOM 元素映射到 Figma 节点类型 。 默认分类器返回 text, (中文(简体) ), image, (中文(简体) ), vector, (中文(简体) ), frame, (中文(简体) ), group, (中文(简体) ), form-with-placeholder,或 skip数字 :

import type { Classify } from "@figit/dom-to-figma";

const classify: Classify = (element, defaultKind) => {
  if (element.dataset.role === "text-wrapper") {
    return "text";
  }
  return defaultKind;
};

运行时间要求

在任何现代浏览器中运行. 取决于 window.getComputedStyle, (中文(简体) ), Blob, (中文(简体) ), ClipboardItem, (中文(简体) ), document.createElement, (中文(简体) ), crypto.subtle.digest, (中文(简体) ), Image,以及 <canvas>。 。 。 .

免责声明

与法格玛无关或得到其认可.