美文网首页
[自译]构建Design System的快速指南-Sketch插

[自译]构建Design System的快速指南-Sketch插

作者: ShusQ | 来源:发表于2017-05-23 11:40 被阅读95次

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

    相关文章

      网友评论

          本文标题:[自译]构建Design System的快速指南-Sketch插

          本文链接:https://www.haomeiwen.com/subject/kajwxxtx.html