【Adobe XD】マウスホバー時の動きの表現

Adobe XDを使って、マウスがホバーした時の
ちょっとした動きのサンプルをいくつか作ってみました。

それでは、さっそくいってみましょう。

目次

サンプル

① 枠線+テキスト

四隅から枠線が伸びてテキストが現れます。

② 背景が上から出現+テキスト

背景が上から下に出現してテキストが現れます。

③ 背景拡大+テキスト

背景から出現した丸が波紋のように広がってテキストが現れます。

④ 中央から背景が出現+テキスト

中央から現れた背景が上下に広がってテキストが現れます。

おまけ:ハンバーガーメニューいろいろ

作り方

では、ざっくり作り方をご紹介します。

① 枠線+テキストの作り方

構造は「背景用の長方形オブジェクト」、「枠線用の長方形4つ」、「テキスト」になります。
枠線用の長方形の縦横のそれぞれの長さは後で必要になるので、メモしておきましょう。

まず、何はともあれ「コンポーネント」にします。
「コンポーネント」にしたら初期設定のステートで「ホバーステート」を追加します。

「ホバーステート」が追加されました。
マウスがホバーする前の状態を作りたいので、「初期設定のステート」を選択します。

テキストの「不透明度」を0%にします。

長方形1を選択して「横幅を1」にします。
(縦の4は線の幅です。今回は4ピクセルの枠線を引きます)

長方形2も同じ要領で今度は 「縦幅を1」 にします。

続いて、長方形3の「横幅を1」にします。
そのままだと長方形3は左隅にあると思うので、右隅に移動します。

最後に長方形4の 「縦幅を1」 にしたら、
上隅にある長方形4を下隅に移動します。

ホバーする前の状態が出来あがりました。

次に、マウスがホバーした時の状態を作っていきます。
「ホバーステート」を選択した状態で作業します。

テキストの不透明度を100%に戻し、
線の長さもメモしておいた最初の長さを入力して元に戻します。

長方形3と4は、そのまま元の数値を入力して戻すと枠からはみ出してしまいますので、
所定の位置に戻します。
これでホバーした時の状態も完成です。

初期設定のステートを選択して、プレビューで動きを確認してみましょう。

このままでも十分ですが、もっと細かく設定したい方は
「プロトタイプ」からお好みの設定にしてみてください。

四隅の1ピクセルの長方形が気になるようであれば、
動作が少し変わってしまいますが、初期設定のステート時は
不透明度を0%にするのもいいかもしれません。

アレンジ次第でいろいろな動きが作れそうですね!
残りの作り方はまた随時追加していきます。

よかったらシェアしてね!

この記事を書いた人

WebとDTP両方やる人

目次
閉じる