figma-how-to-create-radio-button
公開日: 2022.02.04  | 更新日: 2022.02.05

Figmaでシンプルなラジオボタン・コンポーネントを作る方法

今回は、Figmaでシンプルなラジオボタン・コンポーネントを作る方法を紹介します。一般的なラジオボタンを「Component」や「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よければご活用ください。

この記事のターゲット

  • Figmaの中級者〜上級者

  • Figmaでラジオボタン・コンポーネントを作りたい方

  • Figmaの Component と Variants と Auto layout の使い方が知りたい方


1. アイコンのみのラジオボタン・コンポーネントを作る

まずは、アイコンのみのラジオボタン・コンポーネントを用意します。これがなければ始まりませんね。

アイコンについては、Font awesomeやMaterial Designなど、既成のアイコンセットを利用してコンポーネントを組むケースもあると思いますが、今回はシェイプとパスを使用して作ってみようと思います。

大まかな手順は次の通りです。

  1. Frameを作成(今回は24px)

  2. Frameの中に枠線部分のシェイプをEllipseで作成(24px)

    1. Strokeを2pxで設定

  3. 2で作成したEllipseを複製する

    1. 複製した方はStrokeを削除

    2. Fillを#FFFFFF(白)で設定

  4. 枠線より小さい円形シェイプをEllipseで作成(10px)

  5. 2の枠線シェイプと4の円形シェイプを「Outline stroke」で複合パスに変換

radio button1

Frameには「radio-button/on」と名前をつけておきます。

できたらそのまま複製します。複製した方の中央の円形シェイプを削除して、Frameの名前を「radio-button/off」としてComponent化していきます。

radio button2

ラジオボタンをすべて選択した状態でツールバーの4つの菱形のアイコンの右の小さい「▼」ボタンを押すと、「Create multiple components」というコマンドが出るので、それをクリックします。すると、それぞれ個別に Component を作成できます。

作成できたComponent をそのまま複数同時に選択していると、右プロパティに「Variants」というセクションが表示されるので、そこの「Combine as variants」をクリックしてVariantsにします。

Variants は Component の形態のひとつで、ボタンのような状況によってバリエーションが変化するコンポーネントをひとつにまとめて、状況に応じてオプションで簡単に変更できるようになる機能です。

これで、基本となるラジオボタンのみのコンポーネントができました。

2. ラベル付きのラジオボタン・コンポーネントを作る

次は、リストなどで使用できるラベル付きのラジオボタン・コンポーネントを作ります。

先ほど作成したラジオボタンのアイコンをサイズ調整して利用します。

さっきのアイコンをそのまま拡大・縮小すると崩れてしまうので、右プロパティのResizingでFrame内のオブジェクトに対して「Scale」を設定します。

これをしておくことで、Instanceが拡大・縮小されると、中身のオブジェクトも合わせて拡大・縮小されるようになります。

radio button3

できたら、テキストとアイコンと合わせてAuto layoutで組み合わせます。

テキスト・オブジェクトとアイコンと選択した状態で「Shift + Aキー」を押すと、「Frame」という Auto layoutが適応された状態のフレームで囲われます。

アイコンとテキストの間の間隔は、Auto layoutの「H」のようなアイコンの「Spacing between items」で設定した値になります。今回は8pxになるようにしました。

radio button4

最後に、同じようにComponent、Variants化すればラベル付きラジオボタン・コンポーネントの完成です。

3. プロトタイプでラジオボタンのON/OFFをアニメーションする

作成したラジオボタンのコンポーネントを使ってプロトタイプを組むことで、クリック時にON/OFFをアニメーションさせることができます。

右プロパティの一番上のタブを「Prototype」に切り替えると、プロトタイプ設定モードとなります。

この状態でコンポーネントを選択すると青い丸がオブジェクトの右端に表示されます。これをドラッグしてアクションした後の遷移先を設定することで、表示を切り替えたり、画面遷移させたりすることができます。

radio button5

おまけ:ラジオボタン・コンポーネントのサンプルファイル

radio-button-sample

この記事で作成したラジオボタンのサンプルファイルを Figma Community にアップロードしていますので、そちらから自由に複製(Duplicate)できます。

シンプルなラジオボタン・コンポーネント | Figma Community 私用・商用問わずご自由にご利用ください。

また、チェックボックス・コンポーネントもあわせて参考にしてください。

Figmaでシンプルなチェックボックス・コンポーネントを作る方法

今回は、Figmaでシンプルなチェックボックス・コンポーネントを作る方法を紹介します。一般的なチェックボックスを「Component」や「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よければご活用ください。 ... 続きを読む

figma-how-to-create-checkbox


いかがだったでしょうか。

ラジオボタンは2つ以上の選択肢のうち、1つだけ選択させたい場合に用いるコンポーネントです。複数選択できるようにする場合はチェックボックスを使います。

  • 単一選択:ラジオボタン

  • 複数選択:チェックボックス

ラジオボタンは、アンケートや設定項目などでよく見かけますね。チェックボックスと合わせてよく使うコンポーネントなので、いつでも使えるように用意しておくと便利そうです。

この記事を読んだ方におすすめの記事

Figmaでシンプルなフォーム・コンポーネントを作る方法

今回は、Figmaでテキスト入力のシンプルなフォーム・コンポーネントを作る方法を紹介します。一般的なサービスでよくみるフォームを「Component」や「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よければご活用ください。 ... 続きを読む

figma-how-to-create-form

Figmaでシンプルなボタン・コンポーネントを作る方法

今回は、Figmaでシンプルなボタン・コンポーネントを作る方法を紹介します。テキストのシンプルなボタンを、「Component」と「Variants」と「Auto layout」を使って丁寧に作成します。また、自由に使えるサンプルファイルも用意していますので、ご活用ください。 ... 続きを読む

figma-how-to-create-button

Figmaで無料のアイコン素材集を利用する方法

今回はFigmaで無料のアイコン素材集を利用する方法を紹介します。今回紹介するものはすべてFigma上で公開されているものなります(利用条件はライセンスによる)。アプリケーションのUIやWebページの装飾など様々なシーンで幅広く活用できますので、ぜひチェックしてみてください。 ... 続きを読む

figma-how-to-use-icons

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告