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

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

Published in

設計丸物製

9 min readSep 19, 2023

最終回！黃金圈的 What 做些什麼？此次設計系統包括哪些具體內容和元件？將會以什麼形式應用在團隊中？

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

前言

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

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

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

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

What ❯❯

設計系統包括哪些具體內容和元件？將會以什麼形式應用在團隊中？

設計系統（Design System）是一個包含多種元件的指南集合，確保設計在各種情境下保持一致性、有效性和可擴展性。以下舉例常見的基本內容和元件框架：

➊ 基本元件
包括按鈕、文字樣式、顏色、圖標、表格、輸入框等基本元素，這些元素通常在整個產品中反覆使用。

➋ 佈局和結構
定義頁面結構、網格系統、間距、尺寸等。

➌ 元素和模式
定義特定的界面元素和設計模式，如卡片、導航、表單等，以確保在整個應用中的使用一致。

➍ 元件庫
這是設計系統的核心，包含高度可重用的 UI 元件，如頭部、導航欄、側邊欄、卡片等。這些元件可根據需要進行擴展和調整。

上述為簡易的基礎框架，在設計系統（Design System）的建立過程中，內容的詳細程度和特殊元件的制定將根據團隊的需求而有所調整。

🌰🌰🌰以下是三個實際的例子：

🌰 例子一：NFT 資訊卡片

圖片來源：截圖於甲方（ OurSong ）協作的設計系統（ Design System ）NFT 資訊卡片

在甲方的平台上，NFT 的展示極為重要，扮演了整個體驗的關鍵角色。首先，我們需要與甲方明確梳理出卡片需要展示的哪些資訊，以便為用戶提供足夠的資訊，使其能順暢完成瀏覽、購買，或進行再創作（Remix）等操作行為。在我們的討論中，我們確定了 NFT 卡片需要包含 NFT 的名稱、創作者名稱、是否可再創作（Remixable）、播放和購買的按鈕等資訊內容。

同時，需要思考慮圖片的尺寸比例，在此版本中使用 1:1 的尺寸比例，以確保圖片在卡片上的呈現不會出現變形。另外，也需要考量到一些特殊情況，例如：NFT 尚未上傳圖片時的狀態，以及標題行數極大值的佈局。

🌰 例子二：頭像下拉式選單

圖片來源：截圖於甲方（ OurSong ）協作的設計系統（ Design System ）頭像下拉式選單

創作者資訊亦是甲方平台上非常重要的展示，不僅可以促進平台的互動，還能給予更多的創作者更多重要的機會。為了將創作者資訊更好地整合到平台中，我們決定創建一個下拉式選單的設計元件（ Design Component ），使其能夠迅速應用於各個頁面，同時保持一致性。

Figma 的變體切換功能能夠幫助設計師在不同情境下快速創建變體，而這裡決定將頭像下拉式選單作為單一母元件，是個人協作上的小小心得是特定的設計元素可能在某些情況下適用，而在其他情況下則不適用，以及頁面上出現的使用頻率。再來減少元件變體的設定複雜性，亦能幫助到協作者們在第一時間應用於頁面的便利性，因此根據實際情況，考慮如何分類使用變體，以確保設計的一致性和適用性亦是打造設計系統（Design System）非常重要的一環。

🌰 例子三：幣別下拉式選單

圖片來源：截圖於甲方（ OurSong ）協作的設計系統（ Design System ）幣別下拉式選單

在甲方的 NFT 平台中，有一個情境為：用戶需要在區塊鏈的網絡中，為甲方有串接的幣種，並且選擇適合自己的交易選項。在與團隊討論後，決定將幣別和區塊鏈名稱資訊的下拉式選單獨立出來，避免變體太複雜。同時，在設計上考量用戶能夠清楚地識別每個幣種，以及幣種與區塊鏈名稱之間的關聯性。

這些細節的確定將有助於我們建立一個具有一致性和優良用戶體驗，並確保它能夠融入頁面佈局之中。

建置一個具有各種元件的設計系統只是開始，再來是依據產品特性拓展出自己的設計元件，最後是實際將這些元素應用於產品並持續進行迭代和維運，才是團隊的最終目標。最後分享一下我關於打造設計系統（Design System）的三個小結語：

➊ 維護設計系統的透明性
在設計系統（Design System）的使用關鍵是透明，所謂的透明就是實實在在地讓每個團隊成員都能夠清楚地理解系統中的元件和樣式，以及它們如何與產品相關聯。這可以藉由文檔、指南、甚至是培訓來實現，當所有人都明確了解設計系統的運作方式時，新增元件的過程將變得更加順暢，同時能夠確保設計和產品之間的一致性。

➋ 開放的心態持續迭代和維護
產品開發是一個滾動式調整的動態過程，隨著需求的變化和用戶反饋的積累，我們需要不斷調整和優化。新增元件也是如此，我們應該保持開放的心態，隨時根據新需求進行調整。為了確保每個新增的元件都能無縫地融入系統中，持續的測試和反饋很重要。

➌ 透過定期會議保持協緊密度
定期舉行會議是確保設計和開發團隊之間密切合作的有效方法，在這些會議中，我們可以討論新的元件需求，以及如何最好地將它們集成到設計系統中。這不僅有助於確保設計師和開發人員的一致性，還能夠早早地解決可能出現的問題。

總之，建立一個成功的設計系統需要持續的努力和協作，不僅需要將設計元素建立起來，更重要的是將它們運用於實際的產品中，並持續進行迭代和維護。這其中，瞭解設計規範和保持透明的溝通是關鍵。通過這些步驟，我們能夠確保設計系統能夠有效地支持我們的產品開發，同時確保設計和開發團隊之間的協同合作。

當然除了工具的輔助，我們也要不斷學習和理解介面設計的相關知識，但並不需要深入程式開發。了解基本原則，比如尺寸和規範，基本上足以幫助我們進行更實用且可實現的設計。設計不僅關注信息的呈現，還注重將創作者與用戶的互動行為融合在一起，以實現更加豐富和有價值的用戶體驗。

📽 同場加映《協作小心得卷》

在協作上和工程師（Engineer）遇到挑戰或是忿忿不平嗎？或是還在思考要學程式編碼？或是你正要建置一份設計系統導入團隊？

但是反問自己，在設計數位產品前，不論是 APP 還是網頁，對開發框架的了解度有多少？開發框架可以從裝置載體的螢幕規範、Mac / Windows系統的呈現和交互…到一個按鈕的設計元件。

將對於資訊或技能的恐慌先放一邊，一步步從尺寸裝置和固定規範的角度出發，也別驚慌失措地擔心自己不會編碼這項技能。其實這一個過程就好比我們在做視覺輸出物時遵循印刷規則一樣。我們透過他人經驗或網路查詢知道不能用 RGB 當作 CMYK 進行印刷、影印機無法印滿版而進行調整，逐漸了解和確保設計落實的可行性，而我們也不用完全了解一條影印機的所有設定和功能原理。