Figma × Lottielab で簡単にアニメーションをつくる

デザイン

こんにちは！High Linkでプロダクトデザイナーをしているsaoriです。

「サクッと簡単なアニメーションを作りたい」「でもAfter Effectsを開きたくない」
と思ったことありませんか？

今回は、Figmaからエクスポートできてアニメーションが作れる「Lottielab（ロッティーラボ）」を試してみたので、簡単に紹介します。
以下はLottielabを使ったアニメーションgifです。

Lottielabとは？

ブラウザ上でアニメーションを作成できるモーションデザインツールです。
シンプルで機能が必要最小限って感じなので、すぐに理解でき、操作しやすいと思います。
さらに、FigmaからワンクリックでLottielabにエクスポートが可能！カンタンすぎる🎉

エディタはこんな感じ。超シンプルなUI

「Lottielab」と「LottieFiles」の違いは？

名前が似ていてややこしいのですが、全然違うサービスです。
どちらもFigmaのプラグインがあり、エクスポートしてアニメーションが作成できる機能です。

Figma to LottieFiles は「紙芝居アニメーション」

LottieFilesのプラグインは、Figmaでプロトタイプアニメーションを作ったあと、プラグインを立ち上げてその場でアニメーションのプレビューとLottie書き出しができます。
画面ごとにアニメーションさせるので紙芝居のようなアニメーションになります。

遷移をつけたプロトタイプを用意してプラグイン起動

ちなみに、LottieFilesに取り込んだアニメーションは、LottieFilesが提供してる「Lottie Creator」というWeb上で作成できるアニメーションツールを使えば、タイムラインアニメーションの編集が可能です。
ですが、使い勝手がLottielabより複雑な印象を受けました…。

Figma to Lottielab は「タイムラインアニメーション」

Lottielabは、Figmaにある静止画をプラグインを使ってLottielabに送り、タイムラインアニメーションをつけていきます。
各オブジェクトに対して、秒数の設定やイージングなど細かく調整できます。
例えば、「1個目のハートがアニメーションしてる0.2秒後に2個目のハートを表示させて、緩急はそれぞれ〇〇を設定して…」など、短い時間の中で色々表現したい時に最適。

ちなみに女性のイラスト部分はPNGなんですが、SVGじゃなくてもインポートできました。

違いを大雑把にまとめると

今回は、「UI操作が簡単で学習コストが低い方が良い」という理由から、Lottielabを使うことにしました！
Lottielabは、書き出しの時にウォーターマーク（透かし）がついてしまうので、今回限りで課金することにしました。

Lottielabでアニメーションを作る準備

事前にLottielabにSign Upをしておきます。
https://www.lottielab.com/

Figmaでやることは3つだけ！！

  1. プラグイン「Lottielab」を検索してクリック
  2. ツールが立ち上がるのでエクスポートしたいFrameを選択
  3. 「Open in Lottielab」をクリック

これでLottielabに転送されるので、アニメーション作業がすぐに開始できます。（png,jpg,svg,jsonも読み込めます）

どんなアニメーションにしたいか考える

今回は「タスク達成時に表示されるお祝い画像」を、よりリッチに表現したいと思い、アニメーションを作ることにしました。
アニメーションさせるために考えていたことは以下です。

  • モーダルで表示されるため、3秒以内に収まるようにしたい
  • 「おめでとう」感を出すためにテキストをアニメーションさせたい
  • 静止画ではハートが1個だけど、アニメーションでハートを増やして強調したい
  • 背景も動かしてより目を惹く感じにしたい

アニメーションストーリーを事前に考える（大体で）

基本的に以下の項目（プロパティ）を組み合わせてアニメーションを考えていきました。

  • サイズ
  • 不透明度
  • 位置
  • マスク
  • パスのトリミング

調整できるプロパティやツールは、動画付きの解説があってわかりやすいです！

それぞれ何の要素が何秒目に表示され、どんな動きをするか？をストーリーをもとに考えて、調整していきました。

事例紹介：流れる筆記体アニメーション

一部ですが、作り方を解説します！6ステップでできます。
これは「マスク」と「パスのトリミング」を使って作りました。

①ペンツールで文字を一筆書き

まずはアニメーションさせたいオブジェクトの上で、ペンツールで一筆書きみたいに描いていきます。線が被った箇所がアニメーションされるので、書き順を意識して描いていきます。

②線を太くする

パスを最後まで書けたら、線（Shape Layer）の太さを下のテキストが隠れるくらいまで太くします。

③マスクを作る

下のテキストと上に書いた線（Shape Layer）を選択してマスクをかけます。

④色を変更する

書いた線（Shape Layer）の色を、デザインと同じ色に変更します。

⑤アニメーション開始時の値を変更する

Path（Shape Layer）を選択肢し、アニメーションスタート時のRevel Pathを100%から0%にします。0%にするとPathが見えなくなります。（終了時は100%なので見えるようになる）
ちなみにSpaceを押すと再生できます。

⑥アニメーション速度の緩急（イージング）を調整する

Shape Layerのタイムラインをクリックすると右のパネルにイージングの選択肢が表示されるので選択できます。（7パターンありました）

ちなみにパスを手動で調整して好みのイージングにすることも可能です。

書き出し形式は「Lottie」「Gif」「MP4」

それぞれサイズやFPS（frame per seconds：フレームレート）も指定する事ができます。

書き出し形式一覧

今回はGIFアニメーションが必要だったので、ダウンロードした後容量を軽くしたい場合は以下のようなサービスで圧縮しました。
GIFイメージをオンラインで圧縮する

ループしないGIFアニメを作りたい場合は、Lottielab上でループなしの設定ができないため、GIFをPhotoshopに持っていきループなしにして書き出します。

他に以下のようなアニメーションも作成しました🩷 

感想

「短時間でちょっとしたアニメーションを作って演出をリッチにさせたい」という要望に対しては、LottielabはUIもわかりやすく操作しやすいと思いました！
簡単なものであれば数分、ちょっと複雑でも数時間でできちゃうので、とっても楽です。

動画で3分ほど簡単なチュートリアルも用意されてるので、まだ試されてない方はぜひ試してみてはいかがでしょうか！

High Linkでは、デザイナーを募集しています！

私たちのチームでは新しい仲間を募集しています！

まずはカジュアルにお話しできたら嬉しいです！ご連絡お待ちしています！