【Adobe XD】トグルステートの使い方

トグルとホバーステートの違い

ホバーステートでトリガーをタップにすると1回だけの効果になります。
設定するにはコンポーネントで2回設定しないといけないので面倒でした

トグルステートはトグルボタンの再現なので1度の設定で無限にオンオフの再現が可能になります。
めっちゃ楽です。
応用して、トグルボタンぽくないボタンデザインも可能です。

設定方法

コンポーネント設定

初期設定デザインを制作し
右のメニューからコンポーネント横の＋をクリック
緑色の線でグループ化された状態になります。
初期設定のステート＞＋をクリックすると
新規、ホバー、トグルと選べるのでトグルステートを選択

トグルステートが選択されていることを確認し、タップ後のデザインを作成
作成と言っても色を変える、ボタンを左に移動程度ですね
背景画像は一枚のグラデーション画像になっていてそれをずらしただけになります。

これで完了です！
確認で右上の「▶︎」ボタンをクリックし確認します