【Figma】Smart Animate機能でできること

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay2です！

昨日は無料画像素材サイトUnsplashが提供している画像API「Unsplash Source」についての記事でした。

Unsplash Sourceを使ってみよう！

今日は、figmaのSmart Animate機能でプロトタイプに簡単に、もう少しリッチなアニメーションを追加する方法をご紹介します。

Smart Animate機能とは

figmaのSmart Animate機能はAdobe XDの「Auto Animate」と同じような自動アニメーション機能です。

実際にどんなアニメーションを作ることができるのか、figmaの公式サイトで紹介しているので、そちらの動画をご覧ください。

「Create Advanced Animations with Smart Animate」より

使用できるプロパティ

figmaのSmart Animate機能でサポートされているプロパティのご紹介です。

スケール

レイヤーやオブジェクトの大きさが変わった場合、smart animateでそのオブジェクトが拡大したり縮小したりするよう見せることが可能です。

この例では、再生ボタンをタップ/ホバーするとボタンが大きくなるようにしています。

ポジション

frame間でオブジェクトの位置に変更があった場合、オブジェクトの間の動きをsmart animateが自動で補完してくれます。

この例では、再生位置を終了位置までドラッグで変更することができるようになっています。

透明度 (Opacity)

レイヤーを隠すのではなく、透明度を変更させることにより、オブジェクトをふわっと出したり、フェードアウトさせたりすることが可能です。また、レイヤーのブレンドモードも合わせて使うことによりオシャレ雰囲気を出すことができます。

音楽プレーヤーの画像をタップすると、音楽のカテゴリが出るように、文字と黒の背景の透明度を変えています。

回転 (Rotation)

オブジェクトのローテーションを変更することができます。
１つのオブジェクトのみにかけることも可能ですし、グループ全体での回転にもsmart animateは適用します。

音楽プレーヤー次ボタンをタップすると、ちょっとした回転のアニメーションが入るようにしています。

塗り (Fill)

オブジェクトの塗りをアニメーションすることができます。
単色の塗りだけではなく、グラデーションや画像などもサポートされています！

音楽プレーヤー次ボタンをタップすると、先ほどとは違いパッと画像が切り替わりアニメーションを入れました。

Smart Animateの使い方

次に、Smart Animateの使い方を紹介していきます。

今回はこちらのシンプルな音楽プレーヤーアプリのプロトタイプにアニメーションを加えていきます。

ご自分でも試したいという方はこちらのfigmaファイルを使用して、一緒にプロトタイプを作ってみましょう。
figmaファイルはこちらからダウンロード

また、「sample」ページに出来上がったプロトタイプがあるので、一通りの設定が終わったら、そちらと答え合わせしてみてください。

ステップ1

プロパティパネルの「Prototype」タブをクリック

ステップ2

レイヤー、グループ、もしくはフレームをクリックし、プロトタイプとアニメーションの設定を作っていきます。

今回に関しては、featured tracksの全域をドラッグしたら、アニメーションを付けていきたいので、「featured tracks」のグループをクリックします。

ステップ3

選択したオブジェクトの右側に出てくるつまみをクリックアンドドラッグで、つなげたいフレームにつなげていきます。

これでフレーム間の接続ができました。

ステップ4

「prototype」タブの「Interaction」部分でアニメーションのきっかけとなるトリガー(Trigger)、アクション(Action)、そして最終状態(Destination)を設定していきます。

今回は、トリガーは「On Click」、アクションは「Navigate to」、最終状態はフレーム「Player 2」に設定します。

ステップ5

「Animation」部分の「Transition」フィールドを「Smart Animate」に変更します。

ステップ6

アニメーションをよりナチュラルにするため、イージングとアニメーション時間を設定します。

私の設定は下記画像を参考にしてください。（ご自由に変更いただいて大丈夫です）

ステップ7

つけたいアニメーションの全てにステップ2~6を繰り返し、プロトタイプが出来上がったら、画面右上の「Present」iconからプロトタイプを実際にプレビューできます！

これでプロトタイプの出来上がりです。

まとめ

以上、figmaのSmart Animate機能でプロトタイプに簡単に、もう少しリッチなアニメーションを追加する方法についてご紹介しました！

簡単にもう少しリッチなアニメーションがプロトタイプに導入できるので、ぜひ試してみてください。

また、Adobe XDを使用されている方は似た機能でAuto animateというのがあります。
こちらも記事で紹介しているので、ぜひご覧ください。

Adobe XDとは？XDの便利機能を勉強しよう！【これからはじめるXD】