見出し画像

スマートアニメをやってみたい!スプラッシュ画面編 #Figma

今回はFigmaのスマートアニメを使ってスプラッシュ画面作ってみたいと思います。

こちらが完成したものです👇

準備

とらと子どもの画像は、こちらのものを使用しました。
■image 3d cny travel theme poster Premium Vector
Erase bgで背景を切り取っています。

作り方

1、Blob(インクのしみのような形)を、Blobs で作成。

画像1

2、uiGradientsでグラデーションをつける。

画像5

3、フレームを作成しblobと画像を置く。

画像6

4、複製

画像7

5、blobを引き伸ばす。

画像8

6、右側のフレームの画像の位置を少し上にずらす。

画像9

画像27、文字を入れる。右側のフレームの文字は少し上にずらす。

画像10

8、左側のフレームの文字を白にする。

画像9

9、プロトタイプタブでスマートアニメを設定する。

画像11


画像12

完成です⭐✨

画像12

今回はここまでです!また次の記事でお会いしましょう~😉

Follow me here😊

Instagram | TwitterDribbbleLinkedin | Website



よろしければサポートお願いいたします。いただいたサポートはクリエイターとしての活動費に使わせていただきます。