トグルの作り方（Figma）

今回の記事では、Figmaプロトタイプ上で動くトグルの作成方法を記載します。

なお、Xdでの作成方法は以下の記事に記載しています。

実際の挙動

トグル部分を選択することでONとOFFを交互に切り替えられます。

トグルの作成方法

まず、初期値（今回はOFF）のトグルを作成し、コンポーネント化します。

コンポーネントにバリアントを追加し、ONの状態になるように修正します。

OFFからONへとプロトタイプを繋ぎます。

先ほどとは逆に、OFFからONへとプロトタイプを繋ぎます。

あとはフレーム上に子のコンポーネントを配置し、プレビューで動作を確認できれば完了です。

まとめ

以上、Figmaプロトタイプ上で動くトグルの作成方法でした。