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

Published in

設計丸物製

Sep 5, 2023

近期經常和大家交流到設計系統(Design System)是什麼以及怎麼做，剛好在去年的專案服務是打造出一套設計系統(Design System)，因此本篇想藉由黃金圈（Golden Circle）的結構來拆解和紀錄這趟專案歷程。

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

前言

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

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

在這次的專案任務歷程分享，我以黃金圈（Golden Circle）的結構，以甲方（OurSong）產品的設計系統為例來梳理設計系統（Design System）的核心價值和目標，分享設計系統（Design System）為什麼做？如何做？做些什麼？

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

Part.01 Why 為什麼 ❯❯

設計一個產品的設計系統的目的是什麼？

圖片來源：截圖至 Figma Community 搜尋設計系統 ( Design System ) 結果頁面

近期可以看到有許多大廠開源的設計系統釋出，很多網頁或是社群經營者也會佛系收藏的整理清單，在 Figma Community 上也可以看到許多各式案例。不少人討論到既然有這麼多資源，也可以在 Figma 直接複製檔案來免費使用，為什麼還要再透過團隊開發資源來反覆迭代討論呢？

讓我先來分享一些與開發端協作上的對話情境：

上面的對話你是否覺得熟悉？在你的工作場域也有類似的討論嗎？

這些日常的團隊協作痛點，我們可以透過設計系統來優化。一個好的設計系統可以帶領團隊每位成員，活用這些通用情境 UI 模組有效地打造產品。在豐富地裝置載體時代中，我們可以透過重複使用、出現來維持一致性，同時也能大大地提升協作效率。

這裡放顆例子🌰🌰🌰

試著想像您是一名開發者，哪一邊的設計稿和參數值，最能讓您快速知道按鈕的尺寸？

圖片來源：截圖彙整與甲方（ OurSong ）協作的設計系統（ Design System ）按鈕元件

觀察右側的 Figma 稿件，可以從按鈕元件的名稱和外觀參數，使我們能夠迅速辨識出它是一個特定的通用 UI 元件。

將元件的設計、功能和命名標準化，從而確保我們在設計和開發過程中能夠更加迅速地理解元件的應用和名稱分類。

如果設計師能夠將元件（Component）進行模組化、制定規範並進行完善地命名設定，這將有助於開發團隊協作者明確地了解每個元件的功能。此外，也能使設計師在多人協作同一產品時，更容易記得在不同情境下該使用哪個尺寸的按鈕。

此例子僅止於設計元件（ Design Component ）一環，若想進一步瞭解這個按鈕元件的設計規範，只需按下右鍵然後回到該按鈕的母元件檔案，也就是設計系統（Design System）規範檔案查看。團隊便能得到關於這個元件的詳細設計指引，包括大小、間距、字型、使用場景等，確保我們能夠快速獲取詳細的設計資訊，進而確保使用元件時的一致性和效率，這樣的做法也能讓設計團隊更專注於創造性的工作。

透過與開發團隊共同打造設計系統（Design System），我們不僅在協作過程中建立了一個共通的語言，更確保產品介面在視覺和使用體驗上保持一致。這有助於減少設計和開發之間的邏輯差異，拉近兩者之間的溝通與理解，整個產品團隊也更加緊密合作。透過建立透明且清晰的框架設定，我們有效地降低了協作的成本，讓設計和開發過程更加流暢。