惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Apple Machine Learning Research
Apple Machine Learning Research
J
Java Code Geeks
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Last Week in AI
Last Week in AI
雷峰网
雷峰网
博客园_首页
小众软件
小众软件
美团技术团队
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
腾讯CDC
P
Proofpoint News Feed
MongoDB | Blog
MongoDB | Blog
Google DeepMind News
Google DeepMind News
MyScale Blog
MyScale Blog
U
Unit 42
The Cloudflare Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Microsoft Security Blog
Microsoft Security Blog
大猫的无限游戏
大猫的无限游戏
Engineering at Meta
Engineering at Meta
N
Netflix TechBlog - Medium
Microsoft Azure Blog
Microsoft Azure Blog
博客园 - 叶小钗

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
2017年,我这样使用 Sketch 改善工作流 - 少数派
2018-02-28 · via 少数派

「 本文参与 少数派 2017 年度征文 」


2017 年,Sketch 从 Version 42 更新到了 Version 48,每个版本都带来了许许多多实用的功能和变化,其中对我来说最喜欢的应该是 Libraries 功能,也是这个功能对我使用 Sketch 的方法带来了很大的改变。

先看一下最终效果

在 Sketch 增加了 Libraries 功能之后,我就一直在思考,怎么将自己常用到的内容,都整合成一个自己的 Library,不仅包含自己常用的内容,又可以结合 Symbol 的特性达最大的可定制性,下面就是我最后实践出的结果。

Library 效果展示

通过我制作好的 Library,就可以很轻松的完成我日常工作的需要,简化我的工作流程和重复劳动了。

从最基础的 Symbol 说起

Library 归根到底,就是将自己创建的 Symbol 集合在一起,并且可以在任何的一个 Sketch 文件中插入使用。那么如何使用好 Symbol 功能就是关键了。

1. Symbol 与 Overrides

Symbol 是将你要使用的元素整合在一起,方便你的重复使用,当你对 Symbol 进行更改后,所有使用到该 Symbol 的地方都会同步更新。Symbol 最重要的一个功能是 Overrides,你可以对 Symbol 中的元素进行重新定义,也正是这个功能,可以让 Symbol 做到可定制性,最基础的 Overrides 包括文字和图像。

Symbol 的 Overrides 功能

从「Insert - Symbol」中插入 Symbol 时,会根据字母顺序进行排序,当你 Symbol 的名称用「/」来分割,会根据相同名称来进行分组排列。

2. 嵌套 Symbol

当明白了 Symbol 最基础的用法之后,下面来说一下如果进一步的提高 Symbol 的可定制性。Symbol 是可以进行嵌套了,在 Symbol 中是可以添加其他 Symbol,并且同样支持 Overrides。利用这个特性,我们可以使得 Overrides 变得更加强大,满足我们针对不同条件显示不同内容的要求。例如,我们可以用这个特性,来制作可以更换颜色的 icon。

使用 Overrides 更换 icon 颜色
  1. 创建所需颜色的矩形,并将该矩形创建为 Symbol
  2. 将添加好的颜色矩形 Symbol 放到 icon 图层上面
  3. 使用 icon 对颜色矩形做 Mask(蒙板)操作
  4. 将 icon 和颜色矩形一起创建为 Symbol
  5. 这个 icon  Symbol 的 Overrides 选项中就可以选择不同的颜色矩形 Symbol 来更换 icon 的颜色了

当我们嵌套了 Symbol 时,嵌套的 Symbol 也是可以 Overrides 的,这样会造成我们添加了一个带有嵌套的 Symbol,它的 Overrides 选项会有很多,会给我们带来很多的困扰,因为有些用得到,有些用不到,而有些我们并不知道是用来控制哪些部分的,那么我们可以通过一些小技巧来使我们的 Overrides 更加的易用。

  • 禁用不需要的 Overrides 选项

当你不想让某个元素出现在 Overrides 的选项中时,你可以将该元素进行锁定,你只需要选中该图层,然后点击方菜单栏中的 「Arrange - Lock Layer」或者使用快捷键「⇧ + ⌘ + L」就可以了,锁定后的图层会出现一个锁的 icon 来标明。

禁用不需要的 Overrides 选项
  • 通过命名明确 Overrides 用途

可以对需要 Overrides 的图层进行命名,来改变 Overrides 选项中显示的名称,这样可以更加明确每个选项的作用。当你嵌套 Overrides 时,可以在命名中加入「↳」符号来命名,可以更加明确 Overrides 选项的层级关系。

通过命名明确 Overrides 用途

3. 可以自适应的 Symbol

Sketch 中可以使用 Resizing 工具,来保证元素在伸缩时可以根据设定的条件来进行自适应。Symbol 同样可以使用 Resizing 工具,来保证 Symbol 在缩放的时候,可以得到正确的自适应显示。

使用 Resizing 自适应 Symbol
  1. 在不设定自适应设置时,放大 Symbol,两个端点的形状会发生变形
  2. 双击该 Symbol,进入编辑状态
  3. 选择左上角的端点图层,在 Resizing 工具中,设置 「Fix Width & Fix Height」(固定图层宽和高的大小),并设置该图层固定在左边和上边
  4. 选择右下角的端点图层,在 Resizing 工具中,设置 「Fix Width & Fix Height」(固定图层宽和高的大小),并设置该图层固定在右边和下边
  5. 再次放大该 Symbol,两个端点的大小不会改变,并且会固定在正确的位置上

多个 Library 分开管理

你在一个 Library 文件中,可以插入另外一个 Library 的内容,当一个 Library 更新后,所有引用了这个 Library 中元素的地方,都会进行同步的更新。这样,我们将我们 Library 根据不同的功能来分开管理,我们可以创建专门管理颜色的 Library,管理 icon 的 Library 等等,通过这样的细化,我们可以将复用性比较多的 Library 拆分出来作为一个 Library 进行单独管理,这样既方便了重复使用,也方便了统一进行修改。

多个 Library 相互结合
  1. 将含有颜色 Symbol 的文件作为 Library 导入 Sketch
  2. 在制作 icon Symbol 时可以引用含有颜色 Symbol 的 Library
  3. 当颜色 Library 发生了改变,进入引用了该颜色的 icon Symbol 的文件时,会提醒 Library 有更新
  4. 同意更新 Library 后,所有相关的内容,都会一起更新

如果你的 Library 不仅仅是自己使用,还想要分享给其他人使用的话,你可以为你的 Library 加入一个预览图,这样在 Sketch 添加 Libraries 时就可以看到了。你只需要在你的文件中,加入一个命名为「Library Preview」的 Artboard,然后这个 Artboard 里面的内容就会作为缩略图进行展示。

Library 设置缩略图

总结

通过上面提到的这些方法,我制作了文章开头展示的 Library,这也使我在 2017 年改善了使用 Sketch 的工作流。当然,你也可以自己动手,来制作一个满足自己需求的 Library,改善你使用 Sketch 的工作流,减少一部分重复工作。