HOME
本記事は執筆時点（2026年03月06日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。
Webデザインの標準ツールとして欠かせない「Figma」。
私自身、現在進行形でFigmaの操作を習得中なのですが、学べば学ぶほどその奥深さに驚く毎日です。
今回は、自分自身の学習の備忘録も兼ねて、初心者がまず習得したい「クリックできるチェックボックス」の実装手順をまとめました。
クリックできるチェックボックスの実装手順
Webデザインを学んでいると必ず登場する「チェックボックス」。
静止画のデザインだけでなく、実際にクリックして「チェックが入る」動きまで再現できると、プロトタイプの質が一気に上がります。
私自身、Figmaを習得中なのですが、最初は「どうやってON/OFFを切り替えるの？」と迷ってしまいました。
今回は自分の復習も兼ねて、バリアント（Variants）機能を使ったチェックボックスの作り方を初心者視点で解説します。
主な流れは以下の通りです。
- チェックボックスの「ベース」を作成する
- コンポーネント化と「バリアント」の作成
- プロトタイプで「クリック」の動きを双方向に繋ぐ
チェックボックスのデザインはバリエーションが多いので、今回は下図のようなチェックボックスを作ってみたいと思います。
チェックボックスの「ベース」を作成する
まずは、正方形ツール（R）で18px四方の枠（サイズは任意）を作成し、チェックが入っていない状態（OFF）のオブジェクト作ります。
ペンツールやフリー素材を活用してチェックマーク部分も用意しておきます。
コンポーネント化と「バリアント」の作成
正方形のオブジェクトを選択した状態で、右クリックして「コンポーネントを作成」を実行します。
コンポーネント化するとバウンディングボックスが紫色の線に変わります。
次にコンポーネントを右クリックし、「メインコンポーネント」から「バリアントの追加」を実行します。
右サイドバーで追加したバリアントの名前を「選択中」に変更します。
同様に元のコンポーネントも「未選択」に名前を変えておきます。
バリアント「選択中」を編集します。塗りを設定し、用意しておいたチェックマークを配置します。
「チェックが入っていない状態（OFF）」と「入っている状態（ON）」の両方の準備が整いました。
プロトタイプで「クリック」の動きを繋ぐ
最後に、プロトタイプでクリックした時に状態が切り替わるように設定します。
「チェックが入っていない状態（OFF）⇒入っている状態（ON）」とその反対の「入っている状態（ON）⇒チェックが入っていない状態（OFF）」の双方向に動くようにするのがポイントです。
まずは「チェックが入っていない状態（OFF）⇒入っている状態（ON）」の動きを設定します。
「チェックが入っていない状態（OFF）」を選択し、右サイドバーのタブを「プロトタイプ」に切り替えます。
そして「インタラクション」を追加してください。
インタラクションは下図のように設定します。
| トリガー | クリック時 |
|---|---|
| アクション | 次に変更 |
| プロパティ1 | 選択中 |
| アニメーション | ディゾルブ |
「チェックが入っていない状態（OFF）⇒入っている状態（ON）」へ矢印が伸びます。
続いて反対の「チェックが入っている状態（ON）⇒入っていない状態（OFF）」も同様の手順でインタラクションを設定します。
チェックが入っている状態（バリアント）を選択します。
インタラクションを下図のように設定します。
| トリガー | クリック時 |
|---|---|
| アクション | 次に変更 |
| プロパティ1 | 未選択 |
| アニメーション | ディゾルブ |
双方向に矢印が伸びたら完成です。
プロトタイプで動作確認を行う
プロトタイプで動作を確認するために適当なフレームを作成します。
フレームを作成したら左サイドバーからアセットを開き、
作成したボタンをドラッグアンドドロップでフレーム内に配置します。
フレームを選択した状態で右サイドバーからプロトタイプを表示して確認します。
クリックするたびにONとOFFの切り替えができたら成功です。
まとめ
今回は、Figmaでクリックできるチェックボックスを実装する基本の手順をご紹介しました。
「双方向に繋ぐ」という考え方は、チェックボックスだけでなく、アコーディオンメニューやモーダルウィンドウなど、あらゆるUIパーツに応用できるので、しっかり手に馴染ませておきたい技術ですね。