AdobeXDではオンマウスホバーアクションを、アセットにコンポーネント登録することで作れるようになっています。

動きはこんな感じ。

 

1.ボタンを作成します。

リピートグリッドを利用してボタンを作成します。

よく利用しているプラグインはこちら。

＞RepeatGrid Fitter

数を指定することでリピートグリッドがピッタリおさまり、整列ツールを利用しやすくなります。

リピートグリッドを解除し、それぞれのレイヤーに名前をつけておきましょう。

 

2.ボタンをアセットに登録します。

アセットパネルを開いてコンポーネントにオブジェクトをドラッグアンドドロップして登録していきます。

またはControl＋K、⌘Kで登録することもできます。右クリックから「コンポーネントにする」を選ぶことで登録することもできます。

オブジェクトが緑色の枠になったら登録完了です。

 

3.ボタンにホバーアクションを設定します。

ホバーアクションを加えるオブジェクトを選択し、右のパネルで「コンポーネント（マスター）」の「初期設定のステート」横にあるプラスボタンを押します。自動的に「ホバーステート」が設定されます。

ホバーステートが選択された状態で、ホバー後の変化を設定します。

ボタンがグループ化されている場合、ダブルクリックでテキストやボタン本体を選択することができます。

 

4.動きのあるホバーアクションの設定

図のように、アニメーションをさせたい要素を中に仕込んでおきます。

レイヤーはこんな感じ。

ホバーアクションで図のようになるようコントロールします。

アクションは以下の通り。

 

一つ一つの要素を丁寧に作り込めるシステムが整っていて便利ですね。

ステート機能は「プロトタイプ」で、ホバーの他にタップやドラッグといったトリガーを選択し、様々な機能を付け加えることができます。活用してより良いものを作っていきましょう！