【Figma】トグルスイッチ（ON/OFF切り替えボタン）を作る【プロトタイプ】

投稿日:2026年03月24日

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

本記事は執筆時点（2026年03月24日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

Webデザインの標準ツールとして欠かせない「Figma」。

私自身、現在進行形でFigmaの操作を習得中なのですが、学べば学ぶほどその奥深さに驚く毎日です。

今回は、自分自身の学習の備忘録も兼ねて、初心者がまず習得したい「トグルスイッチ（ON/OFF切り替えボタン）」の実装手順をまとめました。

Figma公式サイトこちら
https://www.figma.com/ja-jp

クリックできるトグルスイッチの実装手順

WebサイトのUIに欠かせない「トグルスイッチ」。

Figmaでは静止画のデザインだけでなく、実際にクリックして「ON/OFFの切替」動きまで再現できると、プロトタイプの質が一気に上がります。

私自身、Figmaを習得中なのですが、最初は「どうやってON/OFFを切り替えるの？」と迷ってしまいました。

今回は自分の復習も兼ねて、バリアント（Variants）機能を使ったトグルスイッチの作り方を初心者視点で解説します。

主な流れは以下の通りです。

トグルスイッチのデザインはバリエーションが多いので、今回は下図のようなトグルスイッチを作ってみたいと思います。

まずは、長方形ツールと楕円ツールでトグルスイッチのパーツを作成します。

長方形は角丸を設定しカプセル状にし、「OFFの状態」に用いるので背景色はグレーにしておきます。

2つのパーツを重ねたらグループ化します。

作成したグループを選択した状態で、右クリックして「コンポーネントを作成」を実行します。

コンポーネント化するとバウンディングボックスが紫色の線に変わります。

次にコンポーネントを右クリックし、「メインコンポーネント」から「バリアントの追加」を実行します。

右サイドバーで追加したバリアントの名前を「オン」に変更します。

同様に元のコンポーネントも「オフ」に名前を変えておきます。

バリアント「オン」を編集します。スイッチの円の位置を右側に移動し、塗りを設定しました。

これで「ONとOFF」の両方の状態が用意できました。

最後に、プロトタイプでクリックした時にONとOFFが切り替わるように設定します。

「OFF⇒ON」とその反対の「ON⇒OFF」の双方向に動くようにするのがポイントです。

まずは「OFF⇒ON」の動きを設定します。

「OFF」を選択し、右サイドバーのタブを「プロトタイプ」に切り替え、「インタラクション」を追加します。

インタラクションを下図のように設定します。

「OFF⇒ON」へ矢印が伸びます。

続いて反対の「ON⇒OFF」も同様の手順でインタラクションを設定します。

双方向に矢印が伸びたら完成です。

プロトタイプで動作を確認するために適当なフレームを作成します。

フレームを作成したら左サイドバーからアセットを開き、作成したトグルスイッチをドラッグアンドドロップでフレーム内に配置します。

フレームを選択した状態で右サイドバーからプロトタイプを表示して確認します。

クリックするたびにONとOFFの切り替えができたら成功です。

今回は、Figmaでトグルスイッチ（ON/OFF切り替えボタン）を実装する基本の手順をご紹介しました。