透過 Figma 實現設計與開發的設計系統(Design System) —Part.02 How

透過 Figma 實現設計與開發的協同設計系統(Design System)— Part.02 How

Published in

設計丸物製

10 min readSep 15, 2023

上一篇分享黃金圈（Golden Circle）的為什麼做？這一篇將講述設計師採取什麼策略和方法來實現上述目標？以甲方（OurSong）產品的設計系統為例來梳理設計系統（Design System）的核心價值和目標，分享設計系統（Design System）為例

嗨，大家好！我是設計探索者 Erina 🙌🏻
在顧問公司擔任產品設計師時，有幸參與了各種不同類型的專案，並希望透過這些寶貴的經驗來記錄和分享我的成長歷程。作為一位設計師，我深刻體會到設計的影響力，並樂於在團隊與客戶間合作，在時程內一同快速迭代產品並不斷優化。
每個專案的結束進行復盤有助於更好地成長，並在未來的專案中做得更好。期待著未來的挑戰和學習機會，並持續致力於設計領域的成長與創新。

前言

設計系統（Design System）是一個持續受到廣泛關注的話題，可以觀察到許多企業或團隊正在建置和導入設計系統（Design System）。

在此想和閱讀文章的你分享，我在 2022 年 12 月份，一個月內遠端進駐甲方團隊發揮敏捷設計的影響力與協作節奏，為區塊鏈平台一同打造數位產品的設計系統（Design System）。

在這次的挑戰上，我以黃金圈（Golden Circle）的概念，以甲方（OurSong）產品的設計系統為例來梳理設計系統（Design System）的核心價值和目標，分享設計系統（Design System）為什麼做？如何做？做些什麼？

此刻，讓我們進入正題！這篇文章要分享的是：
📌 設計與技術的交匯：透過 Figma 實現設計與開發的協同設計系統(Design System) — Part.02 How

How ❯❯

採取什麼策略和方法來實現上述目標？

以下是我在執行甲方專屬的設計系統（Design System）到團隊開發中的過程和思考：

〈架構面〉

甲方所使用的開發框架基於 Bootstrap，剛好我在大學時有學一些程式基礎，能夠勉強閱讀相關文件。在這種情況下，我嘗試將程式的邏輯與設計元件盡可能地在我們的設計系統中保持同步，以找出一種能夠在整個團隊間建立共同理解的溝通語言。

這裡放顆例子🌰🌰🌰

圖片來源：左為截圖於 Boostrap 網站，右為截圖於甲方協作的設計系統 (Design System) 重點畫面

此份設計系統（Design System）從整體的頁面結構一直到微小的狀態命名，都與開發者保持了密切的協作溝通語言，建立了共同的溝通語言。但也不是盲目地套用 Boostrap 的設計元素，而是深入了解其分類和構成邏輯，並在轉化和融合的過程中加入了甲方產品的識別調性和特點。舉例來說，我們進行了主要按鈕的色票置換，重新調整了左側頁面的排列順序，以符合產品的識別特色和需求一致性。

在這個設計系統的建立過程中，我們確保求取變化的過程中，有相對的來由和依據。這也需要我們與開發者密切合作，進行討論和協調，確保每個團隊成員都能夠理解並運用設計系統手冊中的內容。這種合作和共識確保了設計系統的有效性和實用性，並最終促進了更流暢的產品開發過程。

〈工具面〉

恰好甲方使用的工具是 Figma，而其設定和 Component Code 的操作功能加成之下，不僅在 UI 設計方面有了更高效率，也在理解程式端開發框架以及善用設定上取得了進步，最終使得協作溝通更加有效。

首先，在 UI 設計方面，Figma 提供了直觀且強大的介面，讓我能夠更輕鬆地將創意轉化為視覺元素。其豐富的工具和元件庫加速繪製出各種 UI 元素的過程，從而節省了大量的時間。不但可以輕鬆地創建和編輯設計元件，也能在整個項目中重複使用，確保一致性和效率。此外，Figma 的即時協作功能使團隊成員之間實時協作，進行快速的設計迭代和反饋，進一步優化 UI 設計。

其次，透過 Figma，我開始更深入地理解程式端的開發框架，Figma 的 Component Code 功能使我能夠直接瞭解設計元件轉化為程式碼的過程，從而將設計和開發之間的鴻溝縮小。這種了解使我能夠更好地與開發團隊合作，更準確地傳達設計意圖，並理解技術限制，從而在設計階段就能夠考慮到實現的可行性。

最後，我通過 Figma 學會了善用設定以實現更有效的溝通協作，在設計中添加註釋和互動元素，解釋設計的細節和交互行為，讓開發團隊更清晰地理解我的設計意圖。我還可以透過原型功能創建互動原型，模擬使用者體驗，從而幫助整個團隊對產品的功能和流程有更深刻的理解。

