Adobe XDの便利な機能 ~ ステート応用編① ~
見出し画像

Adobe XDの便利な機能 ~ ステート応用編① ~

こんにちは!シキラボのモリオです。
今回は、前回お話しした「ステート機能」を応用することで作成可能な便利パーツの作成方法を書いていきたいと思います!

今回の作成パーツ

今回は一つのコンポーネントに複数のステートを使用した「ラジオボタン」の作成方法を解説していきたいと思います!

ムービー_1

また今回の解説は、以前紹介した記事のアップデート版になりますので、まだ読んでいない方は下記からチェックしてみてください!

作成方法の解説

ステートを設定するにはメインコンポーネントが必要なので、まずベースとなる未選択状態のセットを作成しましょう。
今回はラジオボタンを「3項目+リセットボタンのセット」で作成します。

画像2

コンポーネント化するとプロパティインスペクターに「初期設定のステート」の項目が追加されます。
そして項目の右にある「+」ボタンを押し今回は「新規ステート」3つ追加して、わかりやすく「①」「②」「③」等に名称変更しましょう。
これで「初期設定のステート」と合わせて4ステート設定されました。

画像3

次に各ステートに切り替えてデザインを調整します。
「初期設定のステート」は全て未選択状態、「①」「②」「③」は選択されたもの以外は未選択状態にデザインを調整しましょう。

ムービー_2

これで全状態のデザインが揃ったのでここからは「プロトタイプモード」に切り替えます。
ではプロパティインスペクターからそれぞれのボタンにインタラクションを設定していきます。

画像6

まず「初期設定のステート」は各項目ボタンから各ステートに移動可能にします。
それ以外のステートは、ラジオボタンは選択されたもの以外のステートに移動可能に、リセットボタンは「初期設定のステート(未選択)」に移動するように設定しましょう。

画像6

ここまで準備ができたらプレビューで動きを確認して「ラジオボタン」の完成です!

ムービー_1

最後に

今回は、前回お話しした「ステート機能」を応用することで作成できる「ラジオボタン」の作成方法と注意点について書かせていただきました。
この他にも様々動きを組み込んだパーツを作成可能なので、今後も継続的に紹介できればと思います!

それでは今回もお付き合い頂きありがとうございました!

過去の記事

前回の記事

関連記事


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
UI、UXデザイナー/株式会社シキラボ 映画鑑賞(特にホラー)、腕時計(主にCASIO系)、筋トレ、ゲーム全般が好きなので空きあらばその辺りの記事も書いていきます。