![見出し画像](https://assets.st-note.com/production/uploads/images/53077074/rectangle_large_type_2_1fae628f4986965a596ed71b63858fe4.png?width=1200)
Adobe XDの便利な機能 ~ ステート応用編① ~
こんにちは!シキラボのモリオです。
今回は、前回お話しした「ステート機能」を応用することで作成可能な便利パーツの作成方法を書いていきたいと思います!
今回の作成パーツ
今回は一つのコンポーネントに複数のステートを使用した「ラジオボタン」の作成方法を解説していきたいと思います!
また今回の解説は、以前紹介した記事のアップデート版になりますので、まだ読んでいない方は下記からチェックしてみてください!
作成方法の解説
ステートを設定するにはメインコンポーネントが必要なので、まずベースとなる未選択状態のセットを作成しましょう。
今回はラジオボタンを「3項目+リセットボタンのセット」で作成します。
コンポーネント化するとプロパティインスペクターに「初期設定のステート」の項目が追加されます。
そして項目の右にある「+」ボタンを押し今回は「新規ステート」3つ追加して、わかりやすく「①」「②」「③」等に名称変更しましょう。
これで「初期設定のステート」と合わせて4ステート設定されました。
次に各ステートに切り替えてデザインを調整します。
「初期設定のステート」は全て未選択状態、「①」「②」「③」は選択されたもの以外は未選択状態にデザインを調整しましょう。
これで全状態のデザインが揃ったのでここからは「プロトタイプモード」に切り替えます。
ではプロパティインスペクターからそれぞれのボタンにインタラクションを設定していきます。
まず「初期設定のステート」は各項目ボタンから各ステートに移動可能にします。
それ以外のステートは、ラジオボタンは選択されたもの以外のステートに移動可能に、リセットボタンは「初期設定のステート(未選択)」に移動するように設定しましょう。
ここまで準備ができたらプレビューで動きを確認して「ラジオボタン」の完成です!
最後に
今回は、前回お話しした「ステート機能」を応用することで作成できる「ラジオボタン」の作成方法と注意点について書かせていただきました。
この他にも様々動きを組み込んだパーツを作成可能なので、今後も継続的に紹介できればと思います!
それでは今回もお付き合い頂きありがとうございました!
過去の記事
前回の記事
関連記事
この記事が気に入ったらサポートをしてみませんか?