上篇-Gallery.io 與Material Design的使用-設計師篇
下篇-Gallery.io 與Material Design的使用-前端開發篇
上篇已經講到設計師把檔案上傳到gallery.io平台
然後前端工程師要怎麼使用？
**接下來的說明需要有npm 與scss基礎
目錄
- 從gallery.io知道components
- Material web components檔案建置
- CSS命名規則
- 官方Material套件給的設計不代表都有其Components！！
- 結論 優缺點？
從gallery.io知道components
如果還不知道gallery.io是什麼請看上篇 → 上篇-Gallery.io 與Material Design的使用-設計師篇
在gallery.io有個小小圖示，就是告訴你是用哪個components，點擊Reference連結就會連結到該有的components文件
在官網 Web components 你就可以看全部的componensts
也可以透過github repo把整個專案載下來，在demo資料夾也可以看到每個components效果(這個方式比較好了解code)
Material web components 檔案建置
根據官方Material Web Developer Getting Started的教學把 Material Components 建置出來，文件已經說得很清楚，我這裡就不做贅述，產生成功你就會看到node_modules/@material的資料夾
任何的參數值會在組件資料夾下的variable.scss做設定
例如：改變主色 theme/_variable.scss 中的$mdc-theme-primary
CSS命名規則
可以MATERIAL COMPONENTS FOR THE WEB 找到你要的組件
參閱其Documentation你就可以看到CSS命名說明
官方Material套件給的設計不代表都有其Components！！
一開始我也以為官方給這麼多sketch設計檔範例都有其Components!!
代誌不是隆郎想ㄟ安奈!!
以Cards為例，官方給的範例類似
在拿到設計稿，工程師需要自己刻的部分
不過其實，已經從零建置省下很多工了啦！！因為一些symbols效果都已經寫好了，只是在加工而已，還是已經算很不錯了
結論
雖然看似完美的協作方式，但其實在實作過程中還是遇到很多問題
優點
1. 設計給予的是良好的Design system設計規範檔案，不用擔心小白，以確保大家是在同條路上
2. gallery.io 平台協作，版控，找文件都方便(但沒辦法出圖…好拉，我太貪心了)
3. 官方可能希望保有極高的設計程度，只定義最基準的設計規範模式，設計方面保有很大的發揮空間，而且很佛心給了很多優良範例參考
缺點
- Material Design 的class 語意化命名很驚人的長eg.
class=”demo-card__title mdc-typography mdc-typography — headline6"
…. 都覺得是要飛去外太空了嗎？ hello? - material plugin產出的設計檔任何Symbols都不一定有其Components Css
就是工程師你，要，自，己，刻 - 官方文件要花心思去好好瞭解，尤其是class的理解與使用
寫Medium真的是很不容易的事呀！！
但朋友大推(坑)整理文章不僅是幫自己整理思緒脈絡的很好方式！如果有任何問題歡迎指教，如果覺得不錯就給我拍拍手鼓勵一下吧！
謝謝各位，下台領便當了(ﾉ◕ヮ◕)ﾉ*:・ﾟ✧
