[自译]构建Design System的快速指南-Sketch插件 Brand.ai介绍

原文链接：The Simplest How-To Guide for Sharing a Design System with Your Team

原文作者：Jon Moore

很多团队都在构建Design System，所以我回答了很多这样的问题：

Hey Jon,我和我的团队如何构建新的Design System?

Woah，很高兴能听到你们的问题，接下来我们一起来完成：

1.下载这款插件，brand.ai（https://assets.brand.ai/plugin/sketch/uxpt）

2.注册并登录

3.进入“text”的tab，然后点击“Add Type Styles”。选中全部然后添加。

你的设计团队可以使用所有的这些文本样式。

4.进入“Styles”的tab，点击“Add Shared Styles”。选中全部，然后添加。

你的设计团队也可以使用所有的图层样式了。

5.进入“Component”的tab然后添加symbols

在Sketch的symbol页面选中你的组件面板（buttons，inputs，nav bars等等），在插件的窗口中点击“Add Layers”，给它们一个命名。这里有一个15秒的GIF展示：

如果你使用System，像是UX Power Tools,有“helper symbols”，不需要选择这些支持的symbols（颜色或者文本symbols）。这些都是可以自动上传！只会上传最新的构建组建symbols。

7.上传其他的材料（logos，icons，和图片...如果你需要的话）

这些tabs来帮助你完善组织。如果你想让预定义的页面（网格，登录等）可以被其他设计师引用，你也可以上传整个面板。

8.邀请团队成员

一起来讨论吧。（邀请你的其他成员加入）

9.完成啦～去给自己买根辣条吧。（看起来很像是不是？然而原文不是辣条，haha～）

FAQs

它真的这么快速构建吗？

是的。

我的Symbols有嵌套symbols，并且会覆盖检查面板。我可以上传这些吗？它们会有用吗？

Sketch允许你覆盖嵌套symbols（像是icon）和其他有相同外型的symbols。当你上传你的symbols到库中时，Brand.ai首先会上传所有直接嵌套的symbols到你添加的组件中，然后上传所有其他匹配外型的嵌套symbols。

为什么它这么酷？

其他的共享设计库只会看起来在一个层次，当添加组件和symbols的时候。但是Brand.ai允许覆盖symbols，当一个设计师拖拽一个button到面板上时，它会带来所有的关联symbols。你做的那个漂亮button，对每个伙伴而言都是一样的。

我每次从共享库中添加组件到文档中，它不会继续导入嵌套的symbol吗？

它不会，这个插件很聪明，它会检查文档是否存在，如果已经存在了就不会继续导入。如果不这样做，它们可能就会导入很多新的symbol。

如果我更新一个组件呢？

如果你是资源库的所有者，只需要将更新的组件添加到资源库中。就像我们在上面演示的那样，它会询问你是否要创建一个新的symbol或者覆盖已存在的符号。

我的团队会看到我的更新吗？

当然，团队成员会收到更新通知，并提示他们更新文件来匹配资源库中的组件和样式选项。

它不会重新加载所有的symbol是吗？

是的，它只会更新更改的内容。

还有比它更好用的吗？

应该是没有了。

概要

辣条（原文是Lightsaber churros..但是看起来真像是辣条啊）是一个真实存在的东西，共享design systems非常好用而且很容易去设置。