HOME
本記事は執筆時点（2026年03月24日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。
Webデザインの標準ツールとして欠かせない「Figma」。
私自身、現在進行形でFigmaの操作を習得中なのですが、学べば学ぶほどその奥深さに驚く毎日です。
今回は、自分自身の学習の備忘録も兼ねて、初心者がまず習得したい「一つだけ選択できるラジオボタン」の実装手順をまとめました。
ラジオボタンは「どれか1つを選んだら、他の選択肢がOFFになる」という仕様が重要です。
チェックボックスと異なり、この動きをどう表現すれば良いのか、自分なりの整理も兼ねて、複数の選択肢が連動して動くラジオボタンの作成手順を詳しく解説します。
ラジオボタンの実装手順
ラジオボタンのおおまかな作成の流れは以下の通りです。
- ラジオボタンを用意する
- 複数の選択肢（ラジオボタン）をひとまとめにコンポーネント化する
- バリアントを追加し、選択状態のパターンを用意する
- クリックに応じた処理を設定する
ラジオボタンのデザインはバリエーションが多いので、今回は下図のようなラジオボタンを作ってみたいと思います。
ラジオボタンを用意する
まずは1つのラジオボタンの作ります。
楕円ツールで20pxの円と一回り小さい円（サイズは任意）を作成し、重ね合わせグループ化します。
こちらが未選択状態【OFF】のラジオボタンになります（内側の小さい円は選択状態の色を表示するために設置しています）。
右クリックでメニューを表示し、「コンポーネントを作成」を実行します
コンポーネント化するとバウンディングボックスが紫色の線に変わります。
複数の選択肢（ラジオボタン）をひとまとめにコンポーネント化する
次に作成したラジオボタンと任意のテキストを組み合わせて一つの選択肢を作ります。
それを必要な数だけ複製し、ひとまとめにしてグループ化（フレーム化）したら、下図のようにグループごとコンポーネント化します。
バリアントを追加し、選択状態のパターンを用意する
コンポーネントを右クリックし、「メインコンポーネント」から「バリアントを追加」を実行します。
今回の例では「安い」「普通」「高い」という選択肢を作りたいので、それぞれのボタンが選択された状態として、合計3パターン（メインコンポーネント1つ、バリアント2つ）を用意します。
選択状態であることがわかるようにボタンの内側の円の背景色を変更します。
右サイドバーでメインコンポーネントの名前をわかりやすいように「デフォルト」から「Aを選択中」へ変えておきます。
同様に他の2つバリアントの名前を変更しておきます。
クリックに応じた処理を設定する
続いて各ラジオボタンがクリックされた時の動作を設定していきます。
まず「Aを選択中」グループにおいて「ボタンB」をクリックした時に「Bを選択中」の状態に変更するように設定します。
「Aを選択中」グループの「ボタンB」を選び、右サイドバーのタブを「プロトタイプ」に切り替えたらインタラクションを追加します。
インタラクションは以下のように設定しました。
| トリガー | クリック時 |
|---|---|
| アクション | 次に変更 |
| プロパティ1 | Bを選択中 |
| アニメーション | 即時 |
設定すると「ボタンB」から「Bを選択中」へ矢印が伸びます。
同様に「ボタンC」もインタラクションを設定します。こちらのプロパティ1は「Cを選択中」を指定します。
これだけでは1度しかボタンの切替ができないので残り2つのバリアントにおいてもインタラクションを設定し、双方向に切替ができるようにしていきます。
「Bを選択中」の「ボタンA」のインタラクションのプロパティ1は「Aを選択中」を指定します。
「Bを選択中」の「ボタンC」、「Cを選択中」の「ボタンA」「ボタンB」もインタラクションを設定すると下図のように双方向に矢印が伸びる状態になります。
プロトタイプで動作確認を行う
プロトタイプで動作を確認するために適当なフレームを作成します。
フレームを作成したら左サイドバーからアセットを開き、作成したラジオボタングループをドラッグアンドドロップでフレーム内に配置します。
フレームを選択した状態で右サイドバーからプロトタイプを表示して確認します。
各ボタンをクリックしたときに切り替えができたら成功です。
まとめ
今回は、Figmaで一つだけ選択できるラジオボタンを実装する基本の手順をご紹介しました。