
Smart animate機能を使ってみよう!
こんにちは。デザイナーのasatoです。
弊社のデザイン部で毎週行われているデザトレ(勉強会)。
私の担当回では、figmaのSmart animate機能についてやりました。
figmaとは主にUIデザインを作成するために使用するツールです。
無料でも扱えたり、複数人で同時に作業が行えたりします。
figmaにはプロトタイプという機能が存在します。画面遷移などの実際の動きを試しに作成できる機能です。
そのプロトタイプの一つであるSmart animate機能はFrame間の差分を自動で埋めて動きをつけてくれるものとなります。
今回作成するにあたって以下の方のnoteを参考にさせていただきました。
実際の作例を載せていたりするので、非常にありがたかったです。
やり方
やり方は結構シンプルです。
①Frameを用意、文字を入れる

②①のFrameを複製、文字をズラす

③右メニューからプロトタイプを選択、Frameの最初と最後を繋げる

④設定を下記にする(全て)

以上の方法で無限ループするアニメーションの完成です。
実際に完成したものがこちら↓

実践
では早速、皆さんが作成してくださったものを紹介していきたいと思います!






皆さん多種多様にSmart animate機能を使いこなせていますね!
まとめ
以上がSmart animate機能の実践の記録でした!
デザイン部の他の方々が担当されたデザトレのnoteも以下のリンクから読めます!ぜひ読んでみてください🌸