figma-toggle-switch-with-slide-animation-prototype
公開日: 2022.04.15  | 更新日: 2022.04.15

スライドするアニメーション付きのスイッチ(プロトタイプ)

今回はFigmaのプロトタイプ(Prototype)機能を利用して、スイッチをクリックするとスライドしながら背景色が変わるアニメーションを適用したサンプルファイルの紹介です。

この記事のターゲット

  • Figmaの中級者〜上級者

  • Figmaでプロトタイプ機能を使ったアニメーション表現について知りたい方

  • Figmaのプロトタイプが適用されたサンプルファイルが欲しい方


スライドするアニメーション付きのスイッチの概要

toggle-switch

スイッチをクリックすると、スライドしながら背景色が変わるアニメーションが表示され、もう一度クリックすると元の状態に戻るようなアニメーションがプロトタイプで設定されています。

細かい作り方は割愛しますが、どのように作られているか気になる方は、以下の作成中の様子を参考に、無料でサンプルファイルをダウンロードできますので、実物を見て試していただければと思います。

Figmaで作成中の様子

まずスイッチを構成するシェイプを用意してスイッチ(ON/OFF)の形を作ります。

toggle-switch1

スイッチの構成要素の名前をONとOFFで一致するように名付けます。

これをしておくと、変更前と変更後で要素の大きさが変わった場合にprototypeの「Smart animation」機能で要素の変形による中間差分を描画するアニメーションが適用されるようになります。

toggle-switch2

Component、Variants化してprototypeで遷移設定をします。

toggle-switch3

実際に動かしながら調整します。動画では作成中に要素の名前が入れ違いになっている箇所があってうまく中間差分のアニメーションがつくように名前を修正しています。

toggle-switch4

これで完成です。

スライドするアニメーション付きスイッチのサンプルファイル

toggle-switch-sample

この記事で紹介したスイッチのサンプルファイルを Figma Community にアップロードしていますので、そちらから自由に複製(Duplicate)できます。

実際に触ったりできるサンプルファイルを公開しています。応用してオリジナルのスイッチの作成の参考にしてください。

スライドするアニメーション付きスイッチ | Figma Community

私用・商用問わずご自由にご利用ください。


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

Figmaで塗りが円形に広がるアニメーションのボタン(プロトタイプ)

今回はFigmaのプロトタイプ(Prototype)機能を利用して、ボタンをマウスオーバーやクリックした際に塗りが円形に広がるようなアニメーションを適用したサンプルファイルの紹介です。 ... 続きを読む

figma-button-with-fill-animation-prototype

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

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

figma-how-to-create-radio-button

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

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

figma-how-to-create-form

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

うえんつ

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