??五步學會用 Sketch 的功能 shared text 搭建字體樣式庫

01-26

平時大家在用 Sketch 做設計時，伴隨著項目的開展，會產生很多的字體樣式，堆積到最後難以管理。但 Sketch 的開發者早就料到這個問題，並給出 shared text 作為解決機制。本篇教程將手把手帶大家製作一個簡單的字體樣式庫。

??閱讀信息：

首先需要明確你的目的，為項目尋找合適的字體，比如你是要做宣傳海報，還是要做網頁。明確你的目標用戶，比如你是面向兒童，還是新潮的青年，亦或者白領。

然後需要設計一系列合適的字型大小，這裡推薦給大家一個神器 Modular Scale。在這裡大家可以選擇合適的比例與基底，然後生成一系列字型大小。

很多產品都有自己的字體樣式規範，放幾個??給大家做參考：

如果想更深入的了解設計字體樣式庫的方法，可以參考《成也排版敗也排版：一個選擇的過程》。

首先，根據第一步里設計好的字體樣式庫，把不同的字型大小羅列出來，並將內容更改為該字型大小的用途。

然後將這些字型大小打包成組，複製成為三列，並設置好三種對齊方式。

tip：這裡可以選中分組後，在右操作板勾選「Select group』s content on click」，即可像筆者一樣直接在畫板上框選對象。

最後我們設置幾個常用的文字色值，整個字體樣式庫就製作完畢了。

因為筆者在做設計時，常根據用途來規定字型大小，然後設定色值，而對齊並沒有那麼重要，因此確定格式為「用途/色值/對齊」。

tip：「/」在 Sketch 中可以用來自動分組。

我們需要裝一個插件：Update Text Layer Name，用這個插件可以讓文字圖層的圖層名稱和內容一致。

tip：可以通過 Sketch 插件 Runner 中的 install 安裝，也可以在官網的插件庫里尋找該插件進行安裝。

使用上面安裝的插件完成命名格式里的「用途」命名。

tip：在命名「用途」的時候，建議在前面加上英文小寫字母序號，這樣在顯示的時候就會按順序排列。

然後，我們需要安裝第二個插件：Rename It，用這個插件給文字圖層進行進一步命名處理。

按照圖中操作，並補齊圖中省去的重複操作部分，完成命名格式里的「色值」和「對齊」。

當然，第三步和第二步可以穿插進行，但是這樣比較繞腦子，不方便製作教程。理解了原理的同學可以邊製作樣式庫邊命名，提升效率。

tip：在命名「色值」的時候建議在前面添加「??「，Sketch 在顯示共享文字樣式時可以預覽顏色，添加這個實心方塊可以方便使用者快速識別顏色。

打掃乾淨屋子再請客。

在錄入我們整理好的字體樣式前，先把原來文件中亂七八糟的共享字體樣式清空。

這裡我們需要安裝第三個插件：Styles Generator，這個插件可以將你選擇的所有文字樣式按每個樣式生成共享樣式。而在 Sketch 中選擇所有圖層後使用生成共享樣式功能，只會生成一個樣式。

如圖所示，使用插件錄入製作好的共享文字樣式。這樣我們就大功告成了。

親測 library 無效，只好採用一個稍微笨拙的方式，首先存儲為 template 文件。

找到系統中 Sketch 存放 Template 文件的地址。

團隊共享一個堅果雲賬號，並將 Template 文件同步到雲端。然後各自同步到自己電腦中 Sketch 存放 Template 文件的地址。

這樣做團隊共享的缺點是一旦文字樣式庫有變動，組員的 Sketch 無法實時得到更新，必須從 template 新建文件，並剪切字體樣式庫進自己的文件覆蓋替換。

製作一個共享字體樣式庫，有助於規範團隊的設計輸出，也能提升設計師個人的輸出效率。筆者在教程開始時給的教學資料中有一個完整的共享字體樣式庫，需要安裝壓縮包中的字體才能使用。在我給出的樣式庫里，預留了幾欄自定義色值的空位，並添加了說明。有耐心的同學可以打開來慢慢琢磨。

夏天快結束了，分享一組筆者收集的夏日主題圖標給大家，請不要商用哈哈。

我是 Teambition 的交互設計師徐小馬（微信：heiheilaugh），歡迎交流。