文章系列介紹
融合了我的設計與開發經驗而成的獨家秘訣。

身為設計師,最不想面對的莫過於在Figma中捲動著漫長的圖層列表,找到那個忘記刪除、或是跑版的圖層;亦或是瘋狂地敲著鍵盤方向鍵,只為將按鈕對齊。諸如此類的情形,總是在無形中將耐心與效率消耗殆盡。但你知道嗎?只要利用Figma plugin(外掛程式),就可以讓處理上述問題變得很輕鬆。
一年前,我開發了一個私人plugin以提升我的效率。而現在,我決定正式將這個 plugin 開放給大眾使用!相信有了它之後,你在設計時就能做得比別人更快、更好!一起來看看這款「秘密武器」能幫助你做到什麼吧。
以8px系統快速設定間距
首先要介紹的是外掛程式的同名功能「Spaciiing」。這是一款基於8px系統,幫助你快速設置物件間距的工具。雖然Figma的Auto Layout提供類似功能,但它有許多限制:例如物件必須至少對齊X軸或Y軸,以及後續調整困難等。因此,Spaciiing特別適合用於不規則形狀的排版,或是快速嘗試各種版面設計的階段。


記憶常用的屬性
運用「屬性剪貼簿」,你就能將經常使用的寬度、高度、名稱等屬性記憶起來,接著再將屬性套用在其他物件上。舉例來說,使用這款工具就可以快速改動Figma的預設畫框尺寸(100×100)。

虛擬用戶檔案
假資料是設計過程中必不可少的一部分。然而,如果團隊成員在設計中交錯使用了不同的假資料,可能會在後續的交接和交付中引發意料外的誤會。我在實習時就曾遇到過這樣的問題:由於設計稿中使用了不一致的假資料,導致客戶將同一位使用者的操作誤認成多位使用者的行為。
這時,「虛擬用戶檔案」功能便能派上用場。這款工具提供包括個人資料、職業狀況、金融資料等多種欄位,可適應各種設計情境。更棒的是,這些資料還可以自動同步於不同的Figma帳戶間,確保團隊成員始終使用一致的假資料。

選取範圍過濾器
這款工具可以讓你依據圖層類型快速篩選出需要選取的圖層,方便進行大量更改,例如一次性修改字型和顏色等。此外,你還可以根據圖層名稱進一步篩選,從而更精確地找到並編輯特定圖層。


命名清理器
隨著設計變得越來越複雜,圖層的名稱也常常失控。尤其是像「Rectangle 223」這類名稱,其後的數字總是令人心煩。這時,你可以使用這款工具來自動清理圖層名稱,使它們變得更有條理和易於管理。

寬高比小助手
只需一鍵,便可將Frame、Rectangle等物件設置為常用的寬高比(如16:9、4:3等),大大提高了設計效率。即使你不確定應該在設計中使用哪種寬高比,這款工具也提供了詳細的說明,幫助你了解每種寬高比的適用情境。

捷徑
這是一個彙集了各種常用操作的寶庫。例如,你可以運用「尋找與取代」功能,快速修正打錯的文字;也可以選中具有填色的圖層,快速生成HTML碼所需的Hex或RGB值文字標籤。

除此之外,還可以搭配「筆記」、「設計狀態標籤」、「標題區段」等元件使用。輕點按鈕,便可在Frame上方生成元件,且外掛程式還會貼心地幫你填上目前的日期,助你追蹤該畫面的設計進展與狀態。

※「筆記」、「設計狀態標籤」、「標題區段」元件可在我的Figma社群檔案頁中免費下載。
變數生成器
Local variable功能雖然便利,但美中不足的是,使用原生視窗指定變數適用範圍時,只能一個一個慢慢地設定。考慮到製作變數時通常是一次性建立多個,這項任務就變得十分繁瑣。
這時,「變數生成器」功能就能幫助你解決問題。這款工具可讓你以編輯程式碼的方式快速建立變數,並且一次性將指定的適用範圍套用到該次建立的所有變數。如果你不會寫程式碼也不用擔心,工具中設有「生成Code範例」按鈕,能自動產生建立單一變數所需的程式碼。只需按下這個按鈕多次,便可生成多個變數所需的程式碼。

預設樣式庫
這是一款在新建立文件時,能快速從知名設計系統中導入樣式和變數的工具。本工具收錄了多個設計系統,包括 Apple 的 iOS、Google 的 Material Design,以及流行的 Ant Design 等等。使用這款工具,你可以迅速應用這些設計系統的預設樣式和變數,從而大幅提高設計效率和一致性。

結語
看完了關於這款秘密武器「Spaciiing」的介紹後,你是否心動了呢?事實上,Spaciing的潛力遠遠超過今天所介紹的範圍。通過組合外掛程式的各種功能,你還可以達成更進階的操作。例如,你可以使用選擇範圍過濾器來一次選取文字圖層,然後進行內容的搜索和替換。

Spaciiing的基本功能是免費、無限期提供的。若想使用進階功能,則需要訂閱月度或年度計劃。月度計劃價格為每月 $4.99(約 NTD 160),而年度計劃則享有額外20%的優惠,最低只需每月 $3.99(約 NTD 129)。如此實惠的價格,便可顯著提升日常設計工作的效率,對於每天使用Figma作為工作工具的人來說,可說是極度划算的選擇。
如果你對訂閱計劃感興趣,可以前往Gumroad頁面進行購買。在商品頁面的下拉選單中選擇你希望的計劃,然後點擊「Subscribe(訂閱)」按鈕進行付款。付款完成後,授權金鑰便會發送到你購買時所填寫的電子信箱中。最後,在外掛程式內輸入這個金鑰,即可啟用訂閱資格。

※Gumroad是一個讓創作者可以輕鬆地銷售數位內容和商品的平台服務商。
RECOMMEND
在北科互動設計研究所讀碩士:我的親身經驗與收穫(第一年)
2024.08.18