「插件」两分钟认识一款把 Sketch 变成 Principle 的插件:Diya

「插件」两分钟认识一款把 Sketch 变成 Principle 的插件:Diya

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

whose.design - 发现更多设计工具www.whose.design

📕阅读准备



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


🌕第一步,连线

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


🌖第二步,调整

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


🌗第三步,预览


🌘第四步,导出

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

1. 一份普通的原型文件,老板有个浏览器就可以浏览;

2. 一份带动效注释的原型文件,开发可以参考上面的参数进行效果还原。

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



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


⚽️运动曲线

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


🏀形变动画

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


🏈路径动画

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


⚾️动画复用

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


whose.design - 发现更多设计工具www.whose.design

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

其他文章

感谢阅读

编辑于 2019-02-18

文章被以下专栏收录

    THINK. SHARE. LEARN.

    Ant Design 是一个致力于提升「用户」和「设计者」使用体验的企业级设计体系,利用统一的设计规范、前端实现、设计/研发工具链对产品研发赋能,全面提升企业级产品的使用体验和研发效率。