【 Mastering the art of crafting code-aligned UI kits 】

在教學過程中，會一直不斷體到「設計系統」一詞，而有這樣的規範系統，可以讓設計師在繪製產品時，不至於因為太多變化而讓產品走歪，以及在與多人協作時，設計師們不會因著自己的習慣，讓畫面有所落差。

而Design System還有一個很重要的任務就是：符合開發的邏輯。

可以想像每一個元件（Component）都是有很多狀態（Status）的，以開發的角度來說，不可能所有元件都寫一次code。做法是「提取其中的變數」來做切換，讓與件可以有不同樣式。

舉例來說，一個按鈕如果有滑鼠移動前、移動後的樣式，那麼設計是應該在設計工具裡先建立好變量，在使用時只要進行切換即可。這跟工程師的邏輯是一樣的，或許是添加css，又許是增減某行code，只要有系統跟歸納，就可以有好的元件結構。

這場Figma演講中，特別提到了設計師與設計系統之間的關聯性，除了要控管各種狀態以外，大小、圖標等等都是變數之一。

也許小小的產品不足以需要這麼大量的設計系統支撐，但有這樣的改念是必要的，當有一天產品需要增長時，越成熟的Design System越能幫助設計與開發的工作效能。

我是Lisa，收收UI / UX 和 Taiwan UI / UX人生設計學創辦人，曾任職平面設計師、網頁前端工程師，最後轉職到自己喜歡職位 – UI / UX Designer，目前也是一位講師，致力於零基礎教學，與協助想轉職的人。

*資料來源：Figma