こんにちは、Link-UのUIチームです！

Figmaのプロトタイプでインタラクションをつける際、スマートアニメート、ムーブイン、プッシュアウトなどいくつかの選択肢があるかと思います。

例えばタブUIでよく使用されるのは即時/ディゾルブ/スマートアニメートの3つ。
今回はタブのデザインを用いて、その3つのアニメーションの違いと設定時の注意点をご紹介します。

3つのアニメーション

先ほどあげた3つのアニメーション。

"即時"はその名の通り、切り替えが即時行われます。
では"ディゾルブ"と"スマートアニメート"の違いとは？

ディゾルブとスマートアニメート

ディゾルブ：要素が溶けるようにアニメーションをつける
スマートアニメート：マッチングレイヤーを検知して違いを認識し、アニメーションを付ける

このような違いがあります。
実際の動きをデモ動画で見てみましょう。

タブの動きをアニメーション別で再現

①即時
パッと切り替わる

②ディゾルブ
ふわっと切り替わる

③スマートアニメート
黒の線が滑るように動いて切り替わる

X(旧Twitter)のタブは、スマートアニメートのように下のバーが滑るように動きますね。
少しリッチに見せたければ、ディゾルブかスマートアニメートを設定するのがおすすめです。

スマートアニメートを設定する際の注意事項

スマートアニメートの設定には少し注意が必要です。
次は失敗例とその原因・改善策をご紹介します。

【失敗例】タブ切り替えすると入れ替わってしまう

今の状態
切り替え後のタブコンポーネントをそれぞれ作成。

今回は1つ1つのフレーム内に線とテキストを入れたタブの例です。

スマートアニメートのおさらい

Figma公式サイトの解説にあるように、マッチングレイヤーを検知してというところがポイントです。

マッチングレイヤーというのはその名の通り、”同じレイヤー”を指します。
その検知方法はレイヤー名です。

これを踏まえてそれぞれのタブレイヤーを見てみると…

タブAが開かれている状態(画像一番左)では
中身が「tabA,tabB…」と見た目上の左から順番で、上から下にレイヤーが並んでいます。

しかし、タブB〜Cではそれぞれ見た目とレイヤーの順番がチグハグになっていることがわかります。

⚡️この事例の原因

まずこの事例でタブが入れ替わってしまう大きな原因は、
コンポーネント内のレイヤー名が違うことにあります。

スマートアニメートはマッチングレイヤーを検知＝レイヤー名を基準にアニメーションが行われるため、
タブが開いている状態の[tabA]のレイヤーを切り替え後の画面でもレイヤー順に沿って[tabA]を追いかけるような形でアニメーションされることになり、入れ替わるような動きになってしまう状態になっていました。

【解決法】レイヤー名を揃える

チグハグになっていたレイヤー名と中身を見直します。
どの状態でもレイヤー名と中身を共通して揃えておく必要があります。

(レイヤー名)tabA・・・タブA
(レイヤー名)tabB・・・タブB
(レイヤー名)tabC・・・タブC
(レイヤー名)tabD・・・タブD

そもそもレイヤー順が入れ替わってしまった背景

レイヤー名と中身がチグハグになってしまっていた理由として、
タブを開いている時のデザインと開いていないときでデザインが異なるので、デザインを作成したときに単純にレイヤーを前後して中身だけ入れ替えてしまうなどするとその状況になるかと思います。

レイヤーを見直したプロトタイプがこちら

これでレイヤー順は全て揃ったので
スマートアニメートが同じレイヤーを検知し、正常に動くようになりました。

ただこのままではディゾルブのふわっとする動きと同じになっていて、スマートアニメートの特徴が上手く表現できていません。

滑るようなアニメーションにするには

コンポーネントの作り方によって再現されるアニメーションが変わっていきます。

①失敗〜改善例として挙げたコンポーネントの組み方
②デモ動画のコンポーネントの組み方

違いは、下線がタブコンポーネントに含まれているかの有無です。

最初のデモ動画のように滑るような動きを再現するには
②の下のバーとタブのコンポーネントを分けて組む必要があり、こうすることで下のバーも理想通りにするっと横に動くようになります。

スマートアニメートで今回の滑る下線のタブやシークバーなど、流れる・伸びる等の動きを作りたい時は、基本的に動きをつけたいオブジェクト単体でそれぞれ配置した画面を作ることで上手く再現できるようになるかと思います。

おわりに

今回はタブを例に、3つのアニメーションの例とスマートアニメートで気を付けることをご紹介しました。
UIによって効果的なインタラクションを作ることでエンジニアに伝えやすくもなりますし、よりリッチなデザインを目指せます。

次回はスマートアニメートを使ったカルーセルの作り方をご紹介したいと思います！
お読みいただきありがとうございました！

Link-U クリエイティブチームでは一緒にサービスを作っていくデザイナーを募集しています。
少しでも興味を持ってくださった方、もっと詳しく知りたいと思ってくださった方はぜひこちらのリンクからご連絡ください。

募集中の職種（※2024/1/10時点）

• 25年新卒採用 : デザイナー( UIデザイナー / UXデザイナー / グラフィックデザイナー )