Design Editor文档导入与导出
导入
把 Figma 文件、pen.dev 文件、SVG、网页和截图导入为可编辑的图层。
1Figma
- 在 Figma 中选择“File > Save local copy”，得到一个
.fig文件。 - 通过“文件 > 导入 > Figma”（
Cmd+Shift+F）、主页上的卡片、双击文件或把它拖到窗口上来打开。 - 选择你需要的页面，或选择“导入所有页面”。
- 选择“保留 Figma 布局”以保持原有位置，或选择“Design Editor 自动布局”以重建堆叠结构。
无法精确还原的内容都会以警告形式列出。在 Figma 中复制图层再粘贴到这里也同样可行。
2pen.dev
.pen 文件会作为新的未命名文档打开，原文件不会被写回。着色器、脚本、便签和浏览器节点都会一并导入。
3SVG 和图片
图片工具可以放置 PNG、JPEG、GIF、WebP 和 SVG 文件；SVG 会变成可编辑的矢量图层。位图也可以直接拖放到画布上。
4HTML
“文件 > 导入 > HTML”（Cmd+Shift+H）支持 .html 或 .htm 文件，也支持包含样式和图片的 .zip。它会遵循 CSS 层叠、变量、媒体查询和网格布局，并列出它不得不近似处理的部分。
终端
de import:html https://example.com --viewport-height 9005复刻截图
主页上的截图卡片会把 PNG 或 JPEG 发送给 Agent，由它重建为可编辑的设计。
6Chrome 扩展
代码仓库中的扩展可以把你正在浏览的页面捕获到正在运行的编辑器中。它可以捕获整个页面、选取单个元素、提取 design.md，或下载 .de 文件。
它尚未上架 Chrome 应用商店。请从 packages/de-chrome-extension 构建，并在 Chrome 110 或更高版本中通过“加载已解压的扩展程序”加载。它只与你自己电脑上的编辑器通信。