什么是sketch Libraries?如何使用?

2019年7月5日14:58:26 发表评论 273 views

什么是Libraries

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

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

 

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

什么是sketch Libraries?如何使用?
下面就来看一下我们怎么来建立自己的组件库吧。

如何使用

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

 

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

什么是sketch Libraries?如何使用?
同样在搭建自己的组件库的时候,我们也应该从最小的颗粒度入手,逐渐合成更高级的组件。比如我是从“颜色→图标→文字→按钮→组件 ”,这样当你建按钮的时候,就可以直接使用之前已经建好的颜色和文字。
什么是sketch Libraries?如何使用?
2.命名命名按照自己的习惯中英文都可以,关键是整理时要有清晰的思路。从命名开始,建立清晰的分组,以便之后的查找使用。这里是用“/”来分层级,比如“按钮/主要操作/常态”。

什么是sketch Libraries?如何使用?
什么是sketch Libraries?如何使用?
3.建立有了清晰的思路,就可以按照定好的顺序逐步建立了。下面以颜色和图标来举例。首先我们建立好颜色的symbol,如下图。

什么是sketch Libraries?如何使用?
接下来开始建立是图标的,将图标图层设置为蒙版后选择插入颜色的symbol,这样图标和颜色就发生了嵌套关系,切换图标的颜色非常方便。同样如果修改了颜色,那么所有使用该颜色symbol的元素也会一起改变。
什么是sketch Libraries?如何使用?
4.导入添加准备好文件后下一步是将文件导入,选择sketch→preferences,中文是“偏好设置”。打开后选择Libraries→Add library,把文件添加进入。

什么是sketch Libraries?如何使用?
添加成功后新建一个文件看看成果吧。点击symbols,找到我们刚才添加的文件就可以插入使用我们预设好的组件了,到这一步我们已经完成了自己本地组件库的建立和使用。
什么是sketch Libraries?如何使用?
5.共享和同步建好了自己的组件库,也可以把它分享给别人,关于共享和同步有很多方法,比如……不过大多都有一些技术门槛,使用起来比较麻烦。

 

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

 

· 人工同步

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

 

· Sketch Cloud 同步

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

 

 

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

不少APP都选择了较写实的图标。
划重点
· 顺序建立,从最小的颗粒度入手,逐渐合成更高级的组件。· 建组件的时候要有清晰的思路。命名以“/”来分层级,建立清晰的分组。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: