こんにちは、ひよこベアです。
梅雨になるの早いなぁと思ってたら急に晴れたりするので、安定した天気になって欲しいなと思う今日この頃です。
今回は、前回・前々回に引き続きFigmaの使い方について書いていきます。
第一回はこちら
第二回はこちら
デザインを動かしてみよう
早速主題に入りますが、XDと同じくFigmaにもプロトタイプが設定できて、Web上で表示できるリンクの発行と動きの確認ができます。
前回では、このクリエイターズブログのヘッダーでライトモードとダークモードを作成したので、こちらを実際の挙動と同じ動きをするように設定してみましょう。
今回は、ロゴをホバーした時の動きと、ライトモードとダークモードのクリック切り替えを設定していきます。
ホバーの動きをつける
まずは、ホバーの挙動を設定します。
本サイトでは、ホバーの挙動がなかったのですが、今回は不透明度が下がるデザインで実践してみましょう。
ホバーの動きをつけるために、バリアントの中でパーツを増やしていきます。
バリアントの中のプロパティを選択すると、プロパティの下に紫色の＋マークがでますので、こちらをクリックすることで同じものを複製することができます。複製したものに新しい名前をつけ、不透明度を指定しましょう。
完了したら元の状態のバリアントをもう一度選択します。右上のデザインタブをプロトタイプタブに切り替えて、プロパティをホバーするとカーソルから一番近い辺の中央に水色のプラスボタンが出現しますので、ドラッグします。ドラッグした方向に水色の線が伸びていくので、ホバー用に複製したバリアントに重ねると紫の矢印に変化し繋がります。
その状態で手を離すと自動的に接続が完了し、詳細設定ができるポップアップが出ますので、そこで設定するか右側の設定から動きの指定をします。
動きの設定はインタラクションと名前がついていて
- トリガー…いつ
- アクション…動作の種類
- プロパティ…変化後のプロパティの指定
- アニメーション…動作の切り替わり方
の4項目が指定できます。
初期はトリガーが「クリック時」になっているので、ここを「マウスオーバー」に切り替えることで、ホバーした時だけロゴが透過するようになります。また、アニメーションを初期設定の「即時」から「ディゾルブ」に変更するとふわっとした切り替わりになります。
切り替わり方の具合を調整したり、動きのデモで確認もできるので、自分の納得のいく動きに設定しやすいです。
クリック切り替わりでアクションさせる
次は、ヘッダーのライトモードとダークモードがクリックで切り替わるアクションを設定します。
検索フォーム横のボタンクリックで切り替わるようにしたいので、プロパティの中の切り替えボタンを選択します。
ホバーの指定と同じように、右上のデザインタブがプロトタイプに変わっていると、ホバー時にインタラクションを設定するための水色プラスボタンが表示されるため、そこから伸ばした矢印をダークモードの本体部分に重なるようにしてドラッグを終了して接続してください。
インタラクションの設定では、アニメーションの部分を「スマートアニメート」に設定すると実際にボタンをスライドしているような動きにすることができます。
この時、動いてほしくないパーツも動いてしまう場合は、その部分のレイヤー名を初期のプロパティと変化後のプロパティで少し違うものにすると、位置が動いてしまうのを防ぐことができますよ。
クリックでモードを行き来できるようにするため、今度はダークモードの切り替えボタンを選択し、そこからライトモードの本体部分へインタラクションを同じように設定します。
お互いに繋ぐことで、クリックでそれぞれのバリアントが切り替わるようになります。先にインタラクションの設定をしておくと、相互に繋ぐときには同じ設定になってくれますので、最初の接続時にインタラクションの設定を完了しておくとよいです。どちらも繋ぐと紫色の矢印が互いに繋がる形になります。
全て設定した後、右上の再生ボタンでプロトタイプを実行した様子です。
ライトモードのロゴホバー → ダークモードへ切り替え → ダークモードのロゴホバー → ライトモードへ切り替え と変化します。
動きをつけてイメージしやすくしよう
いかがでしたでしょうか？
動きをつけるのは意外と簡単だったかと思います。ただ、バリアントの設定など土台をしっかり作ることが大事ですので、使いやすいデータづくりをした上で、依頼者にもイメージしやすいデータづくりをしてみましょう。
ひよこベアでした。
