開始前端的工作之後接觸了各種設計框架，從 material-ui, react-element 到 ant-design，每個都有各自的程式風格，出發點以及設計的方向不一樣，有的為我們做的事情太多，有的樣式包得太多層，又有的參數多到有點擾亂視聽。

所以這次鐵人賽30天中，我想要整理一些自己這段時間內使用的框架心得，及建立一個簡單的 Design System，從無到有跑一遍，以期未來在建立新系統的時候可以依循，依照不同的專案需求快速建立新的系統。

在接下來的 30 天我將會以 React.js 為基礎建立一個 Design System。

使用過的 React 設計系統

工作期間常用到的設計系統，我也會一一簡述並分享使用時遇到的狀況，以及使用經驗。

1. Material-UI
2. Ant-Design
3. React-Element

設計原則

我希望可以建立在以下幾個原則做開發：

1. 不要複雜：太多的客製化就留給使用者自己處理。
2. 較少的參數：盡量簡化及扁平化，讓透明度提高。
3. 做一個好人：心地善良，友善程式。

將要做的事

1. 以建立一個後台系統為開發方向
2. 建立 Deisgn Guideline(參考如下)
3. 規劃並建立組件(參考如下)
4. 建立線上 storybook
5. 發布 package
6. 自己用用看（?

Design Guideline

• Day 04 如何設計，如何開始
• Day 05 整理 Design Guidleine 的基本項目
• Day 06 建立主题物件

技術相關

• Day 07 從 Create React App 建立 Package 專案
• Day 09 選擇使用 React-jss 或是 Styled-jss

一般項目 General Components

• 按鈕 Button - Day 10 實作 Button 與切換樣式
• 圖標 Icon - Day 14 建立 Icon
• 文字 Typography - Day 20 建立 文字 與 Message

佈局 Layout

• 隔線系統 Grid System - Day 13 建立 Grid System
• 佈局 Layout - Day 15 建立 Layout
• media query breakpoint

導覽 Navigation

• 麵包屑 Breadcrumb
• 側邊欄 Menu - Day 21 建立 MenuItem
• 分頁 Pagnination - Day 18 建立 Pagination
• 步驟 Step

表單系統 Form

• 文字輸入框 Text Input
• 勾選 Checkbox
• 單選 Radio
• 下拉選單 Select
• 日期選擇 DatePicker
• 開關 Switch

資料顯示 Data Display

• 卡片 Card - Day 16 建立 Card
• 表格 Table - Day 17 建立 Table

使用回饋 Feedback

• 警示 Alert - Day 22 建立 Alert
• 彈窗 Dialog - Day 19 建立 Dialog
• 提示信息 Message - Day 20 建立 文字 與 Message

建立Storybook

• Day 11 建立 Storybook
• Day 12 設置你的 storybook

小結

主要目的是在這30天中跑一輪流程，為自己未來的UI開發建立基礎，當有新的專案時，可以快速建立一個畫面，縮短開發時間並讓設計可以依循。