从0到1建立sketch字体系统

在UI界面资源库的搭建中，首先要确定项目界面中使用的主要颜色和字体。本文主要介绍用sketch搭建字体系统，生成文本样式库、团队共享的实践过程。

文末附下载：3个sktech插件、示例sketch字体系统文件。

一、建立字体的层级

首先我们借助第三方工具找出现有项目的所有字体，根据实际运用情景优化并确定了字体层级。新项目建议从核心流程界面中确定字体层级。关于字体层级的确定，参考了material design 的 The Type System:

我们在此基础上，根据项目情况列出了如下的字体层级表格：

二、搭建sketch字体系统

1. 整理列出项目所有的字体颜色，打开sketch并将颜色罗列出来。包括：
   品牌色：主色、次级色；
   强调色：活跃色(Active)、成功色、警告色、失败色；
   中性色：正常色、禁用色。
   示例如下：
   

   

2. 把这些字体按字体层级排列好。图中在字体后面的2，表示字重为bold，方便识别。示例如下：
   

   

3. 复制2组，将字体组样式调整为居左、居中、居右，并排列好。字体对齐方式根据各项目界面的不同而有所区别，比如有些项目的界面没有字体居右对齐。
   示例如下：

   
   

   Tip：复制时，为方便后续的规范命名，需要将图层复制时添加copy的属性取消。sketch的偏好设置——图层——复制。设置完成后，多选框为未勾选，如图：

   
   

4. 重复上一步操作，整理出所有字体颜色的组合。示例如下：

   
   

5. 给各文本图层命名，使用sketch插件Rename it ，进行批量命名。命名的规范结构有多种，根据项目不同自定义化。

   示例项目的命名结构如下：
   序号 - %/正常或禁用/对齐方式/颜色*
   （%*在Rename it 中表示当前图层）

   如果要生成图中的规范：00 - H1 2/Normal/Left/Primary。序号生成：先写个0，选中Num.Sequence DESC ，将Start Sequence from设置为0，即0%N。

   
   

6. 利用Sketch Styles Generator插件生成文本样式库。先检查sketch文本样式库是否为空，若有其它文本样式请删除，以防止和新生成的文本样式混杂在一起。选中所需要生成的文本样式图层，然后点击插件生成。如图所示：
   

   

三、导出并共享sketch文本样式库

如何将文本样式库导出并共享到其它成员的sketch文件中呢？用插件Shared Text Sytles。

1. 先将文本样式库导出成 .json 文件。

   
   

2. 导入到所需的sketch文件中。注意：需要将json文件放在任意一个文件夹中才能导入，否则无法成功导入。

   
   

   导入成功后，即可看到整齐规范的文本样式库。

   
   

参考《Text System Mastery with Shared Styles》
附件下载：网盘 密码: jv7y