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 沙箱裡跑，無伺服端。
