【XD】チェックボックスを作成する

チェックボックスの、チェックする前後のデザインを2つ準備します。

コンポーネント化するときは、2つのボックスをチェック前のデザインが前にくるように重ねて、テキストも一緒にコンポーネント化します。（下記の画像はわかりやすいようにチェックボックスを少しズラしています）

右クリックでメニューバーを表示して「コンポーネントにする」からできます。

<ショートカット>

macOS　⌘＋K

Windows　Ctrl＋K

コンポーネントにしたチェックボックスを右側のメニューバーから初期設定のステートのプラスボタンを押してトグルステートを選択します。

トグルとは、同じ操作を繰り返すことで機能のON/OFFを切り替える仕組みのことです。

今回はチェックボックスデザインですので、トグルステートを選択します。

次は、トグルステートを選択した状態で、チェックボックスデザインをチェック後のデザインに変更します。

最後にプロトタイプでアクション設定をします。

インタラクションのトリガーはタップを選択。

アクションの種類は自動アニメーションを選択。

移動先は各ステートへ。イージングはなし。デュレーションは0.01秒に設定します。

設定が終わったらプレビューで確認しましょう。