こんにちはrey( @reydesign8376) です
AdobeXDのトグルステートの方法をやってきます
では早速〜
目次
トグルとホバーステートの違い
ホバーステートでトリガーをタップにすると1回だけの効果になります。
設定するにはコンポーネントで2回設定しないといけないので面倒でした
トグルステートはトグルボタンの再現なので1度の設定で無限にオンオフの再現が可能になります。
めっちゃ楽です。
応用して、トグルボタンぽくないボタンデザインも可能です。
設定方法
STEP
初期設定ステートのデザインを作成
STEP
コンポーネントでトグルステートを設定
STEP
トグルステートのデザインを作成
これで完了です
コンポーネント設定
初期設定デザインを制作し
右のメニューからコンポーネント横の+をクリック
緑色の線でグループ化された状態になります。
初期設定のステート>+をクリックすると
新規、ホバー、トグルと選べるのでトグルステートを選択
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/07/スクリーンショット-2022-07-20-22.34.03.png)
トグルステートが選択されていることを確認し、タップ後のデザインを作成
作成と言っても色を変える、ボタンを左に移動程度ですね
背景画像は一枚のグラデーション画像になっていてそれをずらしただけになります。
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/07/スクリーンショット-2022-07-20-22.34.16.png)
これで完了です!
確認で右上の「▶︎」ボタンをクリックし確認します
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/07/スクリーンショット-2022-07-20-22.53.54.png)
スマホ向けデザインや応用して違うアニメーションに活用するのもいいと思いますので
ぜひご活用ください〜
コメント