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

こんにちはrey( @reydesign8376) です

AdobeXDのトグルステートの方法をやってきます
では早速〜

↑こんなん
目次

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

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

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

設定方法

STEP
初期設定ステートのデザインを作成
STEP
コンポーネントでトグルステートを設定
STEP
トグルステートのデザインを作成

これで完了です

コンポーネント設定

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

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

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

スマホ向けデザインや応用して違うアニメーションに活用するのもいいと思いますので
ぜひご活用ください〜

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次