鐵人檔案
公司一直沒有 UI Design System，在產品設計上沒有一個規範，導致產品 UI 一致性很差，最近想替公司設計一套 UI Design System，讓公司設計師使用，讓前端工程師根 UI Design System 製作components，想藉由鐵人賽來督促自己，給自己一個挑戰自我的機會。
根據昨天的內容，我們已把 design Token 原理、層級、做法實作了一遍，也完成了color 的 Design Token。今天我們對其他設定的注意事項講...
有時團隊在溝通時，僅靠設計稿討論，會有雞同鴨講或理解錯誤的問題，prototype可以把靜態的設計稿，透過 figma 提供的動畫效果，模擬出實際的互動情境，讓...
UI 設計交付文件大致有流程、規格、互動原型等三項： 流程（flow）：一個功能會由許多的頁面組成，每個頁面會有互動機制，頁面與頁面之間的關係、流程(預期流...
「他山之石，可以攻玉。」在開始設計自己公司的 Design System 之前，總要看看人家怎麼做？有什麼地方是我們可以學習的對吧？今天我們就來解析市場上很有名...
在上一篇裡我們有提到 Ant Design 是基於 React 前端框架的 UI Library、UI 框架，但並不是每一個公司或產品都有用到前端框架，那怎麼...
種子期： 公司的產品都是以 table／tr／td 排版，因應客戶開始要求版面的設計，才漸漸轉型引入 UI 設計，但是引入 UI 設計概念初期，公司的 PM 及...
元件整併： 經過昨天的 UI 元件收集，發現每一個 UI 元件都有多種設計，沒有一致性，今天我們把收集的 UI 元件做一整併，每一個 UI 元件僅採用一種設計，...
UI 的組成順序：原子 → 分子 → 組織 → 模板 → 頁面。 在上一篇已經把 UI 元件做了分類，再來就要依據 UI 的組成順序組裝起來，我們選擇最常被使用...
我們在顏色的定義上，包括了主題色、中性色、功能色、衍生色等等。 主題色（主色系）： 在 Antd 裡面稱之為品牌色，也就是整個產品的主色系（例：綠色系、藍色系）...
typography 要定義的內容大致上有：字體（font family）、字級（font size）、字重（font weight）、行高（line heig...
