上篇-Gallery.io 與Material Design的使用-設計師篇
下篇-Gallery.io 與Material Design的使用-前端開發篇
筆者工作多年從一個網頁設計師出發的角色到前端工程師，
剛好接受 GDG Taichung 社群邀約，Gallery.io與Material Design for web的應用實作分享，這篇將以設計師與工程師不同的面向來帶領大家了解
目錄
- 設計師與前端工程師溝通有障礙？
- Material Studies
- Sketch 載入Material套件
- Gallery.io是什麼
- 怎麼利用Material工具做自己設計？
設計師與前端工程師溝通有障礙？
工程師怒：設計師設計稿，天馬行空的設計每次都不一樣讓人痛不欲生
設計師哭：工程師常說你不要設計讓人難做的東西，但好做的東西是什麼？
以上的問題，若要說說個三天三夜也說不完，跨行如隔山，
真的要讓對方理解也不是這麼容易的事
在開發Developer的角度，會希望我能用同一套UI框架建構，這樣才能讓開發的速度能夠更快更好，而且少去很多的從零建置的痛苦
但，如果自己建造自己的Design system與UI Components，可說是耗費的功力與時間是10倍以上，重點是，雙方協作溝通也會常常有認知誤差，耗時費力的成果還不見得好
Material Studies
在google在Google I/O 2018大會 Material Design發表中，一再強調可以在前端框架Material Design 的Design system結構下“可具有彈性客製化”自己的風格的設計，此Design system也應用在google自家各個特色產
設計風格可以一致，但又必須有其個別產品項目的特色
官方在Material Studies 設計了很多示範theme設計，其中有幾個範例設計原始檔是可以套過Material Plugin下載的
Sketch 載入Material套件
如何使用Material組件做自己風格的設計？
- Sketch 載入Material套件
DOWNLOAD MATERIAL PLUGIN
載入後就會在Plugins看到Material 的選項，接續Open Theme Editor
2. 選擇theme後，載入之後你就可看到這樣的面板
可以選擇顏色(Color Scheme)/字型(Typography Scale)/陰影深度(Elevation)/System Icons(統整性icon)
3. 建置之後的版，他就會建立4個pages
內含Cover/ Getting Start/Material Theme/Material Components/Symbols這四個Pages
4. 上傳至gallery.io平台
Gallery.io協作平台
Gallery.io為協作平台，可以不同的人協作運用Material套件上傳到平台上
- 設計版本的版控
2. 多人協作
3. 繫結跟此專案有關的連結(開會記錄,功能規格…等等)
4. 最重要的是知道它的組件/symbols名稱 與文件對應位置!!
所以，怎麼利用Material工具做自己設計？
有幾個大原則
1. 從Material tool換置自己的主色配色字體等需求之後，重新建置一個自己要的設計風格頁面
2. 原則在使用它產出的Symbol進行抽換，組件內容可以抽換但Symbols 不能解散又重組，Components元件也是(Gallery.io平台會無法辨識你是從哪個組件改的)
3. 可以自己新增元件，但必須依循theme的模式(字體/顏色…)
結論
站在巨人的身上可以看得更遠，從中可以學到很多style guide的設計方式，與Sketch sysmbol的使用，有經驗的人或許是可以建置自己一套Components與Style guide協作方式
寫Medium真的是很不容易的事呀！！
但朋友大推(坑)整理文章不僅是幫自己整理思緒脈絡的很好方式！如果有任何問題歡迎指教，如果覺得不錯就給我拍拍手鼓勵一下吧！
謝謝各位，下台領便當了(ﾉ◕ヮ◕)ﾉ*:・ﾟ✧歡迎案件洽談，謝謝
