今回は、Adobe XDを使ってお問い合わせフォームなどにあるラジオボックス（実際に押せる）を作成する方法を紹介します。
今回紹は、コンポーネントの機能を使い実際に押せるボタンを表現します。この機能を使いこなせば、一枚の絵としてのワイヤーフレームだけではなく、実際にユーザーがアクションを起こした際の見え方も表現する事ができる様になります。
一つレベルの上がった指示が出せる様になるので、WEB制作やアプリ製作者は覚えておきましょう。
XDで実際に押せるラジオボタンを作る方法
①まずはラジオボタンの基本となるデザインを作成しましょう。今回は、丸を二重に重ねた良くあるデザインにしてます。
②丸のオブジェクトは各々グループ化して一つのオブジェクトにしておきます。
③ラジオボタンとなるオブジェクトを選択して、右側のプロパティインスペクターにあるコンポーネント（マスター）の横の+マークをクリックします。するとステートを追加できるので「ホバーステート」を追加します。
④追加したステートを選択した状態で、ラジオボックスの中に丸の色を変更する。（今回は#999に変更）
コンポーネント（マスター）を初期設定のステートに合わせるとデフォルトの状態。追加したステートを選択した際に何かの動きが起きた状態のデザインにする。
⑤XD画面の左上にあるプロトタイプを押してプロトタイプモードに移動します。その状態で初期設定のステートを選択すれば動作が起きる引き金（トリガー）と動き方（アニメーション）を設定できます。
トリガーをタップにすればクリックすると初期設定のステートから追加ステートに切り替わる様になります。
これで完成です。
実際の動きは、XDの画面右上にある▶︎マークを押すと確認できます。
今回作成したラジオボックスをプレビューすると以下の様になります。
以上が「XDで実際に押せるラジオボタンを作る方法」でした。
