透過 Zeplin 實現輕便的 Android 文字設計實作
Zeplin 的文字屬性欄位
Zeplin 真的是非常盡責的軟體，只要是任何文字的屬性上傳之後都會全部寫得清清楚楚。但這麼多的欄位同時也代表會造成實作上的繁瑣以及困難，在這樣的環境下，很容易讓文字設計實作時容易來來回回，或許真的有工程師可以完美的照搬，但這畢竟是少數的少數。
其實 Zeplin 為了因應這樣的問題，提出了一個不錯的解法，就是給 Android 專案用的 XML 插件。
XML 插件（for Zeplin）
什麼是 XML？XML 是一種標籤語言，全名是 Extensible Markup Language，其中 Markup language 就是指標籤語言。如果不知道什麼是標籤語言的話，可以設想 HTML，因為 HTML 也是一種標籤語言，也就是用來把純文字加上其他各種標籤屬性讓實際呈現時可以有標註、排版等等效果的一種代碼類型。Android 官方目前有提供兩種建構 UI 的方式，其中一種就是透過 XML，而從官方文件看起來，這也是官方更推崇的做法。也就是說，如果 Android 工程師是使用 XML 來做 UI 的話，他一定有一份用來標註排版、文字樣式的 XML 檔，這份 XML 檔就是我們的目標。只要能產出符合 Text Styles 而且能用的 XML 代碼，設計師的 Text Styles 就能無痛銜接上 Android 工程師。
裝了插件之後，文字區塊就會自動產出程式碼了，看起來非常的不錯，不僅是大小。但這樣做每個文字區塊都會寫一長串程式碼，這麼髒的作法沒多久就會被工程師棄用這個作法改用自己習慣的整理方式，所以我們要靠 Zeplin 的 Styleguide 與 Sketch Text Styles 連動 來完成更乾淨的文字設計程式碼。
如果還沒有整理自己的 Text Styles 的話，先去整理一份，不然接下來就不能做了，有關 Sketch Text Styles 製作的方法推薦看下面這篇，做出來的 Text Styles 會非常乾淨。
先提醒一下，如果你是用上面的方法做 Text Styles，那完成之後的 Artboard 千萬不要刪除，因為等等會用上。
接下來會一步一步解說要如何做到在 Zeplin 產出 Android 能用的 XML。
最終目標
Zeplin 的文字設計最終目標，就是建立 Text Styles，然後利用 Text Styles 生成的 XML 檔達到類似 CSS 之於 HTML 的效果。
比較一下產出的 XML 前後的差異，處理前的 XML 大概會長這樣...<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="@color/b_1"
android:lineSpacingExtra="9sp"
android:gravity="center_horizontal"
tools:text="還沒登入會員"
/>然後看看處理後大概會是這樣...<TextView
style="@style/AndroidHeadingH3CenterBold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="還沒登入會員"
/>比起來就輕便了許多
Sketch Text Styles ︎上傳 Zeplin Styleguide
以防萬一，先再貼一次有關 Zeplin Styleguide 的操作說明。
好的，假如一切就緒的話，先來把 Text Styles 上傳到 Zeplin 上。
但一到 Styleguide 裡面之後，就會發現一場災難……
…不愧是 Zeplin，真的非常盡責，如果把所有 Text Styles 都加進來，Styleguide 大概要炸了。千萬不要手賤去按 “Add All Text Styles”，因為加了之後就只能手動一個一個刪除了。但如果上傳之後會產生這樣的狀況，要怎麼迴避 Zeplin 一次抓這麼多 Text Styles 呢？
Zeplin 給出的解法：將顏色屬性去除
還記得前面在 Sketch 製作 Text Styles 時留下的 Artboard 嗎？我們現在要用到它了。
- 開一個新的 Sketch 檔案，只取這段一種顏色的 Text Styles，複製到新的 Sketch 檔案裡面
2. 確認一下，新檔案吃到的 Text Styles 只有一種顏色而且樣式沒有重複
3. 將 Text Styles 上傳到 Zeplin
4. 把 Zeplin 的 Text Style 顏色屬性標籤全部刪除
5. 重新確認一下 Zeplin 裡文字產生的 XML 有沒有正確吃到 Text Styles，以下面畫面上的標題為例
<TextView
style="@style/AndroidHeadingH2Left700" //吃到的 Text Styles
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="summer！夏日之歌"
/>
6. 將 Zeplin Styleguide 右側欄位的 XML 就能丟到 Android 專案裡面使用
！！！以下為補充內容！！！Zeplin 上的 XML 對中文設計的不友善
標題寫的是 Zeplin，但實際上應該說是 Android 對中文設計的不友善，所以到底是在不友善什麼呢？
下面會慢慢介紹，首先透過 Sketch 的文字屬性面板看同一個樣式的文字在 Zeplin 上的 XML 實際寫了什麼？
<style name="AndroidHeadingH1CenterBold"> // Text Styles 名稱<item name="android:gravity">center_horizontal</item> // 置中<item name="android:textSize">36sp</item> // 大小 36<item name="android:lineSpacingExtra">24sp</item> // 行高 60(36+24)</style>
仔細看一下就會發現缺少了一個關鍵的屬性，字體
但 Zeplin 的 XML 真的是原本就缺少字體嗎？其實並沒有
現實是
只要你用中文字設計，XML 就注定缺少字體屬性
這個屬性在 XML 裡面是android:fontFamily
這是怎麼一回事呢？接下來會說明
Android 對中文字體支援的限制
Android 官方改變字體屬性的是 android:fontFamily ，目前預設支援的字體檔是 Roboto，這是一套英文字體，Android 目前對中文並沒有正式的支援整套字體，只要 Zeplin 發現你的文字有中文，他就會自動將 android:fontFamily 屬性移除，因為在中文設定這個屬性沒有意義，這也衍生出一個麻煩。
中文設計中 Zeplin 生成的 XML 會永遠缺乏字體字重
字體也就算了，我相信中文設計圈不會有太多人在 Android APP 裡面灌自己的中文字體檔，因為實在太肥了。
但偏偏 UI 設計發展到 2019 年，粗體排版什麼的可是多到數不完。為了解決中文字設計的這個盲點，我們就要透過另一個文字屬性，android:textStyle。
Android:textStyle 對中文設計的應用
跟 android:fontFamily 不同，android:textStyle 是所有語系都支援的一種屬性，就算不灌字體檔系統也能改變字重，他有三種屬性可以選擇
・正常=normal
・粗體=bold
・斜體=italic
而粗體（Bold）就是我們用來實現粗體排版的手段，同時也代表我們能使用的文字字重只能是 Regular 或 Bold。
為 Zeplin 產出的 XML 加上 Android:textStyle
我們先回到 Zeplin 上面的已經做好的 Text Style Catalog，把 XML 複製到任何的文字編輯器中，然後把 所有 會用到粗體字設計的文字樣式都加上 android:textStyle="bold" ，這個步驟也可以交給工程師完成就好，因為設計師操作很容易會弄壞。
以上面的範例示範
<<style name="AndroidHeadingH1CenterBold"> <item name="android:gravity">center_horizontal</item> <item name="android:textSize">36sp</item> <item name="android:lineSpacingExtra">24sp</item> </style>
加上 android:textStyle="bold" 的屬性
<style name="AndroidHeadingH1CenterBold"><item name="android:gravity">center_horizontal</item><item name="android:textSize">36sp</item><item name="android:textStyle">bold</item><item name="android:lineSpacingExtra">24sp</item></style>
最後附上完工後的工作文件，部分連結是內部使用所以無法開啟，有需要的話可以參考
