UIデザインにアニメーションをつけるSketchプラグイン・アプリまとめ

Sketchで作ったデザインファイルにアニメーションをつけたい!!例えば、フロントエンドを自分でやらない時にエンジニアと細かいアニメーションを共有したい時などなど。個人的に「Adobe After Effects」を使えればいいのだが、月額なのでお財布的にちょっと厳しい。そこで、Sketchで作ったデザインファイルにアニメーションをつけられるプラグインやアプリをまとめてみた!

Timeline

1つ目は「Timeline for Sketch」というプラグイン。

Timeline Sletch

2018年6月のアップデートでインタラクションデザインにも対応した。公式のチュートリアルドキュメント(英語)も充実している。さらに、HTMLやCSS、JavaScriptなどのコード生成もできる。公式でチュートリアル動画も出ているので、そちらも活用できそう。

<iframe src="https://www.youtube.com/embed/BlX3jMPe0WA" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

AnimateMate

2つ目は「AnimateMate」というプラグイン。

AnimateMate

「AnimateMate」自体は開発段階のため、無料で利用することができるが、開発段階なのでバグなどに注意が必要そう。AnimateMate 公式ページの真ん中あたりには作例も用意されており、様々な使い方ができそう。

Diya

3つ目は「Diya」というプラグイン。

diya

Sketchのアートボード内で完結でき、使い勝手は良さそうな印象がある。しかし、フリートライアルはあるものの、有料なので導入の敷居が少し高くなってしまう。3つのプランが用意され、1ユーザー59ドル/年から利用できる。プランによって機能も変わるのでプランの詳細はこちらからどうぞ。

HAIKU

4つ目は「HAIKU」というMac向けのアプリ。作ったSketchファイルをインポートし、HAIKU上でアニメーションをつけるイメージ。

HAIKU

オープンソースで開発されているのも特徴で、プレビュー期間の間はフリーで利用できる。ソースコードの書き出しにも対応し、Vue.jsやReact.jsといった最新のフレームワークに対応している点がとても魅力的に感じる。

まとめ

Adobe After Effects」が厳しい人にも、Sketchのプラグインとして利用できれば敷居は低いと感じている。まだすべてのプラグインやアプリを使い込んでいる訳ではないので、なんとも言えないが実用性の高いものは今後ブログでも取り上げられればと思う。