AdobeXDのトグルステートでチェックボックスを作ってみました！

AdobeXDに最近追加されたトグルステートを使用してチェックボックスのような見た目を作ってみました。

Contents

トグルとは

少し前置きですがトグルは、例えばボタンのオン／オフのように状態を行ったり来たりすることができることを意味します。(ONの状態とOFFの状態を持つ)

チェックボックスの場合は「チェックマークが入った状態」と、まだ「チェックが入っていない状態」があり、これをクリックで状態を変化させたいと思います。

説明するのは苦手なので、動画を確認していただくのも手段かと思います。（音声は入っていない）

手順としては以下となります。

四角形とチェックマークを作成する
作成したものを、チェックマークは透明 (アピアランス 0) にしてからコンポーネント化する
コンポーネントにトグルステートを追加
トグルステートを選択して、チェックマークを透明から表示 (アピアランス 100)に戻す
この状態で再生するとある程度完成してるので、意図した通りかプレビューで確認
問題なければプロトタイプ画面へ移り、作成したコンポーネントを選択し、初期設定のステート及び、トグルステートをそれぞれイージングなし、デュレーション0.01に変更
完成です。

ちょっと面倒ですが、以前は新規ステートで似たような手順で作成していたのですが、個人的にはトグルステートがわかりやすくていいかなと思っています。

AdobeXDはアニメーションに今後力を入れていくんですかね、現状でもかなりいろいろなことが再現できそうなのでこのままエクスポートでWebサイトはコーディング要らずで作成できるようになる未来も近いのでしょうか。