Spaciiing：提升設計效率的多合一Figma plugin

2022年，我從實習期間頻繁遇到的重複性軟體操作中獲得靈感，開發了基於8pt grid system快速調整圖層間距的Figma Plugin——Spaciiing。這個工具不僅大幅提升了我的設計效率，上架至官方社群後，也獲得了來自世界各地設計師的廣泛好評。

初版發布後，我持續在私有版本中根據個人需求擴充新功能。然而，由於當時我的開發知識有限，所以在功能不斷增加的同時，程式碼也漸漸變得難以維護。直到2024年，我才終於學會React，並利用它重新架構了整個系統與使用介面，然後將成果以版本更新的形式向公眾發布。至到現在，我仍持續地透過競品分析與用戶回饋，改善這個工具。

※ 本作品為個人專案。

※ 專案製作期間：2022年7月～至今。

初版Plugin的誕生

2022年，那時的我正在一間設計公司實習。實習期間，每天最常被交辦的任務，就是檢查設計稿中各個圖層是否對齊，確保其符合8pt grid system規範。

這項檢查工作表面上看似簡單，但實際執行起來卻相當費力、耗神。原因在於，圖層之間那小至僅1px的誤差根本無法靠肉眼辨識，只能逐一手動確認。因此，為了有效地提升工作效率、減少重複性操作，我結合自己的設計與開發能力，開發了一款小工具——Spaciiing。只要利用它，就能一鍵依照指定的方向，自動基於8pt grid system排列選中圖層的間距。

工具完成後，原本耗時的檢查工作就如預期地變得輕鬆許多。同時，我也將Spaciiing上架至Figma官方社群，與全球設計師分享這項成果。但出乎我意料的是，工具上架不久便獲得廣大迴響，吸引了兩千多人下載使用。我才發現，原來我誤打誤撞地，做出了大家很需要，但市面上卻還沒有的小工具。

持續擴充功能的私用版

有了開發 Plugin 的成功經驗後，我開始回顧自己在日常工作中常用的重複性操作，如法炮製地將這些流程轉化為可重複使用的功能模組。每完成一個功能，我便將其整合進私用版的 Spaciiing中。

當時，我沒有選擇常見的做法——為每項功能個別開發獨立 Plugin，而是統一整合於同一個 Plugin 內。這樣的設計考量，主要是為了降低操作時的認知負擔：不需要記住多個 Plugin 的名稱，也避免了在不同 Plugin 間頻繁切換的干擾。此外，沒有選擇公開發佈這些功能的原因則是，多數功能都是實驗性質、只為我一人服務、且有很高的不穩定性。所以出於使用者體驗上的考量，我沒有公開推出這些功能。

隨著功能越來越多，在帶來便利的同時也引入了一個新的問題：程式碼架構變得龐大又複雜，而我的開發能力又有限，所以維護起來越來越困難。

重構後的新生Spaciiing

2024年，以製作另一個作品「Zica」為契機，我學會使用React語言。React在管理複雜HTML/CSS/JS上的優勢，讓我看見將其應用於重構Spaciiing上的可能性。因此，我很快地開始了這項重構作業，並於7月時以版本更新的形式在公開版推出。

使用者體驗、介面設計上的考慮

在著手重構之前，我回顧了自己過去使用各種figma plugin的經驗。儘管這些插件多半能提供我當下所需的功能，但它們在介面與設計語言上各自為政，與figma原生UI差異極大，導致我經常需要額外花時間去摸索與理解。從使用者角度來看，若僅為了使用一個功能有限的插件，就必須學習一套全新的操作邏輯，這樣的成本顯然不成比例。

因此，在重新設計Spaciiing的介面時，我便明確地選擇採用figma原生設計系統作為基礎，無論是元件樣式、間距邏輯還是互動行為，都力求與使用者熟悉的操作體驗保持一致。這樣的設計策略，讓使用者幾乎不需要額外學習，就能自然地理解並操作這款工具，達到「開箱即用」。

功能開發上的考慮

我始終認為，軟體開發不是一次性的任務，而是一段長期且持續演進的過程。因此，即便重構版本已經上線，我仍持續觀察實際使用情境中體驗不佳、或功能侷限性過大的模組，並針對這些環節進行改進與優化。

以「屬性剪貼簿」這個模組為例，最初的設計靈感來自我在設計 App 介面時的一個反覆發生的痛點——Figma 預設建立的frame尺寸為100×100，而每次建立新frame時都需手動調整。這不僅流程繁瑣，還要反覆記住具體寬高值，極不直覺。因此，這項功能模組誕生之初，才會以「複製/套用指定尺寸至Frame」為中心規劃，並一直從私用版保留到重構版裡。

然而，從產品功能性的角度來看，只能調整 Frame 尺寸的應用情境無疑過於狹窄。所以，我保留了核心的「複製->貼上」互動邏輯，並將其應用範圍從「尺寸」擴充到「所有類型的屬性」（如顏色、圓角、描邊等），可套用對象也從單一的frame擴展至所有類型的圖層。這樣的設計不僅保持了原有的直覺操作方式，也大幅提高了該模組的彈性。

另一個例子是「Spaciiing」。作為歷史最悠久的功能模組，最早我規劃了固定的間距數列，供使用者快速地選取想設定的間距；後續，我又增加了「倍率」數列，藉由數字相乘來提供使用者更多的數值選項。這樣的加法式設計，是當時開發能力不足的背景下做的妥協。

這個介面中，隱含了數個易用性問題：

