Anima 是一款 Sketch 插件,可以让你在 Sketch 内直接给界面添加交互,设计动画,并导出代码。

自动响应式布局

安装了 Anima 之后,Sketch 右侧中会多出 Anima 的设计面板。你可以直接在这里调节设计稿,设计出响应式的效果。还可以使用特有的 Pins、Stacks 和 Padding 来进行布局。

auto-layout.gif

可交互原型

接着,你可以使用 Flow、Link、Overlays 等工具来连接界面,设置交互效果,实现一个真正可以交互的原型。

link.png

智能图层

Anima 的智能图层让你的设计稿距离高保真原型更进一步,它可以将图层转换为真实的 HTML 元素,比如一个可以输入的输入框、一个可以播放的视频,等等。甚至,你还可以嵌入自定义的 HTML/Javascript/CSS 代码。

smart-layers.png

预览

设计完成,可以直接在浏览器中预览。你可以一边设计一边预览,查看它在各种尺寸下的表现。预览会生成草稿,存储与云端。

preview.png

分享

当你最终完成了设计,就可以将草稿发布,生成一个分享链接,或者邀请其他人查看。

share.png

协作

你可以在 Anima 中创建一个团队,邀请成员体验原型,并进行评论。这样你就可以收集反馈,不断修改设计。