身為UIUX設計師,開發Figma plugin帶給了我超乎預期的收穫


對我來說,現在的Spaciiing(版本19)才算是真正的完全體。曾經夢寐以求的全能工具,如今終於成為現實。

Figma plugin spaciiing 概念圖

開發Spaciiing的契機

坦白地說,當初開發Spaciiing的契機完全是以自我為中心,想解決自己所遭遇的難題。

當時,我只是位來設計公司實習的新手設計師。每天被交代的工作,大部分都是檢查頁面裡的所有元素,彼此間的間距是否正確。不誇張地說,和動輒上百個以上的frame打交道,完全就是在玩找不同的遊戲。8px 以上的偏差自不用說,但抓出僅僅1px的錯位,可就真的十分考驗耐心與眼力。就算我有再多的時間可以一次次地敲擊鍵盤,土法煉鋼地調整圖層位置,但我更希望能找到一個高效率的方法,好一勞永逸。

恰巧,約莫在那時的幾個月前, Figma推出了設計師社群,允許大家開發並分享plugin 。受到這件事的啟發,我便突發奇想,想到可以開發一個plugin來解決我的困擾。儘管我的程式經驗不多,更不可能有厲害的chatGPT可以依賴,但我就是鐵了心要把plugin做出來。在我的想象中,設定區區幾個圖層的位置應該不會難到哪裡去。更何況,我也不想白白地放走好不容易出現的希望。

經過好幾個晚上的折騰,我終於將第一版plugin做好上架。沒想到,我眼裡的「小勞作」,一上架便收到了來自社群的熱烈反響。自開放下載的那天起,每天都有數百人來嘗試我的plugin,無一例外。如今6000位以上的用戶,有大半都是在這個時期累積起來的。原來,大家或多或少都有著類似的困擾,但卻未曾找到滿意的解法。

spaciiing
第一版上架時所使用的封面圖,plugin介面仍是相當陽春的樣貌。

實驗基地

第一版Spaciiing的大獲成功賦予了我十足的信心。接下來的一年裡,我從設計經驗中發掘出許多具有發展潛力的功能構想,並將它們一一記錄下來。由於這些功能主要是為了滿足個人需求,所以,我沒有將它們加入面向大眾的 Spaciiing,而是選擇在其基礎之上,開發了一個人專用的外掛程式——CY Toolbox。

CY Toolbox 最大的特色,在於它大膽地將不同面向的功能整合在同一個plugin中。即便是現在,這也是相當罕見的做法。雖然受限於技術,我只能將不同的功能模組全都放在同一頁面上,使之看起來就像個複雜的遙控器,但相對地好處則是,省去了頻繁切換plugin的麻煩。如今至少六成以上功能,早在這個時間點便有了初步雛形。

然而,功能繁多也並非沒有代價。當時我的技術不佳,所有的介面、功能都是基於最基礎的html、css、js打造。因此,儘管程式可以正常地執行,但時不時就會跑出不知道打哪來的警告視窗,更不用說程式架構,簡直就是一團糟。關於這方面,由於我暫時沒有周全的解決方法,所以我一直是抱持著得過且過的鴕鳥心態。

Figma plugin CY Toolbox
CY Toolbox開發時的內部截圖。
那時竟然異想天開,替Spaciiing加入了不怎麼必要的本地化,支援繁中、簡中、英、日四種語言。

蛻變

今年,當我自學React以及擁有chatGPT的助力後,我開始思考,現在或許就是徹底解決CY Toolbox痛點的好時機。於是,我開始針對它進行實驗性的改良,如果一切順利,便可將成果移植回Spaciiing之中。這也說明,今年七月大家所看到的Spaciiing改版成果,基本上和CY Toolbox是相同的東西,只不過使用了更加穩定的程式架構以及改善的介面,功能改良反而不是優先目標。

在所有功能中,「屬性剪貼簿」是唯一幾乎沒有修改,就直接移植過來的功能。開發這項功能的初衷,是想要運用「複製貼上」的概念,來解決一個常見的困擾:每次在 Figma 中建立新物件時,都要將預設的尺寸(100×100)手動調整到所需大小的問題。因此,一開始支援複製的屬性中,才會是寬度和高度。

儘管「剪貼簿」是個非常貼切的比喻,但它實際操作起來卻不如我預期中的實用。使用者首先要在「記憶」與「套用」這兩個令人困惑的選項中做選擇,接著還要點選想要影響的屬性,最後才能按下「執行」按鈕。整個過程至少需要六個步驟,非常沒效率。

我希望這項功能能夠支援更多figma的圖層屬性,但若是以現有的架構進行開發,介面就會變得更加冗雜、困惑。最終,在一直沒有更好的想法的情況下,這個功能的改良就這樣被擱置到了現在。也就是說,第19版中引入的全新「屬性剪貼簿」是最後一塊遺落的拼圖。直到現在,Spaciiing的所有功能才好不容易到齊。

Figma plugin spaciiing 功能介紹
重做後的屬性剪貼簿,是Spaciiing的最後一塊拼圖。

如今的Spaciiing,是兩年前的我朝思暮想、渴望擁有的工具。我曾想像它會有個如多啦A夢的「百寶袋」,可以隨時隨地拿出常用的物件(備忘錄、進度標籤等),方便我紀錄進度。最終,這個功能以「捷徑」的形式實現。且得益於記憶式的操作流程,它的支援不限於我自己做的元件,留給使用者廣大的自定義空間;我曾想像它有個像資料庫一樣的介面,可以幫我分類式地記下設計中所用到——使用者的姓名、ID、地址等資訊,並可隨時套用。最終,這個想法成為了如今的「虛擬用戶檔案」。

這些創意、開創性的想法,都是基於我、各位的設計經驗轉變而來。所以我相信,無論你是任何職涯階段、任何角色的設計師,一定都可以從中發現需要、喜愛的功能,它會是你的每天打開Figma時,最強勁、稱手的工具。


雜記

關於功能開發上的理念
在我的眼中,Spaciiing是一個「強化現有編輯器體驗」的工具。因此開發功能時,我特別著重於思考「新功能相對於現有編輯器體驗的優勢」。舉例來說,儘管Figma本身就可以一次性選取多個物件並針對其屬性做編輯,但「屬性剪貼簿」的優勢則是可以選擇性地只貼上需要的屬性。

同時,我傾向於不推出不夠成熟、或是體驗不夠完美的功能。在我的內部清單當中,便有許多功能因為有影響操作效能的顧慮,最終無法推出。

選擇以訂閱模式提供功能的原因
Plugin 的穩定運作和新功能開發需要投入大量且持續的成本。採用訂閱制,使得享受同等專業功能所需的價格,門檻遠比買斷制來得低。這對於使用者來說不僅有利,還使得管理付費期間變得更加彈性。同時,這也確保開發者擁有足夠的資源,持續地維護良好的Plugin使用體驗。

關於Spaciiing的未來
Spaciiing是為設計師而生的工具,因此,持續地觀察設計師群體的需求,評估相應新功能的可行性與必要性會是未來的發展主軸。若您有任何使用回饋,也歡迎您聯絡 contact@hsiehchengyi.com

追蹤我的IG帳號@chengyi_hsieh

我的最新動態都在這裡!

追蹤

RECOMMEND

PROMOTION

全面釋放設計生產力

集結超過10種以上專業工具的Spaciing(Figma plguin),可幫你省下可觀的寶貴時間。

立即購買