最近在medium上看到一篇有效管理sketch 中symbol的文章。

因为我已经翻译了原文，但翻译过程中觉得理解起来还是有些吃力，所以重新按照我的理解先大概总结一下。在sketch中symbol这个功能是非常强大的，有效的管理symbol的架构会让使用起来更方便。

作者将Symbol分类，然后不同类别之间互相嵌套使用，可以

1. 保持设计的一致性，利于规范UI guide（有时候大体量设计稿出来不同symbol之间的本该一样的细节也有细微差别）
2. 简化symbol的使用方式、快速选用
3. 更改按钮或组件不同状态的样式时避免过多的重复工作

根据不同使用场景的需求，分别是control symbol、nested symbol 和 variables symbol，管理层级大概可以简化为：

Control symbol— nested symbol—variables symbol.

作者用可视化的方式在symbol的page里给不同的symbol做了归类，乍看是三个不同的类别，但其实是互相嵌套的。

Control symbol

control部分是产品中中所涉及的功能组件，比如文本输入框（input）、复选框单/选按钮。这是一个总的大类。

Nested symbol

这里面是上述control中每一个symbol的feature在UI中会出现的不同状态，有默认的样式，选中状态，报错状态，输入后的状态等（同理在按钮设计时就会有悬浮／选中／不可用之类的）。

Variables symbol

针对按钮中的可复用的变量所设的类别，拿图中举例，Variables第一个灰色矩形框的symbol（input），这个样式分别可以被Nested 里面第一列前两个（默认和value状态）和第二列第前两个（默认和selected状态）中的灰色边框所复用。

工作原理：

control用来划分大类，比如有一个文本输入框，在control中只看到的是它的默认样式，它有不同的状态1234（选中／不可用／报错等），每一个control symbol下面其实隐藏了不同状态下的这个文本输入框，1234都在，只是不可见，只显示默认的状态，这一层称为type。下图是一个control symbol 里所包含的图层

【第一层嵌套】

图中只有type图层可见，下面都是各种状态下的文本输入框，也即是说，这个nested 部分平铺展示出来每个symbol的状态其实也隐藏在所对应的control symbol 里的，这样每次需要使用某一个功能时，只用在control symbol里找到它默认type的那个symbol直接置入，然后在设计稿里把需要的那个symbol状态图层调成可见，而不是在成堆的symbol样式里来回肉眼搜索。

【第二层嵌套】

在刚刚上面的的variables 里面有解释，symbol之间有些变量（例如背景颜色，边框颜色粗细）是在整个设计系统里不断复用的。

为了避免每次新建一个symbol之前都要手动去设置这些通用的参数，把这些变量预存为symbol，直接使用，然后放在nested symbol里锁住这个图层，这样在overrides里就不会出现这个变量以防不小心更改。即节省了多次重复设置的时间，也避免了因为一些记忆偏差或手残导致的误差而出现的不一致。

建议看文章之前先将源文件下载下来，或者根据作者提供的截图来对照，只凭文字来理解嵌套符号的概念会有些吃力。

以下正文：

我想和大家分享一个流程，或者说是一个技巧，已经在我自己产品和界面设计中起了显著成效。在文章的末尾会有Sketch的源文件供下载，可以更深入去了解和挖掘我所想要表达的概念。

下图是一个简单的示意。同时给大家介绍一个很实用的小技巧我称之为：变量符号（Variable Symbol）。案例只是一个简单的表单设计，但原理是可以应用到任何UI组件，或是更广泛的模式里。这个概念是为了让所有组件的所有状态都变得更容易和快速使用。

问题：不一致性

当一个团队设计某个产品时。往往会遇到一些相同的问题，你看是不是很熟悉呢：

• 设计师总是在不断的创造新组件；
• 导致很快整个设计开始出现差异化了；
• 过了一段时间团队开始分不清到底这些组件，甚至整个品牌视觉和产品到底该是什么样子；
• 开发者也被设计师的不一致搞得很沮丧；
• 或者更差，他们直接照着自己的拿到的视觉稿原封不动开发出来了（当然应该这样，这是他们的工作），然后代码被那些毫无章法的视觉规范、命名习惯、组件、颜色和文字规范搞得越来越臃肿……

这就是真实世界，对吧？

解决办法：符号（Symbol）

