捕手学堂·文章96

Sketch 新出了Libraries功能,以后团队协作更方便了!

215人已阅

Sketch 新出了Libraries功能,以后团队协作更方便了!

捕手学堂·文章96·粉丝336 +关注


@C7210 :关于Sketch 47 Beta带来的Libraries功能。终于实现可以调用库文件以及一些第三方插件。但原生功能是另一码事,在如此重要的、可能涉及设计体系这样庞大项目的功能上,依赖第三方解决方案的做法终归有所牵制。


想来想去还是感到Sketch官方文档对Libraries新功能的概念和用法解释的最为全面和恰当,当然Medium上还有一些很棒的实践经验供参考。


要试用Libraries功能,你首先需要到Sketch官网下载Sketch 47 Beta版本。



在“添加Libraries”这部分内容当中,我用到了自制的WireframeKit For Sketch(iOS)作为示意,这是一款面向交互设计师的线框稿风格Sketch组件库。

下面进入官方文档正文。


优秀的设计来自于协作。有了Libraries功能,跨文件的Symbols共享、升级和同步便得以实现。


什么是Libraries?

一个Library本质上就是一个普通的Sketch文件,其中的Symbols可以被其他Sketch文件调用。如果你编辑了Library当中的Symbols,那么调用了该Library的其他Sketch文件便会收到更新通知,你可以对变更进行预览、对比和确认,使这些Sketch文件所调用的Symbols自动更新至最新版本。

在多人协作场景中,你可以将Library文件存放在Dropbox同步文件夹或GitHub的Repository当中,并确保其他同事拥有访问权限,这样他们便可以在自己的本地Sketch文件当中调用Library并使用其中的Symbols了。在你编辑了Library文件之后,他们的本地Sketch文件同样会收到更新通知。


Libraries功能适合我吗?

无论是独自工作,还是团队协作,Libraries功能都能帮你从容应对。

我们提供了「iOS UI Design」作为默认Library,你可以通过「Insert」菜单将常用的Symbols快速添加到文件当中,也可以将自己的Sketch文件添加到Libraries当中,或是打造全新的Library;无论怎样,你都能够在所有的Sketch文件当中统一调用这些公用的Libraries,升级工作也只需在Libraries当中一次性完成。

团队作战的设计师们则可以充分利用Libraries的同步能力来确保设计方案中的UI元素为最新版本,或是及时获取最新的品牌风格定义。Libraries被隔离于工作文件之外,你可以通过其存放媒介所提供的安全策略设置来确保其不会被错误的变更;对于任何升级变更,你也有机会在同步之前对其进行预览确认。



添加Libraries

要添加新的Library,你所需的仅是一个包含着Symbols定义的普通Sketch文件,就这么简单。

当你在本地Sketch文件当中对Symbols进行了良好的定义,并希望在其他文件当中进行调用的时候,你就可以将其添加为Library了。通过顶部菜单栏的「Sketch Beta」进入「Preferences」,即偏好设置(或使用快捷键“Command+逗号”),然后在窗口中打开「Libraries」选项卡。



在这里,你会看到Sketch默认提供的Library,即「iOS UI Design」。左侧复选框的选中与否将决定这个Library是否会出现在Insert菜单当中。点击右侧的“眼睛”图标,或使用空格键,可以对Library进行预览。



点击右下角的“Add Library…”按钮,选择你自己的Sketch文件,即可实现Library的添加。



在上图的范例中,我添加了自制的WireframeKit For Sketch(iOS)作为Library。

点击左下角的管理按钮(“齿轮”图标),弹出菜单,在这里你可以禁用、打开或移除当前所选的Library。自行添加的Library在数量上没有上限,每个Library在Symbols菜单当中都自成体系。


外部Libraries

想要通过Libraries实现外部共享或协作?完全没问题 。将Libraries文件存放在本地服务器、云存储或版本控制系统当中,向相关人员开放访问权限即可。

譬如你可以将Libraries文件放置在Dropbox共享文件夹里,然后你的朋友或同事将其添加到自己的Sketch Libraries当中,这样你们就可以基于同一份Library文件进行工作了;对于该文件的任何变更都可以作用于每个人的本地Sketch文件。


使用Library Symbols

你可以像使用普通的本地Symbols那样使用Library Symbols,譬如通过菜单栏的Insert › Symbol来插入到当前画布中。



为了与本地Symbols进行区分,Library Symbols在图层列表中会拥有一个独特的图标:



插入到画布当中的Library Symbols同样可以通过右侧检查器面板进行替换。


编辑Library Symbols

当你准备像过去那样通过双击Library Symbol对其进行编辑时,Sketch会提醒你该Symbol属于某Library,你可以在「Unlink from Library」或是「Open in Original Document」当中进行选择。



选择后者,Library源文件会被自动打开,并定位到该Symbol。对源文件进行编辑,意味着所有调用到这个Library的本地Sketch文件都会受到影响。


因此要注意:如果在团队范围内使用Libraries,那么在编辑源文件当中的Symbols时要保持小心。高阶人员可能要对普通团队成员的访问权限进行把控,例如设置为“只读”(具体设置方式需要参考你所使用的同步工具的相关说明)。


将Library Symbols本地化

如果你希望在不影响Library源文件的情况下对Symbols进行修改,那么在上文的对话框中选择「Unlink from Library」,这样Library Symbol便会被本地化,脱离与Library的关联;其原型也会出现在本地Sketch文件的“Symbols”页面当中。