總之，Figma 不僅是一個友善又好用的 UI 設計工具，也成為我在 UI 設計、程式開發理解和協作溝通方面的重要助力。它幫助我更高效地實現設計理念，更好地協作開發團隊，進而提升了我在產品設計領域的綜合能力。

這裡放更多顆例子🌰🌰🌰
接下來我想用幾個工具應用舉例 Figma 幫助我更容易上手規範和邏輯：

🌰 例子一：基本樣式（Local Style ）

命名與設定好顏色，不但不需要將色票全部背下來，亦有助於選色效率，避選錯代碼顏色。同時也能和原生程式框架套用顏色邏輯對齊，讓開發者準確理解元件的顏色設定，從而減少後續的溝通成本。對於設計師在執行各頁面設計稿時，假設可以透過色票的色碼更改設定，便能一次在稿件內連動變化，不需要一個個編輯修正。

透過「Local Styles」的機能，我們可以更有效地處理顏色設定。這種做法不僅省去了需要記憶所有色票的麻煩，同時也能提高選色效率，避免選用錯誤的程式碼顏色。同時，這種作法也能確保我們的顏色邏輯與原生程式框架相一致，讓開發者能夠更準確地理解元件的顏色設定，進而減少後續的溝通成本。特別是對於設計師來說，在執行各頁面設計稿時，假如能透過色票的色碼更改設定，便能在稿件內一次性地連動所有相關變化。

值得注意的是，由於此設計系統建立之際，尚未納入今年所推出的「Local variables」功能。有關這方面的更多資訊，有興趣的讀者可以在網絡上找到相關教學，按步驟操作，便能實現「Design Tokens」的應用，同時提升設計效率，例如在亮暗色的設計稿之間快速切換。

🌰 例子二：自動佈局（ Auto Layout）

以上面的圖示為例，想像一下，你正在設計一個的表單，裡面有各種標題和輸入框。每當想新增一個標題和輸入框，是一步步調整它們的位置、間距，然後確保每個元件的像素對齊，以免讓開發者面露困惑表情嗎？

這時候我們可以善用 Figma 工具裡的自動佈局（Auto Layout），把這些元件放進一個自動佈局（Auto Layout）容器裡，然後設定它們之間的間距，它就會自動幫你處理一切。確保同一個容器裡的元件都是保持等距，就算你後來決定把某個元件的高度調整一下，相鄰的元件也會隨之自動調整，不再需要你手動一個一個搞定。

此外，也可以透過自動佈局（ Auto Layout）的設定，安心地自動等距擴充新的標題和輸入框元件，不但可以避免不小心移動到，或者發生沒有檢查到造成 PX 數值不一，讓開發者一臉矇，亦能幫助我們加速製作設計稿。減少設計稿的出入，也能夠避免實際開發畫面不同，整體可以說是對團隊提升大大的效率。

整體不僅是為了避免瑣碎的調整，當我們在迅速嘗試不同的排列方式，新增元件、刪除元件，不必擔心整個排版會變得一團糟。更重要的是，它幫助你減少了人為錯誤的可能性，確保了像素級的精準度，確保在開發過程中每個元件的排列都是一致的，不會再出現「這個設計稿上的和實際畫面怎麼不一樣」的尷尬情況。

善用這些功能，能使我們更輕鬆、迅速地設計介面，減少了人為出錯的可能性，提升整個團隊的效率。

🌰 例子三：元件（Component）

透過 Figma 的元件（Component）和屬性（Properties）功能，我們能夠以更具彈性且高效的方式構建設計元素，讓設計過程變得更加有組織和容易管理。對於那些反覆使用的 UI 元件，我們能夠以所謂的「原子概念」為基礎，使其更具可變性，同時以更模組化的方式來編輯。

想像一下，無論我們在設計的哪個頁面，都能夠輕鬆地將需要的元件拉入，這些子元件將保持與母元件的同步。這意味著，任何對母元件的修改都會自動應用到所有子元件，從而確保一致性，並省去了手動調整的繁瑣。

圖片來源：左為截圖於甲方協作的設計系統 (Design System) ，右為截圖於 LCG 的設計系統 (Design System)

關於如何實現這一點，網上的教學資源數不勝數在此不贅述。比較想分享的深刻體驗是，不同的設計指南和規範書，展現了豐富多樣的元件組織方式。就像你所看到的圖片所示，左邊和右邊呈現出兩種截然不同的設計風格和組織架構，這充分表明並不存在一種絕對的優勢。無論我們遵循傳統指南，還是探索嶄新的設計概念，關鍵在於團隊的溝通，無論你今天如何設計和歸納元件屬性框架，都應該確保每個成員都了解這種元件和屬性的設計方式，這樣才能確保設計和開發的一致性。好比設計的風格一樣，不同的企業、產品都有自己獨特的視覺語言，當然也會有不同的元件收納方式，讓團隊根據自己的需求和風格來選擇最適合的方式。