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

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

今回の作成パーツ

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

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

作成方法の解説

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

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

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

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

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

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

最後に

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

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

過去の記事

前回の記事

関連記事