陌北默

随着 Sketch 在版本49中增加了 Prototyping 功能,试图给 Sketch 安装「原型」义肢的插件也越来越多。前几天发现一款有意思的插件 Diya,安装后的 Sketch 神似 Principle。插件的 slogan 是「Bring your ideas to life」,为你的设计画龙点睛。

 

阅读准备

 

上手很简单,走完核心流程大概可以分四步。

第一步,连线

和 Prototype 功能相同的连线方式,从 Layer 到 Artboard。当然,目前见过所有具备原型能力的插件都是这么操作的。

 

第二步,调整

每个动画都可以在时间轴面板上调节。Sketch 升到版本49.3的同学,时间轴面板暂时无法被呼出,等作者修复吧。。。

 

第三步,预览

 

第四步,导出

Diya 的导出功能很贴心,会针对原型面相的对象「老板」和「开发」生成两个文件:

  • 1. 一份普通的原型文件,老板有个浏览器就可以浏览;
  • 2. 一份带动效注释的原型文件,开发可以参考上面的参数进行效果还原。

虽然我没当过「老板」和「开发」,但是这个细节暴露了 Diya 的作者是服务设计出身,具备前端开发能力的全链路设计师。

 

快速上手后,还有这些功能可以玩一下。

运动曲线

如果对动效的要求很高,嫌弃默认值的同学可以自己调节动效参数。

 

形变动画

可以比照 Keynote 的「神奇移动」来理解这个功能。

 

路径动画

这是个非常有趣的小技巧,可以看一下官方教程,讲的很清楚。

 

动画复用

正如 Sketch 的精华 Symbol,用 Diya 制作的交互动画同样可以复用。

 

文章总结

怎么看 Diya 都比 anima 家每年$79的 Sketch 插件 Timeline 靠谱多了!!

 

原文地址:非科班设计(公众号)

作者:徐小马

 201712251514185271

转载请注明:韦德1946 » 两分钟认识一款把 Sketch 变成 Principle 的插件:Diya

登录收藏

学UI就上韦德1946!越努力,越幸运!

“韦德1946www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

 
你可能喜欢的:
教你一个技巧,用 Sketch 一天出数百张 Banner 图教你一个技巧,用 Sketch 一天出数百张 Banner 图
蚂蚁金服设计团队隆重推出sketch插件,真是设计师的福音~蚂蚁金服设计团队隆重推出sketch插件,真是设计师的福音~
不用代码就能做酷炫 H5?i-TOP定制H5编辑器强势上线!不用代码就能做酷炫 H5?i-TOP定制H5编辑器强势上线!
那些你可能没发现的Sketch冷知识【第二期】那些你可能没发现的Sketch冷知识【第二期】
你还不知道的那些好用素材收集软件你还不知道的那些好用素材收集软件
Sketch常用快捷键及技巧Sketch常用快捷键及技巧
那些你可能还没发现的Sketch冷知识【第一期】那些你可能还没发现的Sketch冷知识【第一期】
再有人找你蹭logo,就用这个网站再有人找你蹭logo,就用这个网站
2018年不可错过的19款Sketch线框图套件2018年不可错过的19款Sketch线框图套件
「插件」一分钟学会 Material Design 配色插件「插件」一分钟学会 Material Design 配色插件