1. 「倍率」這個邏輯本身就不常見，雖然相乘後的結果會直接在介面上顯示（如：2×8=16），但這仍造成使用者額外的認知負荷。
2. 在間距數列中，最左的「0」和最右的「自訂」選項無法被倍率影響，卻持續地佔用數列空間，造成了空間上的浪費。
3. 在數列與倍率的相乘結果中，有無數個重疊的選項（如：1×24, 3×8），同樣造成了空間浪費，使得數值的覆蓋範圍不夠全面。

因此，為了改善這些問題，我捨棄了倍率邏輯，並將所有間距數值全數列出，以鍵盤式佈局簡化多選項帶來的複雜視覺感受。這個鍵盤元件是客製化製作，其介面、互動邏輯皆是得益於React才有辦法完成，也因此這項改善才會在plugin上架3年後才推出。

改良後，間距數值能夠覆蓋所有常用的8pt grid system間距選項，同時在排列上也有一定的邏輯——小區塊的常用間距位於第一行，中/大區塊的常用間距則位於第二行，大幅地提升了使用體驗。

情感設計上的考慮

在Spaciiing中，有一個我特別喜歡的功能，叫做「設計效率儀表板」。這個功能的靈感，是來自於某天我的靈機一動：「既然Spaciiing的核心價值是幫助使用者省下重複操作的力氣，那何不讓這些『被節省下來的努力』變得可視化？」

於是，我開始記錄在不使用 Spaciiing 的情況下，完成特定操作所需的滑鼠點擊次數，並將這些數據整理為計算公式。接著，我將數值與銅、銀、金等不同等級的「成就徽章」做結合。每當使用者打開儀表板，看到自己已經省下了數百、甚至上千次滑鼠點擊時，就會產生強烈的成就感，進而更有意願持續使用這款工具。

從設計角度來說，這應用了名為遊戲化設計（Gamification）的策略。它既賦予使用者強烈且正面的情感感受，同時呼應了產品的核心價值，又無形中提升了用戶的參與度與黏著度。

功能亮點

Spaciiing：基於8pt grid system調整圖層間距

這是plugin上最早出現的功能。除了一開始的水平、垂直排列模式外，後續也追加了格線排列模式。同時，介面設計上也由早期的數列排布變為如今的鍵盤式排布，提供更全面的預設數值選項。

畫箭頭：輕鬆在Figma內繪製流程圖

這項功能可以協助使用者在物件之間繪製箭頭，用來建立流程圖。與其他競品的外掛程式相比，我的版本具備一項關鍵優勢：能夠一次連接多個圖層，而不需要像其他產品那樣逐一手動連接每個物件，有著極大的操作便利優勢。

屬性剪貼簿：複製、貼上單一的屬性

顧名思義，這項功能可以讓使用者指定欲複製的物件，然後針對其他圖層，貼上單一的屬性（如：寬度、高度、圓角等）。儘管Figma軟體內有類似的原生功能，但它只能一次性貼上所有屬性，無法單獨貼上。

型錄：自動化建立設計文件

我觀察到，世界各地的設計師們往往會不約而同地將所使用的 Styles 和 Variables 屬性整理成一個外觀近似文件的 frame，作為設計過程中快速查閱的工具，或用於設計交付時的說明文件。因此，這項功能的設計目的，就是為了自動化這個整理流程，減少重複操作，提升效率。

篩選圖層：按照類型做篩選

在大型設計專案中，設計稿往往層層堆疊，圖層彼此包覆。當設計師需要選取內層物件進行修改時，操作起來非常困難。因此，這項功能的設計初衷，就是讓使用者能夠先自由地框選一個範圍，接著透過圖層的類型或名稱進行篩選，快速找到並一次性調整所需的圖層，提升編輯效率。

其他功能

除了上述的幾個主打功能外，Spaciiing還有許多同樣很實用的功能。例如：

• 快速調整圖層為特定的寬高比例
• 使用JSON格式建立Variables（以程式碼一次性建立Variables，比使用原生UI還更加快速）
• 清理圖層名稱
• 尋找與取代文字內容
• 建立Icon模板
• 等等

反思與成長

歷經三年的設計與開發，Spaciiing 從一個「為了解決自己問題而生的工具」，逐漸蛻變為一款「面向大眾的設計解決方案」。這樣的轉變，帶來的最大挑戰在於——設計的對象不再只是我自己，而是來自世界各地、使用情境各異的眾多設計師們。這促使我必須跳脫原本以自我為中心的設計視角，回頭去檢視每一個功能模組的核心邏輯，並透過拆解、重構與抽象化的方式，讓功能更具通用性與延展性，能夠真正服務更廣泛的使用者群體。

正因為是設計一款可用空間有限的「工具」，所以我在介面設計上始終不斷地在「簡潔性」與「功能性」之間猶豫：如果設計功能完整的介面，它不可免地就會顯得複雜、上手難度高；反之，若簡化介面以討好新手用戶，雖然能夠保證長期用戶人數成長，卻會犧牲進階用戶的操作流暢度。因此，在這樣的兩難之間尋找平衡，成為我規劃每個新功能時不變的目標。

長期的設計與維護經驗，大幅提升了我在前端模組化設計與系統性思考上的能力。這不只是技術上的學習，更是對「產品設計是一個不斷演進的過程」的深刻體悟。未來，我會持續運用 UX 研究的方法，主動追蹤用戶需求與使用行為，讓 Spaciiing 的設計與開發能更有策略、更具延續性地推進。

下載plugin：https://www.figma.com/community/plugin/1129646367083296027