注意:一旦Symbol脱离了与Library源文件的关联,就无法再与Library保持同步。其他未脱离关联的Symbols则不会受到影响。


管理本地调用的Library Symbols

你可以对本地Sketch文件当中所调用的Library Symbols进行统一管理,无论它们来自一个或多个Libraries。在画布中选中某个Library Symbol,在右侧检查器面板当中点击该Symbol的名称,在弹出菜单中选择「Organize Imported Symbols…」。


你可以在弹出的对话框中看到当前文件当中调用的全部Library Symbols。选择其中某一个,点击左下角的管理按钮(“齿轮”图标),你可以选择在Library源文件中编辑该Symbol,或是将其本地化。



Libraries的更新与同步

Libraries的重要性不仅在于跨文件使用Symbols,同时更在于保持这些Symbols的同步更新。

我们前面已经了解过如何编辑Library Symbols。当你完成编辑,回到自己的本地Sketch文件当中,你仍然可以选择是否接受Libraries当中发生的变更。

编辑了Library Symbols之后,回到你的本地Sketch文件,你可以在窗口右上角看到紫色的「Library Update Available 」提示。点击之后,会有对话框提示你当前文件中某些Symbols有待更新。



在这里,你会看到发生变更的所有Symbols,并能通过「before」和「after」进行版本对比。如果你不确定其中的某些变更是否应该更新到当前本地文件,那么取消选中状态不同步该项即可。



在这里,所有被选中的Symbols都会在你点击「Update Symbols」之后被同步到你当前的本地文件当中。


如果你不希望当前文件当中的某些Library Symbols被更新,也可以在同步之前就通过“Unlink from Library”将其本地化。


欢迎关注作者的微信公众号:



打赏后可加作者微信进行下一步沟通
0人已打赏
1 1
215人已阅读

微信扫一扫

关注该公众账号

全部评价:0

相关文章推荐

  • Material Design只是独辟蹊径,并未全面胜出

    Material Design发布之时,Google在设计领域做出的努力令我印象深刻。在这方面Apple一度遥遥领先。这种局面结束了。记得我以前总抱怨Android设计的那套不统一、缺乏文档、缺乏吸引力的暗色主题,还有模棱两可的汉堡菜单的滥用。Material Design解决了其中很多问题。如今它提供了一套统一的设计语言,更明亮、色彩丰富,并且背后有深思熟虑的设计指南作为坚实支撑。但是尽管它色彩漂亮,卡片的使用提供了强烈的纵深感与操纵感。我时常扪心自问,这真的像许多设计师说的那样,比Apple的iOS设计优秀吗?我要发表一下我的看法,我觉得它只是独辟蹊径,并未全面胜出。与iOS的相似点我们从iOS的3项核心原则说起:清晰、遵从和深度。清晰是指文字易读、图标明显、对比强烈。清晰的定义,对于不同平台是特定的。对于iOS和Android用户而言,什么是清晰的取决于他们熟悉什么。iOS用户可以立更多
    薇小薇 · 11月前 · 交互设计
    915人已阅读
  • 手绘在Banner图设计中可以怎么玩?

    关于今天这个话题,其实很早就想写了,看到很多人问我手绘对于设计的重要性相关的问题,所以干脆写一篇关于手绘之于Banner图设计的意义的文章好了。跟往常一样,我先给大家列一个提纲:1、为什么会用到手绘?2、Banner设计中有哪些常用的手绘形式呢?3、手绘一般用在哪些地方?4、会手绘的设计师有哪些优势?5、不会手绘就做不好设计了吗?6、传授一个用花瓣找图的小妙招。接下来我一个个知识点来给大家讲解:1、为什么会用到手绘?(1)因为风格或角色需要因为风格需要,比如要做一些卡哇伊/搞怪的/充满梦幻神秘色彩/内容量特别庞大的Banner设计,你可能都需要借助手绘来完成,因为手绘的形式丰富多样,我么可以充分发挥自己的想象力把它用手绘的方式表现出来。举个例子:淘宝造物节。(2)受版权和经费限制,有时候一个活动主题是有好几个设计方向的,但迫于找素材不方便或版权限制以及经费不允许或者时间不充裕等情况,设计师更多
    Jamie · 11月前 · 界面设计
    1032人已阅读
  • 5个关键词看小程序和App的UI异同

    微信总喜欢在深夜推出一个大新闻,昨晚10点,小程序开放公测的消息一出,我公号的文章都推不出去了,一直显示系统繁忙,那得是多大的流量啊,心里暗想,能分我一点零头就好了,估计是我想多了!自从做了自媒体之后,就有了职业病,看到热点就想追,这病得治!虽然我研究苹果比较多,但是大家总是把小程序和App放在一起比,因此我也花时间看了一下小程序的开发指南,尤其是UI部分的设计和原则,今天就拿它和苹果的HIG(Human Interface Guidelines)做个比较,其实两者在一些大的原则处理上可以说是一致的。关键词一:友好礼貌对应于苹果:Less is more苹果在iOS7时做了一个非常大的界面调整,以突出内容为主,去除掉了所有会干扰用户的界面元素,这个风格一致延续至今(以苹果自家的App,比如指南针,天气为例就可以看出)。微信在指南一开始也强调了这个原则,并用两个正反示例加以说明。一是不要在搜更多
    晓黑 · 11月前 · 界面设计
    730人已阅读