接到別人的 Figma 設計稿,資訊永遠差一點、Tailwind class 要手算、選擇要匯出圖片結果拆圖層拆老半天。這兩支 plugin 是為網頁前端切版這個場景打造的。
group 或 auto layout,Dev Mode 看不出物件間的間距語意,只能靠肉眼推估 margin 在哪裡。%、vw 等相對單位,但 Dev Mode 只給 px 和 rem。要換算就得先量容器再手動除一次,每個物件都要重複。24px,前端用 Tailwind,每次都要自己對應 class 名稱——是 p-6 還是 mt-5?spacing scale 記不住、查又費時。aspect-ratio 實作某區塊,設計稿只給 px 寬高。需要自己算最接近的標準比例(16/9?4/3?),還不確定有沒有偏差。
border-radius,選取即可複製。margin、padding、flex/grid,或是絕對定位來實作。Auto Layout,也沒有明確的 group/frame 時,物件關係只剩座標;是水平排列、垂直堆疊,還是平均分佈,往往無法直接判讀。Dev Mode 能提供不少單一物件的尺寸與距離,但前端實作更常需要「相對容器」或「相對整體版面」的比例,也需要處理共用物件與外部工具映射(例如 Tailwind 單位)。px 或 rem,落地時卻常要轉成 %、vw 等彈性單位,幾乎每個元素都要再換算一次。srcset 用。Figma 沒辦法在同一步驟同時輸出原圖和縮小版,得分兩次操作。
srcset 兩份需求,一個步驟完成。manifest.json。付款完成後,請將付款成功訂單畫面 email 至 hello@user.today,我們會將套件檔案寄給你。