恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Sketch的日常,好用的快捷键及插件分享
0.0°
2018-10-21 原创文章 经验/观点 举报 3097 11 11 1

本文从日常使用的快捷键、 极大提高效率的常用插件

和Sketch 52.2版感受最明显的新功能三个方面进行分享~


作为挨踢行业的一名UI设计师,每天除了吃饭睡觉,还必须要做的就是打开设计软件,一趴就是long time。目前主流的UI界面设计软件是老牌的PS,新晋的Sketch,以及一路追赶的XD,当然除此之外还有最近开始吵吵的 Frame X (偏向组件化设计和强大的交互设计功能)和 Figma (打开网页就能在线做设计)。笔者刚入行的时候跟很多人一样是用PS做界面,后来天天听大家吵吵Sketch,抱着“落后就要挨饿”的想法捣鼓起来Sketch,然后就一发不可收拾,能不用PS就坚决不用了。现在回过头来,当年傻傻的用PS画页面是浪费了多少芳华~



Image title


好了,不扯犊子了,浪费读者时间是可耻的,来了就盼着点干货不是。


下面,我把要分享的内容分三部分来展开,先申明一下所讲内容都是基于我个人日常的使用习惯和一些积累,这里算是做一个个人总结,如果能顺便对你也有所帮助,那就请赏个赞吧(哈哈):


1. 日常使用的快捷键(真的很快捷)

2. 能极大提高效率的常用插件(真的很高效)

3. Sketch 52.2版感受最明显的新功能(真的很喜欢)



Image title





一、快捷键真的很快捷



Image title

这三个操作组合起来,一套骚操作可以快速在几十个画板中找到目标元素及所在画板,小编以前都是靠鼠标一点一点拖动,不断放大缩小画板来寻找元素的。



Image title

Command+1 和Command+2演示



Image title

Command+。和Command+0 演示




Image title


这里的样式仅限图层样式,当我们在设计的过程中,如果没有提前做好字体的共享图层样式,可以使用复制粘贴字体样式来保证字体的统一性。




Image title

Option+Command+C 和 Option+Command+V 演示




Image title


以上仅把我自己常用的快捷键的罗列了,当然还有一些基本的快捷键,比如A、T、R、O这些大家肯定都知道,所以就没拿出来说了,更多快捷键大家可以去这里看


http://sketchshortcuts.com/




二、让插件带你飞


接下来我要给大家介绍14个我经常使用的插件,每一个都是我精挑细选的,你用了肯定会喜欢,如果有没用过,墙裂建议去试试。


讲之前先按本人的使用频率给这14个插件排个序,点击英文名称即刻下载,如遇到页面无法打开,那就需要搭个梯子了:


01. Sketch Measure 快速导出设计规范

02. Craft 快速智能填充

03. Kitchen 来自蚂蚁金服效率提升 Sketch 工具集

04. Paddy 让图层自动填充间距、对齐和分布

05. Fake-Chinese-Name 快速批量生成中文姓名

06. Clipboard Fill 使用剪贴板图片快速填充图形

07. Rename it 快速批量整理图层命名

08. Replace Layer 一键将所选图层替换为剪贴板中任何内容

09. Runner 使用命令行来提高效率

10. Swatches 快速切换并使用色板样本库

11. Sketch Isometric 快速使用画板及图形生成轴测视图

12. Flow Exporter 一键将原型流导出为 HTML

13. Shared Text Styles 导出文本共享样式

14. Sketch Nearest 8 快速将形状图层大小舍入至接近 8 的倍数


如果都有用过以上插件的小伙伴会发现有些插件功能有重叠,不要着急,下面我会细说。




01 Sketch Measure 快速导出设计规范 




Image title


Image title


Measure最常用的功能就是上图中的导出规范,可以一键导出本地Html的文件,在浏览器中打开即可拥有点到哪里看哪里的自动标注了,市面上虽然提供这个功能的工具很多,比如蓝湖、表你妹啊、Zeplin、PxCook。但是他们都有一个共性就是需要将设计文件上传到外部服务器,虽然PxCook可以在本地生成标注文件,可是也需要使用者安装桌面客户端才能打开。如果你的公司不允许将设计文件传到外部,或者限制访问外网,你有且只能使用Measure。


这款插件现在已经是Sketch必备插件了,主要功能包含:设计规范标注两大块。具体用法的这里就不再赘述。


Image title


PS:近期Sketch更新的52.2版本,很多小伙伴发现Measure用不了了,其实除了Measure还有很多插件用不了。这里说明一下我提供的下载链接有两个,一个是点击英文名称下载,那个链接我放的是百度网盘,是可以在新版Sketch使用的。一个是点击Measure的logo也放了Github的下载链接。





02 Craft 快速智能填充



Image title


http://cdn.linni.com/Craft%20Official.mp4  视频介绍


Craft 是一款功能非常强大的插件,提供Sketch和Photoshop两个版本,前者的功能较后者要丰富一些,主要功能有原型同步(Sync + Prototype)、设计系统管理(Design System Manager)、资源库(Library)、Stock图片库(Stock)、批量复制(Duplicate)、内容填充(Date)。


Image title


这里主要说一下批量复制和内容填充。Craft的批量复制可以快速进行水平和垂直方向的模块复制,而且自动分组,更厉害的是内容自动填充。


Image title



03 Kitchen 来自蚂蚁金服效率提升 Sketch 工具集



Image title


先看看官网介绍的功能点


Image title


Kitchen我想要介绍的有三点,分别是智能排版、数据填充和图表生成器。


智能排版  让图层自动填充「 间距 」和「 边距 」,让设计稿自动布局,如果想要真正的实现页面自动布局,仅靠这个插件是不够的。这里就设计稿自动布局再给大家推荐两个插件,一个是下面要说的Paddy,另一个就是AnimaToolkit(之前好像是叫 Auto Layout),在Runner上可以直接下载。


