![見出し画像](https://assets.st-note.com/production/uploads/images/148308546/rectangle_large_type_2_53ccec7911fae50300c42c99961ad957.jpeg?width=1200)
【5分で完成】FigmaでGIFアニメーションを作りたい!
こんにちは。アメリカ・シリコンバレー在住のSeikaです。
今回はFigmaでGIFアニメーションを作ってみました。
慣れれば5分でできるので、気になる方はやってみてくださいね!
(2024年7月23日公開)
完成品はこちら。
![](https://assets.st-note.com/production/uploads/images/148308229/picture_pc_df595649dba0a5773de356df3601e5ea.gif)
1. 画像を準備
![](https://assets.st-note.com/img/1721757247524-BqPOTbWhZ2.png?width=1200)
2. 被写体を切り抜く
今回はremove.bgを使いました。
![](https://assets.st-note.com/img/1721757338516-aMHg5RHoM3.png?width=1200)
今回はweb上でやりましたが、Figma用プラグイン(Remove BG)もあります。
その場合、最初にAPIの設定が必要です。
3. フレームを置く
ここからfigmaを使います。
まずはフレームを準備。
サイズは480x480。
![](https://assets.st-note.com/img/1721757597516-YrsR4sJsfh.png?width=1200)
4. 写真と文字を配置
先ほど切り取った写真と文字を配置。
今回のフォントはMansalva。
![](https://assets.st-note.com/img/1721757693661-TR3Zq2tbtF.png?width=1200)
5. 複製
4を複製します。(shitとoptionを押しながらずらすと複製できます)
![](https://assets.st-note.com/img/1721757822534-RTnaIz1MEf.png?width=1200)
6. 文字を消す
2枚目(右)の文字を消します。
![](https://assets.st-note.com/img/1721757899806-JdAMWsqBoJ.png?width=1200)
7. Animated GIF Makerを開く
Animated GIF Makerのプラグインを開きます。
![](https://assets.st-note.com/img/1721758002707-3ZBVqDkMss.png?width=1200)
![](https://assets.st-note.com/img/1721757974702-VXcLLT7Bsz.png?width=1200)
8. 設定
詳細を設定します。
Frame delay→300
White is Transparent
Forever
![](https://assets.st-note.com/img/1721758120190-qQYN0Mnh4V.png?width=1200)
9. 生成
Generate GIF(白いボタン)をクリックして生成します。
![](https://assets.st-note.com/img/1721758366690-KKqt7RG3oQ.png?width=1200)
![](https://assets.st-note.com/production/uploads/images/148308530/picture_pc_1026364af8178bfcfa4e579e8b2690a0.gif)
完成です⭐️
今回作ったファイルはこちらからも確認できます👇
![](https://assets.st-note.com/img/1721766850499-KVPlCJjN8a.png)
パブリッシュすることもできます。
もし記事が役に立ったと思ったら、ぜひスキボタンを押してくださいね。
それでは、次回の記事でお会いしましょう!
Follow me here😊
いいなと思ったら応援しよう!
![Seika_USA](https://assets.st-note.com/production/uploads/images/95815341/profile_344b2ade2b13a112cf26f0a558ac9261.png?width=600&crop=1:1,smart)