Adobe XD で遊んでいたのですが、ホバーステートのアピアランスを設定すると初期設定のステートも同じように変化して差がつけられなくて困りました。色は変えられるのですが。。Adobe XD を再起動してみても変化なし。
ネットで調べても作成する方法はたくさん上がっているのですが解決方法がまとまっている記事は見当たらなかったので、原因を調べてまとめてみました。
解決動画
うまく説明できる自信がなかったので、画面キャプチャしました。音はでないのでご参考までに。
コンポーネントをいじってもだめらしい
細かな仕組みはわかりませんが、コンポーネントではなくエレメント（図形やテキスト）を選択して設定を変えることでそれぞれのステートを変更する必要があるようです。
ネストされた場合（子要素）なんかも同じように中身の要素の値や色を変えることでホバーステートを変更することができるようです。
要素を表示する
ぱっと見レイヤーをみてもコンポーネントしか無いようにも見えるのですがコンポーネントをクリックすると中身の要素を確認することができます。
コンポーネントをクリックして表示された楕円形の設定を変えることで、ホバーステートと初期表示のステートにアピアランス含め変化をつけることが可能です。
注意点
ホバーステートを追加するのはコンポーネント側なので、コンポーネント側のホバーステートを選択してから、図形などをホバーステートの設定に変更してみてください。
またデスクトッププレビューする際には、初期表示のステートに戻してからでないと動きが確認できないのでステートは初期表示のステートに戻してから確認するようにするとスムーズに確認ができます。
おわり
Adobeにしてはなんだか不思議なクセがあるように感じました。けどやっぱり便利だしいろいろできてすごいですね。これからたくさん記事がかけそうな気がしますので勉強頑張ります。
