【XD】「トグルボタン」の作成方法

【XD】「トグルボタン」の作成方法

アイコン

トグルボタン」を作成したいのですが、どう作ればいいんですか〜?

アイコン

5分」ほどで、わかる内容にまとめたのでさっそく解説していきますね〜




1.今回作成する「トグルボタン」

今回は、以下のようなトグルボタンを作成していきます。



2.「トグルボタン」の作成手順

①「角丸長方形」と「」を準備。

①「角丸長方形」と「円」を準備。

②「角丸長方形」と「」を全選択。
③右クリックで「コンポーネントにする」をクリック。

②「角丸長方形」と「円」を全選択。③右クリックで「コンポーネントにする」をクリック。

④初期設定のステートの「」をクリック。
⑤「トグルステート」をクリック。

④初期設定のステートの「+」をクリック。⑤「トグルステート」をクリック。

⑥「トグルステート」を選択。
⑦トグルボタンを「ON」の状態に編集。
⑧「プロトタイプ」をクリック。

⑥「トグルステート」を選択。⑦ボタンを「ON」の状態に編集。⑧「プロトタイプ」をクリック。

⑨「初期設定のステート」を選択。
⑩インタラクションの「トリガー:タップ」に選択。
⑪アクションの「種類:自動アニメーション」「移動先:トグルステート」「イージング:イーズアウト」「デュレーション:0.3秒」に選択。
※今回はデフォルトの設定にしております。
⑫「プレビュー」ボタンをクリック。

⑨「初期設定のステート」を選択。⑩インタラクションの「トリガー:タップ」に選択。⑪アクションの「種類:自動アニメーション」「移動先:トグルステート 」「イージング:イーズアウト」「デュレーション:0.3秒」に選択。※今回はデフォルトの設定にしております。⑫「プレビュー」ボタンをクリック。

⑬「トグルアクション」を確認。

⑬「トグルアクション」を確認。

さいごに

アイコン

トグルボタン」をつくることができました〜

アイコン

またつくってみてください〜