![見出し画像](https://assets.st-note.com/production/uploads/images/69612213/rectangle_large_type_2_b587a88e4f96a4676d915cf07ffdd3c5.jpeg?width=1200)
FigmaでGIF作成
こんにちは~!
タチコマのママです!!
今日はですね、先日Twitter投稿したGIFの作成模様を書いちゃおうかと思いますよ!
![](https://assets.st-note.com/img/1641974513502-Uycy9Vjl5P.png)
そもそも「GIF」ってなんぞや?
ですよね。私もその一人でした!
「GIF」
って、
画像形式の一種で、簡易的なアニメーションを表示することができる画像ファイルフォーマットなんですって。動く画像。
「パラパラ漫画」
をイメージするとわかりやすいかも!
Photoshopでも作れるみたいですが、
私が今回の作成に使ったのは
『Figma』
Figmaには「プラグイン」という拡張機能があります。
スマホでいうところの「アプリ」みたいなもので、
やりたい・叶えたい作業を形にしてくれる助っ人なんです!
今回は
「GiffyCanvas」
というプラグインを使って作成していきます。
![](https://assets.st-note.com/img/1641822270900-AkFmjIm9ul.png?width=1200)
プラグインを探して入れる時はここから検索してくださいまし。
![](https://assets.st-note.com/img/1641805807272-NRFZ2MyTz8.png?width=1200)
ではでは早速作り方~
材料
・GiffyCanvasっていうプラグイン
・基本となる大きさのFrame
・使いたい画像
(くまちゃんは切り抜きをしています)
![](https://assets.st-note.com/img/1641804597116-CbgUTSJM5B.png?width=1200)
※ところどころ文字がはっきりしない画像がありますが、
画像をクリックして頂けると、はっきり見えます!
1.基本のFrame
まずこの基本のFrameを用意。
![](https://assets.st-note.com/img/1641822961328-MBvrHn5XzK.jpg)
今回は300×300を使用
![](https://assets.st-note.com/img/1642043352715-8XO87J0xOv.png?width=1200)
画像をクリックすると文字がはっきり見えます!
![](https://assets.st-note.com/img/1641823855349-EFMdZl3O7k.jpg?width=1200)
ここからファイルを開けます!
この基本のFrameに背景となる画像を重ねます。
![](https://assets.st-note.com/img/1641962589548-qFAkiAgzto.jpg?width=1200)
![](https://assets.st-note.com/img/1641963409762-BpCXTCHmyA.jpg?width=1200)
これで動かなくなります。
![](https://assets.st-note.com/img/1641965119724-igqOHCCM4S.png)
グループ化しときましょう。
基本のFrameにクマちゃん画像をのっけます。
![](https://assets.st-note.com/img/1641967508783-PioO7sr3T6.png?width=1200)
これで基本のFrameの準備が出来ました!
2.位置・大きさに変化を加える
基本のFrameが準備できたら、
いよいよ位置・大きさにちょっとづつ変化を加えながら量産していきます。
![](https://assets.st-note.com/img/1641970515139-RYgclYFtaz.png?width=1200)
続けていくとこんな感じになります。
![](https://assets.st-note.com/img/1641735880571-xBzJuM6HG8.png?width=1200)
同じ方法で、
成層圏手前場面、宇宙場面を作っていくとこんな風になります。
![](https://assets.st-note.com/img/1641970940724-6HRJEpvl3z.png?width=1200)
遠くに消えていく感じを出しています。
![](https://assets.st-note.com/img/1641970948112-0IBxHRrUAX.png?width=1200)
飛び出してきた感じに!
全てのFrameを並べるとこんな感じ!
![](https://assets.st-note.com/img/1641803010727-JDOjaAKC80.jpg?width=1200)
画像が小さくなりました💦
3.プラグインを使って動かす
ここまで来たら、
いよいよプラグイン「GiffyCanvas」を使って
動きを出します!
全てのFrameを丸っと囲んで選択。
![](https://assets.st-note.com/img/1641973065736-HftVGVEkoj.png?width=1200)
選択した上で、
右クリック→プラグイン→GiffyCanvas
と進める。
![](https://assets.st-note.com/img/1641973073699-rZZkucHhlg.png?width=1200)
動かしたいスピードを設定します。
速度の強弱をつけるのも面白いです!
![](https://assets.st-note.com/img/1641974003043-1MreszY7cB.png?width=1200)
(Loop Count)
全て設定し終わったらダウンロードをして終了!
![](https://assets.st-note.com/img/1641974422820-21imfJvymV.png?width=1200)
出来上がり~!
![](https://assets.st-note.com/production/uploads/images/69758054/picture_pc_195a8f12903379e870ee755f6acec80c.gif)
修正したのがこちらです!
どうですか?
意外に簡単だと思いませんか?
コツコツ細かい作業が好きな人はやってて楽しいと思います!
作ってみての感想
もともと仕事仲間と遊びながらFigmaを触っていたんです。
「こんなことできるんだねー」とか
「これ面白いね」
みたいな感じでしか触っていなかったのが、
先日初めてFigmaを使っての仕事をやらせて頂いて、
Figma使いやすい!!
っていう良い感触を得たんですよ。
それで、くまちゃんの新しいロゴが出ているのに気づいて、
遊びたくてウズウズしてしまった次第(*^_^*)
試行錯誤しながら作ってる最中は本当に楽しかった!
早く作業に戻りたくて、夕飯の支度・片付けと、とんでもない速さでこなして、またPC前に戻っていましたよww
『この作業好きなんだなぁ』
って感じました^^
このGIF作りが実際の仕事に関係するかは
さておき・・・・さておき・・・・・・・。
楽しみながらFigmaを学べたっていう事実だけはしっかりあるので、
それでOK!!ってことにしときますww
あ~楽しかった♪