HTML to Figma — 把任意网页导入 Figma 的插件
一个免费的 Figma Community 插件，把 HTML + CSS 转成可编辑的 Figma 设计稿 —— Flexbox 自动转 Auto Layout，保留层级结构，不靠位图截图。Community 上 268 位用户使用中。
TypeScript
Figma
HTML
CSS个人项目概述
一个我从设计到上架独立完成的 Figma Community 插件。把任意 HTML 粘进来，或拖一个 .html 文件进来，插件会遍历 DOM、解析行内样式和 <style> 标签的 CSS，生成一棵真实的 Figma frame 树 —— Flexbox 容器自动变成 Auto Layout，padding / gap / 颜色 / 阴影 / 字体全部映射到 Figma 属性，父子层级也完整保留，设计师拿到后还能继续改。不靠位图截图，不走 "拍平成图片" 的捷径。免费发布在 Figma Community，已 268 个用户在用。
为什么做这个插件
手上有一摞用 AI + 手写 CSS 出的 HTML 稿，我想接着在 Figma 里继续迭代——但 Community 上现成的转换器要么把结果拍平成一张图片，要么必须上传到云端。两种都没法让设计师拿到后真的去改。所以我自己写了一个：直接遍历 DOM，输出原生的 Figma frame 树。
Flexbox → Auto Layout，忠实映射
解析器最有意思的部分是 CSS → Figma 的映射。Flexbox 属性逐个对应：flex-direction → layoutMode、justify-content → primaryAxisAlignItems、align-items → counterAxisAlignItems、gap → itemSpacing、flex-wrap → layoutWrap。padding、gap、border-radius（四角独立）、border（宽度 + 颜色）、背景色、opacity、box-shadow（转 Drop Shadow / Inner Shadow）也是一对一映射。文字也一样：color、font-family、font-size、font-weight、font-style、text-align、line-height、letter-spacing、text-decoration、text-transform。
技术栈
纯 TypeScript，无框架。esbuild 把沙箱代码（src/code.ts）和 UI 分别打包，UI 是一个自包含的 HTML 文件，用 Figma 的 CSS 变量（--figma-color-bg、--figma-color-text 等），所以插件会自动适配 Figma 的亮 / 暗模式。整个仓库就一个 TypeScript 工程：parser（HTML → 中间节点树）+ converter（节点树 → figma.createFrame / createText / createRectangle / createLine 调用）。manifest 里 networkAccess 设为 "none"——一切都在 Figma 沙箱里跑，无服务端。
