![見出し画像](https://assets.st-note.com/production/uploads/images/86378685/rectangle_large_type_2_cde389700e5ac2fbfff25d3e08b9bb7e.png?width=1200)
Smart animate機能を使ってみよう!
こんにちは。デザイナーのasatoです。
弊社のデザイン部で毎週行われているデザトレ(勉強会)。
私の担当回では、figmaのSmart animate機能についてやりました。
figmaとは主にUIデザインを作成するために使用するツールです。
無料でも扱えたり、複数人で同時に作業が行えたりします。
figmaにはプロトタイプという機能が存在します。画面遷移などの実際の動きを試しに作成できる機能です。
そのプロトタイプの一つであるSmart animate機能はFrame間の差分を自動で埋めて動きをつけてくれるものとなります。
今回作成するにあたって以下の方のnoteを参考にさせていただきました。
実際の作例を載せていたりするので、非常にありがたかったです。
やり方
やり方は結構シンプルです。
①Frameを用意、文字を入れる
![](https://assets.st-note.com/img/1662538504536-neVqqO9EWm.jpg?width=1200)
②①のFrameを複製、文字をズラす
![](https://assets.st-note.com/img/1662538594442-DBsdfnjyki.jpg?width=1200)
③右メニューからプロトタイプを選択、Frameの最初と最後を繋げる
![](https://assets.st-note.com/img/1662538686386-OdJcyo5xT4.png?width=1200)
④設定を下記にする(全て)
![](https://assets.st-note.com/img/1662538722996-2jisYZfaiY.png)
以上の方法で無限ループするアニメーションの完成です。
実際に完成したものがこちら↓
![](https://assets.st-note.com/production/uploads/images/86380060/picture_pc_79d48a2ea19a457628ac6f089d1738ee.gif)
実践
では早速、皆さんが作成してくださったものを紹介していきたいと思います!
![](https://assets.st-note.com/production/uploads/images/86379522/picture_pc_55fcec6a2c0446086357dd83e3aa0287.gif)
![](https://assets.st-note.com/production/uploads/images/86379592/picture_pc_5e5374bc2c6394a00b4b059999af82c2.gif)
![](https://assets.st-note.com/production/uploads/images/86379587/picture_pc_be19f451b7cf1973ccd81b6e5291cef8.gif)
![](https://assets.st-note.com/production/uploads/images/86379575/picture_pc_a6b564b69bab22d3f38afe816e46e4e3.gif)
![](https://assets.st-note.com/production/uploads/images/86379581/picture_pc_3e7bcd7ff77a366a2fc5de5fc3e909d4.gif)
![](https://assets.st-note.com/production/uploads/images/86379584/picture_pc_bcdadb8c433c23951e13e042d556ca90.gif)
皆さん多種多様にSmart animate機能を使いこなせていますね!
まとめ
以上がSmart animate機能の実践の記録でした!
デザイン部の他の方々が担当されたデザトレのnoteも以下のリンクから読めます!ぜひ読んでみてください🌸