鐵人檔案
公司一直沒有 UI Design System，在產品設計上沒有一個規範，導致產品 UI 一致性很差，最近想替公司設計一套 UI Design System，讓公司設計師使用，讓前端工程師根 UI Design System 製作components，想藉由鐵人賽來督促自己，給自己一個挑戰自我的機會。
緣起：公司一直沒有 Design System，在產品設計上沒有一個規範，導致產品 UI 一致性很差，常常被客戶說「介面很醜」，這對設計師而言是很重的打擊（大人...
如果是第一次接觸「Design System」的捧油，可能會很陌生甚至一頭霧水，來～別怕，讓我們從頭開始。 Design System 是什麼 ？ 理論解：De...
工欲善其事，必先利其器，在開始設計 Design System 之前，我們先來了解好用的工具：figma，這也是目前市場上的主流工具，從本篇開始，會一連有數天的...
figma 在 2024下半年針對操作介面做了不少改動，讓我們來看看 標題列：上方標題列把工具移走了，僅留下：home、community、目前開啟的檔案名...
在進入 shared style 之前，我們先來認識三個東西，Group、Frame、Section。 Group（群組）：畫好的物件可以依據其屬性做群組，...
Auto layout （自動布局） 現在做網站不太可能 PC only，都是要跨裝置呈現網站內容，也就是在不同裝置、不同大小螢幕上的 UI 佈局要彈性化，自動...
什麼是 component（組件）呢？它就像樂高玩具裡面一個個組好的零組件。舉個例子：如果你想組一個辛巴（獅子王），當你把買回來的樂高盒子打開，就會看到大量...
variant（變體）是比 component 更進階的 UI 元件，component 只有三種屬性，variant 可以有更多的變化，可以加入不同的「樣式」...
variable（變數）：如果跟軟體工程師講到 variable ，應該是「無人不知，無人不曉」吧？ variable 在工程開發上已經是「基本標配」，但是應用...
Design Token 是一個很抽象的概念，Token 中文翻譯成「令牌、代幣」，在這裡我們可以把它想像成是一個「標記、代碼」，例如：text-primary...
