Figmaで作れるインタラクション付きコンポーネント集
今回はユーザーの操作によってアニメーションなどのインタラクションが発生するUIコンポーネントのプロトタイプの作り方を紹介します。実際に作成されたサンプルファイルも公開していますので、参考にしてください。
この記事のターゲット
Figmaでアニメーション付きのコンポーネントを作りたい方
Figmaのプロトタイプでコンポーネントにアニメーションを設定したい方
クリックで見た目を切り替える
ラジオボタンやチェックボックスなどをクリックすると、オンオフが切り替えられるプロトタイプです。
Figmaでシンプルなラジオボタン・コンポーネントを作る方法
今回は、Figmaでシンプルなラジオボタン・コンポーネントを作る方法を紹介します。一般的なラジオボタンを「Component」や「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よければご活用ください。 ...
Figmaでシンプルなチェックボックス・コンポーネントを作る方法
今回は、Figmaでシンプルなチェックボックス・コンポーネントを作る方法を紹介します。一般的なチェックボックスを「Component」や「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よければご活用ください。 ...
マウスオーバー（ホバー）で見た目を変化させる
マウスオーバー（ホバー）時に見た目を変化させることができるプロトタイプです。
マウスオーバー・クリックすると罫線スタイルが変わるテーブル（プロトタイプ）
今回はFigmaのプロトタイプ（Prototype）機能を利用して、テーブルのセルをマウスオーバーやクリックした際に枠線の色が変わったり背景色が変わるアニメーションを適用したサンプルファイルの紹介です。 ...
クリックでオブジェクトをスライドさせる
クリック時にオブジェクトの一部をスライド移動するアニメーション付きのプロトタイプです。
スライドするアニメーション付きのスイッチ（プロトタイプ）
今回はFigmaのプロトタイプ（Prototype）機能を利用して、スイッチをクリックするとスライドしながら背景色が変わるアニメーションを適用したサンプルファイルの紹介です。 ...
クリックでサイズを変化させる
クリック時にサイズを変更して擬似的に背景色を変化させるアニメーションのプロトタイプです。
