自製 Figma Plugin · 未公開上架

設計稿到程式碼
之間的落差,
由 Figma Plugin 補起來

接到別人的 Figma 設計稿,資訊永遠差一點、Tailwind class 要手算、選擇要匯出圖片結果拆圖層拆老半天。這兩支 plugin 是為網頁前端切版這個場景打造的。

查看外掛
scroll
Tailwind class 對應 % / vw 相對單位 WebP 直接匯出 srcset 雙尺寸 aspect-ratio 推算 margin / padding 推算 border-radius class 自訂匯出尺寸 不動圖層合併匯出 Tailwind class 對應 % / vw 相對單位 WebP 直接匯出 srcset 雙尺寸 aspect-ratio 推算 margin / padding 推算 border-radius class 自訂匯出尺寸 不動圖層合併匯出

size-percentage-calculator

選取物件,一鍵取得可直接貼進程式碼的尺寸資訊
v1.0 · personal
為什麼需要它
P1margin 只能用猜的
設計師直接把物件放在畫面上,沒有 groupauto layout,Dev Mode 看不出物件間的間距語意,只能靠肉眼推估 margin 在哪裡
P2Dev Mode 只給絕對值
前端需要 %vw 等相對單位,但 Dev Mode 只給 pxrem要換算就得先量容器再手動除一次,每個物件都要重複。
P3Tailwind class 靠記憶
設計稿給 24px,前端用 Tailwind,每次都要自己對應 class 名稱——是 p-6 還是 mt-5?spacing scale 記不住、查又費時。
P4比例要自己推算
要用 aspect-ratio 實作某區塊,設計稿只給 px 寬高。需要自己算最接近的標準比例(16/9?4/3?),還不確定有沒有偏差。
size-percentage-calculator
size-percentage-calculator plugin 截圖
plugin 實際截圖
功能
相對寬高百分比
顯示物件相對於容器、相對於頁面的 % 寬高,可直接貼上使用,不需手動換算。
間距推算
從物件與外框的距離,自動算出 margin / padding 參考值。不再靠目測,也不用記哪邊有沒有 group。
aspect-ratio 偵測
推算長寬比,對照 16/9、4/3、3/2 等標準比例,直接標示最接近的值。
Tailwind class 對應
數值與 Tailwind class 並排顯示,涵蓋 spacing、border-radius,選取即可複製。
選取即觸發,無需設定
在 Figma 中選取任意物件即自動顯示所有計算結果,不需事先標記或額外步驟。

設計稿轉網頁的現實

image-exporter

看圖、確認尺寸、匯出——一個介面,直接輸出前端可用格式
v1.0 · personal
為什麼需要它
P1看個尺寸要找半天
屬性面板把圖層、填色、效果全堆一起,只是想確認圖片實際尺寸,卻要在一堆屬性裡翻找,干擾多、速度慢。
P2Figma 沒有 WebP 匯出
WebP 是現代前端最普遍的圖片格式,但 Figma 原生不支援直接匯出 WebP,每次都要先匯 PNG 再另外轉檔,多一道不必要的步驟。
P3srcset 兩份要分兩次
沒有 RWD 稿時,習慣把 PC 圖縮一半給 mobile srcset 用。Figma 沒辦法在同一步驟同時輸出原圖和縮小版,得分兩次操作。
P4選範圍要先建 group
設計師沒把圖片 group 好,要匯出某範圍,只能手動建 group 再復原,怕改到原始圖層或遮色片,每次都得小心翼翼。
image-exporter
image-exporter plugin 截圖
plugin 實際截圖
功能
直接匯出 WebP / SVG
原生支援 WebP,可調整品質參數,省去轉檔步驟,輸出即為生產環境可用格式。
srcset 雙尺寸一次輸出
同步匯出原圖與 50% 縮小版,直接對應 RWD srcset 兩份需求,一個步驟完成。
自訂匯出尺寸
直接指定目標像素寬度,不受設計稿原始比例限制,輸出即符合需求,不需二次裁切。
任意選取合併匯出
選取任意多個物件,直接輸出成一張圖,不需建 group,不改動原始圖層結構。
乾淨的看圖介面
去除屬性面板雜訊,選取圖片即清楚顯示尺寸,「確認大小」和「匯出」在同一個地方完成。

安裝方式(Development plugin)

用 Figma 的開發者功能安裝本地外掛:不需上架,也能在自己的帳號裡直接使用
local · dev
快速安裝步驟
S1使用 Figma Desktop App
建議用桌面版操作:打開任一個檔案後,在 Plugins 的開發者選單中匯入本地外掛。
S2匯入 manifest.json
選單中找到 Development / Import plugin from manifest...,選擇外掛專案的 manifest.json
S3從 Development 直接執行
匯入後,外掛會出現在 Development 清單中。更新程式碼後通常只要重跑即可。

購買方式

提供兩種付款管道,完成付款後寄送訂單畫面即可安排交付
payment
P1信用卡線上付款
P2Google Pay 付款

付款完成後,請將付款成功訂單畫面 email 至 hello@user.today,我們會將套件檔案寄給你。