原文链接: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非常好用而且很容易去设置。
网友评论