手把手教你如何使用sketch Libraries

Libraries功能早在sketch 47的时候就已经加入,但我当时扫了眼官方的介绍感觉真是高深莫测,网络资料也觉得有些绕就一直没有去了解,只是在工作中用到了部分功能。

直到前几天小伙伴问我这个怎么用,趁着这个契机我才决心从头学习它,今天就来和大家分享我建组件库的过程和思路,希望和大家一起学习讨论。

如果你也和我一样,既想了解这个功能又觉得麻烦有些地方看不懂,不妨就先从本篇入门吧。

 

 

什么是Libraries

Libraries是帮助我们更方便使用组件的工具。先看一下如果不使用Libraries的时候是怎么解决这个问题的。

我们可能会有一个专门的sketch文件,里面是各种各样已经确定下来的组件,需要用的时候,打开这个文件复制粘贴到你要用的文件里。

其实这里我们离Libraries已经不远了,因为Library的前身也是一个普通的sketch文件,只不过是把需要用到的图标、按钮、文字等都预设整理成symbol,然后添加到sketch系统中。所以没有想象中的麻烦,只需要加上几步,就可以省去每次都打开文件复制粘贴的步骤,随时使用了。

下面就来看一下我们怎么来建立自己的组件库吧。

 

如何使用

1.顺序

第一步可以确定一下建立的顺序,避免因为没有规律而造成一些重复工作。

这里我们需要先考虑一下“颗粒度”的概念。大家应该都玩过1024这个游戏,游戏里2合成4,4合成8,8合成16……,“2”就是这个游戏的最小颗粒度。

同样在搭建自己的组件库的时候,我们也应该从最小的颗粒度入手,逐渐合成更高级的组件。比如我是从“颜色→图标→文字→按钮→组件 ”,这样当你建按钮的时候,就可以直接使用之前已经建好的颜色和文字。

 

2.命名

命名按照自己的习惯中英文都可以,关键是整理时要有清晰的思路。从命名开始,建立清晰的分组,以便之后的查找使用。这里是用“/”来分层级,比如“按钮/主要操作/常态”。

 

3.建立

有了清晰的思路,就可以按照定好的顺序逐步建立了。下面以颜色和图标来举例。首先我们建立好颜色的symbol,如下图。

接下来开始建立是图标的,将图标图层设置为蒙版后选择插入颜色的symbol,这样图标和颜色就发生了嵌套关系,切换图标的颜色非常方便。同样如果修改了颜色,那么所有使用该颜色symbol的元素也会一起改变。

 

4.导入添加

准备好文件后下一步是将文件导入,选择sketch→preferences,中文是“偏好设置”。打开后选择Libraries→Add library,把文件添加进入。

添加成功后新建一个文件看看成果吧。点击symbols,找到我们刚才添加的文件就可以插入使用我们预设好的组件了,到这一步我们已经完成了自己本地组件库的建立和使用。

 

5.共享和同步

建好了自己的组件库,也可以把它分享给别人,关于共享和同步有很多方法,比如……不过大多都有一些技术门槛,使用起来比较麻烦。

下面只介绍两种我认为操作简单、好控制,不需要过多设置和管理的方法,分别是:人工同步和sketch cloud 同步(个人觉得可以满足多数使用需要了,对其它方法有兴趣的小伙伴可以研究一下相关资料)。

· 人工同步

每次更新后的sketch文件发送给大家,由大家自己添加到Libraries,把旧文件删除就可以了,虽然每次需要手动添加删除,但是这个方法不需要设置什么没有技术门槛,对于更新不那么频繁的中小团队使用没什么问题。

· Sketch Cloud 同步

这个方法是把sketch文件传到Sketch Cloud,然后开放该文档或者分享给指定的人,接受分享的人将文件添加到Libraries,之后的更新Sketch就会自动下载了,是比较方便的方法了。不过这相当于把文件存在了云,需要注意信息安全,如果是保密的项目就需要评估一下是否使用了。

以上就是我建组件库的过程和思路了,这也是我第一次系统的整理使用,希望和大家一起学习讨论,如果有推荐的方法欢迎留言讨论哦~

不少APP都选择了较写实的图标。

 

 

划重点

· 顺序建立,从最小的颗粒度入手,逐渐合成更高级的组件。

· 建组件的时候要有清晰的思路。命名以“/”来分层级,建立清晰的分组。