記事の詳細

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

動きはこんな感じ。

 

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

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

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

>RepeatGrid Fitter

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

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

 

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

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

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

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

 

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

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

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

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

 

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

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

レイヤーはこんな感じ。

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

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

 

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

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

 

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
インクループ株式会社

インクループ株式会社

「お客様が嬉しくて思わず自慢したくなるような仕事の成果を提供する!」を全員の目標として頑張っています。そしてもう一つの目標が社員が世界一働きやすい会社になることです。従業員の幸せ、お客様の幸せ、そして社会に貢献することができる会社を目指して、社員全員の力を合わせて頑張っています。

ほかの投稿も読んでみませんか?

コメントは利用できません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る