10月を目前にしてもしつこい暑さが残っていますが、皆さまいかがお過ごしでしょうか。私藤田は入社から4ヶ月が経とうとしていますが、徐々にウィルスタイルの雰囲気にも馴染んできたような気がします。
さて、今回はFigmaの使い方シリーズ第3弾としてプロトタイプを使ったホバーアニメーションの再現方法をご紹介します！
Webサイトのマイクロインタラクションの定番であるホバーアニメーション。最近はほとんどのサイトに使用されていますね。「マウスカーソルがリンクの付いたボタンのクリック領域に入ったよ」ということをユーザーに認識してもらうことを目的につけられることが多いアニメーションです。かつてはボタンの背景色が即時に切り替わるようなシンプルなものが多かったものの、技術が進歩した現在では、様々な動きのホバーアニメーションが作られています。
今回はFigmaでWebサイトなどのインタラクティブなデザインデータを作る際に活用できる、プロトタイプを用いたホバーアニメーションの作成方法をご紹介します。プロトタイプを作成することで、デザイナーが思い描くアニメーションをエンジニアやクライアントへ円滑に伝えることができるので、今回の記事を参考に是非取り組んでみてください。それでは早速行ってみましょう！
Table of contents
＜基礎編＞ ホバー時に色やアイコンが変化するボタン
まずは、弊社が制作したAtomis様のウェブサイトで使用した、こちらの”view more”ボタンを再現しながら、作り方を見ていきましょう。
大まかには、「ホバー前」と「ホバー状態」のボタンをそれぞれデザインして、ボタンにカーソルを重ねたときに「ホバー前」→「ホバー状態」となるようなアニメーションをつけることで再現します。
今回は、次のようなステップで作成します。
- step1. ホバー前状態のボタンをデザインする
- step2. ボタンをコンポーネント化する
- step3. バリアントを追加し、ホバー状態のボタンをデザインする
- step4. プロトタイプでホバー時の動きを設定する
- step5. 使いたい領域に作成したボタンのインスタンスを挿入する
手順に入る前に新しいプロジェクトで新しいフレームを作成するか、ボタンを挿入したいデザインデータを用意して下さい。
それでは順を追って作成していきます。
step1. ホバー前状態のボタンをデザインする
まずはホバー前の状態のボタンをデザインします。
今回は “View more”というテキストと右矢印のアイコンを準備し、2つを選択しフレーム化します。
※この時、オートレイアウト機能を使うと、文字が変更になったりしてもレイアウトが崩れない汎用性の高いボタンを作成できます。
次に、各要素のサイズや、ボタン内のレイアウトを調整します。枠線の色は、濃いグレーを設定し、色の不透明度を10%程度にしておきます。
ホバー前のボタンが完成しました。
step2. ボタンをコンポーネント化する
完成したボタンを右クリックし、コンポーネント化します。こうすることで、サイト内で同じボタンを複数使用しても、一括で管理することができます。コンポーネントの基礎については以前の記事をご覧ください。
step3. バリアントを追加し、ホバー状態のボタンをデザインする
作成したコンポーネントを選択し、サイドメニューからバリアントを追加します。
元のバリアントを”normal”、追加したバリアント2を”hover”と命名しておきます。
作成した”hover”のバリアントを使って、ホバー状態のボタンをデザインします。
今回は、枠線の色の不透明度変更とアイコンの移動・色の変更を行います。
step4. プロトタイプでホバー時のアニメーションを設定する
まず、サイドメニュー上部からプロトタイプモードへ切り替えます。
先程のコンポーネントへカーソルを合わせると、フレームの境界に”+”が出てきます。ホバー前のボタン”normal”にある”+”から”hover”へドラッグして表示される線をつなぎます。
するとアニメーションを設定するポップアップが表示されますので、次の通り設定します。
step5. 使いたい領域に作成したボタンのインスタンスを挿入する
最後に、作ったボタンを配置します。
“normal”のバリアントのみを選択し、コピー。ボタンを配置したいフレームへペーストします。
完了したら、フレームを選択し、右サイドバー上部の”▶”をクリックし、プロトタイプビューで実際の動きを確認しましょう。ようやく完成です。
いかがでしょうか。このように、Figmaのプロトタイプを使えば、簡単にホバーアニメーションを再現することができます。
＜発展編＞ホバー時に飛び出るお問い合わせボタン
次に、発展編としてこちらのポップなお問い合わせボタンを作成してみましょう。
※円滑に作成いただくには、Figmaの「フレーム」という概念の基本的な理解が必要です。
step1. ホバー前の状態をデザインし、フレーム化する
先程と同様に、ホバー前のデザインを作成します。今回はテキストと手を振る絵文字を配置しました。
step2. アニメーションのための下準備を行い、コンポーネント化する。
今回はホバー時にテキストが上下に入れ替わるアニメーションを作りたいので、ボタンのフレーム外に同じテキストを複製し、隠しテキストを作成します。（※レイヤー上ではフレームの中に入れる）
その後フレーム自体を選択し、右サイドバーから「コンテンツを隠す」をチェックします。これでフレームの外にあるテキストが非表示になります。
次に、ボタンが飛び出たあとの背景を仕込むため、ボタンの下にボタンと同じ形・同じ大きさの図形を下に挿入し、先程のボタンとともにフレーム化します。塗りはネイビーにしてみます。
ホバー時にボタン自体が飛び出るための空間を作るため、先程作成したフレームを上に少し拡大します。
※フレームを選択し、⌘ (Windowsの方はCtrl) を押しながら境界をドラッグすると、フレームの枠のみを拡大できます。
フレーム全体をコンポーネント化し、バリアントを作成します。
step3. ホバー状態のボタンをデザインする
先程と同様、コンポーネントのバリアントを作成し、こちらを元にホバー状態のボタンをデザインします。今回施した変更は下記のとおりです。
- 元のテキストとstep2で作成した隠しテキスト両方を選択し、隠しテキストが元のテキストと同じ位置に来るまで上に移動
- step2. で仕込んだ背景を除いたボタン全体を選択し、コンポーネントのフレーム枠上端まで移動させる
- 手の絵文字の傾きを変更
- ボタンの塗りを変更（円形グラデーション）
- ボタン自体にブルーのドロップシャドウを追加
step4. ホバー時のアニメーションをつける
先ほどと同様に、プロトタイプモードに入り、2つのバリアントを結び、アニメーション設定します。今回はボタンが飛び出すような表現をしたいので、スマートアニメートの「曲線」をカスタムスプリングとし、オプションを下記の通り調整しました。
最後に、インスタンスを別のフレームへ貼り付け、プロトタイプビューを確認して完了です！
さいごに
いかがでしたでしょうか。後半は少し難しかったかもしれません。
Figmaのプロトタイプは、ユーザーとのインタラクティブなアニメーションを具体的に表現するための強力な機能です。今回ご紹介したホバーアクション以外にも、多様なアニメーションを再現できます。
デザインデータの品質向上はもちろん、エンジニアやクライアントとのコミュニケーションを円滑にするためにも、プロトタイプ機能をぜひ活用してみてください。
今後もFigmaに関するさまざまなナレッジをご紹介していきますので、次回の記事もお楽しみに！