
公開日: 2023.04.14 | 更新日: 2023.04.14
Figmaで作れるインタラクション付きコンポーネント集
今回はユーザーの操作によってアニメーションなどのインタラクションが発生するUIコンポーネントのプロトタイプの作り方を紹介します。実際に作成されたサンプルファイルも公開していますので、参考にしてください。
この記事のターゲット
Figmaでアニメーション付きのコンポーネントを作りたい方
Figmaのプロトタイプでコンポーネントにアニメーションを設定したい方
クリックで見た目を切り替える
ラジオボタンやチェックボックスなどをクリックすると、オンオフが切り替えられるプロトタイプです。
マウスオーバー(ホバー)で見た目を変化させる
マウスオーバー(ホバー)時に見た目を変化させることができるプロトタイプです。
クリックでオブジェクトをスライドさせる
クリック時にオブジェクトの一部をスライド移動するアニメーション付きのプロトタイプです。
クリックでサイズを変化させる
クリック時にサイズを変更して擬似的に背景色を変化させるアニメーションのプロトタイプです。