@钟二信 :我们经常会碰到设计稿交付前端工程师后,还需要更新设计稿的情况,如何让工程师快速找到修改的地方呢,这个sketch插件专门为此而生!免费下载哟
下载地址:
- Dribbble → PinLog
- Githhub → Github.com
- Sketch 官网搜索PinLog → SketchApp
- Sketch Runner 中直接搜索PinLog
为什么要开发 PinLog
一个 UI 设计的最终呈现,当然要靠设计师的自我奋斗。但是,也要考虑到和前端工程师的充分沟通,PinLog 就是为了提高沟通效率而存在。
举个很常见的例子,我们在进行大型项目的时候,经常会碰到设计稿交付前端工程师后还需要更新设计稿的情况,这些情况可能是因为需求变更,也可能是前期设计不合理造成的。而当设计稿更新后,前端工程师仅凭「画板名称」其实很难快速的找到设计师修改的地方在哪里。
这时设计师就可以通过 PinLog 插件记录下自己的修改位置和对这个修改的描述,我把这个动作称之为 Add Pin 。
当前端工程师打开这个有修改记录的 Sketch 文件之后,可以点击插件菜单中的 Show Log 看到设计师记录下的修改,点击后可以直接跳转到修改的位置,将修改的说明和设计稿对应起来。
下面的视频介绍了 PinLog 的具体使用方法:
开发前的准备
如果你是一个插件开发的初学者,最好从解决简单的问题开始。笔者最初开发的一个插件就是为了让 Text 图层的行高等于其字体大小的1.4倍,非常简单,核心代码甚至只有两行。
知道自己要解决什么问题后可以去 Sketch Developer 看看插件开发的基础,其中最重要的就是要了解 Sketch 插件其实是利用 JS 的语法来直接调用 Cocoa API 这一基本原理。
除了 Sketch 自己的开发者网站,Medium 作者 Mike Mariano 的 The Beginner’s Guide to Writing Sketch Plugins 系列文章也是非常好的入门教程。
附 Sketch 新手指南:
以PinLog 为例,最主要的功能有三个:
- 得到当前视图的位置:要实现这个功能我就必须得到当前 Page 的 ID ,当前视图在 X、Y 轴上的滚动值和视图缩放的百分比。
- 将位置数据记录在文件中:要在 Sketch 文件中找个地方存储这些值。
- 跳转到之前记录的位置:先切换到正确的 Page ,再跳转到正确的视图位置。
而比较头疼的是,目前 Sketch 没有提供文档来介绍实现这些方法的接口,最有效率的办法是去看类似功能的插件,它们可能某部分与你想要实现的功能类似,你可以通过显示包内容,直接查看它们这部分代码。PinLog 就是从 Sketch-Commands 插件的一个小功能中查阅到了切换 Page 和跳转位置的方法,才得以开发完成。
跑通插件的主要功能
这里有两个方法帮助验证你所写的代码:
1. 使用 Sketch 官方出品的 Skpm 来生成插件模板,Skpm 还可以在你更新代码后,实时渲染 Sketch 文件,帮助调试代码。
2. 直接将代码写到 Sketch App 「Plugin」菜单的「Run Script」中,也可以运行代码得到实时反馈。
通过上面这两种方法,把之前分解出来的主要功能在 Sketch 上跑通,那么插件开发最重要的部分就基本完成了,有些简单的插件甚至就已经开发完成了。
书写插件的 UI
PinLog 插件涉及到用户输入记录和查看记录,所以会需要有界面来交互。针对界面主要有 Mac 原生界面开发和 WebView 混合开发,两种方案各有利弊:
- 原生界面 交互时可以很方便的调用 Cocoa 方法,不存在通信的问题,但是因为大多数插件开发者对 Mac 的开发并不了解,所以很难写出较为复杂的原生UI。
- WebView 大多数开发者都熟悉 JS 和 Html 的开发,可以写出较为复杂的 UI ,但是 WebView 中的 JS 是不能调用 Cocoa 方法的,需要用到 URL 的 Hash 值来传递,具体可以参考 Awkward 的文章 How to create floating Sketch plugins。
考虑到 PinLog 的实际情况,输入记录时的界面比较简单,因此使用原生的 UI 开发,查看记录的界面比较复杂可以使用 WebView 来开发。写好UI后,再简单测试一下,PinLog 插件的开发就完成了,接下来就是要让大家知道我开发的插件,并且可以方便的下载。
发布插件
首先把你的插件放到 Github 中拷贝下地址,然后通过在 GitHub - sketchplugins/plugin-directory : An official directory of Sketch Plugins 中开一个 Issue 并贴上插件地址的方式,可以将插件发布到 Sketch 的官网中 。
除了发布在官方渠道上,Sketch Runner 也是大家喜闻乐见的插件平台,具体发布方式也很人性化,在 Twitter 中发推给 Sketch Runner 并附上 Github 地址,就可以完成发布。
完成发布后,重启 Sketch 马上就能在 Sketch Runner 的 Install 中找到。
PinLog的下载地址:
- Dribbble → PinLog
- Githhub → Github.com
- Sketch 官网搜索PinLog → SketchApp
- Sketch Runner 中直接搜索PinLog
感谢我司 Lola Jiang 为 PinLog 插件提供英文文案。
欢迎关注微信公众号:「DesignING」
优设人气专题
iPhone X 学习指南丨优设独家专访丨在线抠图神器丨灵感大全
Sketch神器 | 免费图库丨配色神器丨读书计划丨PPT 神器丨鲁班设计
iOS 11 学习指南丨人工智能丨PS 教程丨AI 教程丨C4D 教程 | 3D教程
================明星栏目推荐================
优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。
设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com
复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。
发评论!每天赢奖品
点击 登录 后,在评论区留言,系统会随机派送奖品
2012年成立至今,是国内备受欢迎的设计师平台,提供奖品赞助 联系我们
AI时代的设计师生存手册
已累计诞生 648 位幸运星
发表评论 已发布1条
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