我认为设计和建立一个具有一致性的网站、产品、或设计规范，关键就是要有条理。幸好Sketch有很多方法来保持条理——Symbol是这其中最棒的方式。Symbol的效用在规范设计时尤其强大——维持一致的风格和UI组件。像Craft Library和Brand.ai这类插件也让Symbol更容易为团队所使用。

一个好的设计系统应该包括所有的组件以及其不同的状态（比如占位，数值，悬浮，报错，不可用）不仅仅是需要设计出每一种状态，还需要有一个Symbol来与之对应，这样在建立产品流程或交互时使用更简便，比如下图：

但要是你有几十个系统组件，每个都有好几个不同的状态……最后就出现几百个符号了！这也许看起来很难管理，其实并不，只要使用嵌套符号和我称之为’控制符号（Control Symbol）‘和’变量符号（Variable Symbol）‘。

嵌套符号（Nested Symbols）

顾名思义是符号的互相嵌套，或将一个Symbol嵌入另一个中。控制符号指的是在子集里包含其他嵌套符号。在上面的例子中我试图示意自己在Sketch中是如何排布的。左上方就是控制符号（CONTROL）：一个是文本输入（input），其他是复选框和单选按钮（checkbox+radio）。每一个控制符号都包括了右边这些嵌套符号（NESTED）。文本输入符号底下有7个嵌入的Symbol——每一个都代表一种状态（比选中、不可用）。然后复选框／单选按钮也都有9个不同状态的Symbol嵌入其中。

 嵌套和控制符号让设计系统中的组件查看、使用及更新起来都很容易

控制符号（Control Symbol）

我们来详细看一下怎么设计控制符号：

控制符号应该和对应的嵌套符号保持一样的（px）尺寸。 置入所有你觉得有必要的的符号进去（比如组件的类型和状态）。 所有图层都要放在同一个位置，这样符号之间可以无缝转换。 只显示（第）一个图层，也就是每个符号的默认状态。

备注：我把第一个可见图层重命名为Type，Sketch会把这个当作进入更改overrides的标签。见下图

再备注：所有嵌套符号都用了相同的文本标签名（比如Data）。这样任何符号（文本）的overrides都可以保持一致，不管你切换到哪一种Type（嵌套符号）。 控制符号只对尺寸有限制。每一个控制符号下的嵌套符号都应该使用同一种尺寸，所以切换到嵌套符号不会变形。例如，文本输入和广播按钮也许不太适合凑在一起。但文本输入和下拉选单能组成一个不错的控制符号，不同的按钮种类也是同理。不过记住，对于响应式的符号，你也可以结合多种的高度来适配比如文本输入和文本区域。

一旦你预设好了这些，就只用将不同的控制符号添加到画板内，然后快速在组件和状态之间切换。然后复制控制符号就快速搭建起UI了。

控制符号让产品设计流程速度加快，更重要的是，保持了更高的一致性。

变量符号（Variable Symbols）

也许你发现上面有一些符号的标题是“Veriables”……这是嵌套符号具有创意的部分：符号的原理和Sass variables没什么不同。作为一个网站开发者我大爱Sass的架构及自动化。我相信任何从开发借鉴到设计里应用的方法都挺好的——所以我使用Sass‘variables symbols’像搭积木一样用到符号里面一些相似的变量（比如background-color，border-color）。

上面的示例中，Variables下面是6个（不同的）Symbol，都代表了不通的系统颜色。你们中间如果有码农的话应该也就注意到了Sass的命名习惯（$blue50和代码是对应的）。这symbol是默认状态和悬浮状态的按钮颜色，同样的方法适用于其他类似背景颜色边框颜色之类的。

在左边的图层栏可以看到每一个嵌套符号下面都嵌了一个Variable symbol。 需要注意，这个图层是锁定的，所以所有可变因素不会在Nested symbol的override出现……除非你希望有变化——在这个例子里他们是因为保持组件始终统一的使用效果而锁定的。 备注：变量符号的尺寸不是很重要，毕竟符号是响应式的。

现在，我只用改变一个变量符号 ，然后其他使用了变量符号的符号都会随之改变！上面例子中的按钮只是基本用法，但想象一下一个边框颜色变量符号被几十个表单栏号使用……省了不少时间啊对吧？

图7

下面是免费Sketch 源文件的下载链接，文章中提到的内容在里面都有简单的示意，希望能帮到你:)