Image title


关于智能排版这一块,我在使用的过程中发现,在Sketch里挺好使的,可以很好的将特定元素的 padding 和 spacing 固定,方便拖拽保持布局不受影响,但是在用Measure导出到Html时会出现元素错乱的情况,很尴尬。我现在的处理方式时在导出规范之前把插件设定得自适应边距和间距取消。



数据填充  这里要夸一下Kitchen了,之前使用Craft的内容填充,内容是英文的挺烦的,现在迎刃而解了。美中不足的是Kitchen不支持内容填充后快速批量复制自动填充相同属性的内容,感觉后面会推出。现在两者搭配使用基本上能解决很多虚拟数据问题。



图表生成器  这个功能对于使用AntDesign组件做中后台设计是很能够解决图表的问题,生成的图表样式美观而且可以横向拖拽拉伸,不影响表格结构。


Image title



可以说蚂蚁团队的 AntDesign 对于企业中后台产品的设计起到了很大的推动作用,在组件化和审美层面上树立了一个标杆,不仅自己用而且开源,让更多的中小企业可以共享其设计资产,让中后台产品的设计大有可为。



04. Paddy 让图层自动填充间距、对齐和分布



Image title


自动:大多数插件需要键盘快捷键才能应用或重新应用效果,而 Paddy 这一切都是在操作图层时自动完成;


可见属性:很容易查看在图层列表查看对图层和组应用了哪些填充/间距而不需要单独选择它们,这是因为所有的属性都是通过图层名称设置的;


没有特殊的数据处理:只是调整和移动图层到最佳位置,它不会把你的组变成一个特殊的 "堆栈组" 或其他东西,所以其他人或程序可完美地读取 Sketch 文件,而无需使用此插件;


轻量级:它只是做了几件核心事情,没有臃肿与一堆无用的功能


以上对于 Paddy 的介绍引用自http://sketch.cm/plugins/141



05. Fake-Chinese-Name 快速批量生成中文姓名


Image title

这个插件与Kitchen的文本填充里的姓名填充功能是一样的,我习惯了用这个插件来生成中文名,所有也推荐给大家。



06. Clipboard Fill 使用剪贴板图片快速填充图形



Image title

搭配快捷键 Control + Option +V 很好用


07. Rename it 快速批量整理图层命名


图层命名是一个老生常谈的问题,没人会接受一个图层命名凌乱无序的文件。很多时候因为项目繁多时间不够,没有在设计的时候就命名好,有了 Rename it 再也不怕别人嫌弃我的图层命名了,这款插件可以实现图层快速批量命名,支持序列命名、按字母排序、添加文本命名、添加宽高命名、组合命名和查找替换命名,真的真的超级好用。


具有用法点击下图,进入 Github 详阅 Readme 。


Image title




08. Replace Layer 一键将所选图层替换为剪贴板中任何内容



Image title



09. Runner 使用命令行来提高效率

10. Swatches 快速切换并使用色板样本库

11. Sketch Isometric 快速使用画板及图形生成轴测视图

12. Flow Exporter 一键将原型流导出为 HTML


Image title

Flow Exporter 可以非常好的将在 Sketch 里做好的原型导出到本地 Html 文件,在实际工作中这样就可以非常便利的把交互Demo给产品或者领导演示。


13. Shared Text Styles 导出文本共享样式


Image title


不知道大家有没有遇到幸幸苦苦的做完一个项目,形成里一套字体系统,却没办法在导出来用于别的项目,以Library的形式添加到新项目,如果要修改还是要回到原来的文件中,这款插件的好处在于可以将我们做好的一套字体系统的共享样式导出来以一个json文件共享,提供给团队里的其他人其他项目复用,而且支持全局修改,不会关联到原始文件。


14. Sketch Nearest 8 快速将形状图层大小舍入至接近 8 的倍数


在日常设计中,我们习惯将元素间距设置为8的倍数,同样形状图层如果能统一为8的倍数是最好不过了,特别是用栅格系统做设计的时候。所有这个插件在一定程度上可以帮我们偷懒,不用花时间去计算了。



三、Sketch 52.2版本新增亮点功能


小伙伴有没有发现这次Sketch的更新优化的内容还是很多的,我的使用体验是比之前的版本好看了,更好用了。在功能上我感受到最明显的两处是 Data 数据填充Symbol 中加入了共享文本样式(就在半个月前我还在为这个功能犯愁,做的组件文本样式不支持动态调整)。


不好的地方也很多,很多插件失效无法使用,闪退比较频繁。

建议谨慎更新,哈哈~


Image title

Image title



后记


最后,想表达一个观点,时不时会听到一种声音,做设计最看重的是个人能力和想法,软件只是一种辅助实现想法工具而已。但是我想表达的是,有时候软件用的好,可以更好的实现想法,可以极大的提高工作效率,可以解放相当一部分无脑的操作,让我们得以有更多的时间去专注业务,创造更好的想法。


能翻到底的都是朋友,感谢阅读~


Image title



往期好文

面向企业中后台产品的设计系统大合集





更新:2018-10-21

收藏

11人已收藏

Z清晖

道阻且长,越努力越幸运

  • 4

    作品

  • 30

    粉丝

  • 32

    关注

  • 你要的中后台产品设计系统(前端框架)
  • TSAPP改版设计总结
  • 一组引导页设计
相关标签
Sketch插件快捷键

    猜你喜欢

      2018-10-21 原创文章 经验/观点 举报 3097 11 11 1

      Sketch的日常,好用的快捷键及插件分享

      0.0°

      你确定要举报Sketch的日常,好用的快捷键及插件分享

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年10月20日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      11
      11
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录