2022年6月14日
デザイン
Figmotionの使い方
![](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2022/06/Artboard-Copy-98.1.png)
![](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2022/06/Artboard-Copy-98.1.png)
はじめに
今回ご紹介するのは、簡単なアニメーションを作ることができるFigmaのプラグインです!
こちらはFigmotionで作成したボタンをプロトタイプに組み込んだものです!
このようにFigmotionを使えば、Figma上で簡単なアニメーションを作ることができます。そしてFigmaのプロトタイプ機能と組み合わせると、細かな動きを再現することができます。
それでは早速Figmotionについて学んでいきましょう!
Figmotionの基本
Figmotionでは、下記の11項目に対して動きをつけることができます。
Figmotionで設定できる11項目
- X:X軸方向の位置
- Y :Y軸方向の位置
- width:横幅
- height:高さ
- opacity:透明度
- border radius:角丸
- rotation:回転
- fill color:色
- stroke width :枠線の幅
- stroke color:枠線の色
- circle arc:円弧
書き出しはmp4、gif、webmの3つの形式から選べます。
Figmotionを開くと、このような画面が出てきます。
画面を開いたら、まず右上の「Select child to animate」をクリックし、アニメーションをつけるパーツを選択します。
そしたらアニメーションをつけていきます。
Xの横にあるダイヤ型のアイコン(キーフレーム)をクリックすると、タイムハンドルがある場所にキーフレームを置くことができます。タイムハンドルはドラッグするか、またはタイムラインの上にある時間タイトルをクリックすることで動かせます。
次に配置したキーフレームをクリックすると、このようなエディタが出てきます。
msは現在エディタを開いている地点を表しています。そして、その下の数字を変えることでアニメーションを設定できます。
ここまでざっくりと使い方をご紹介しました。ではここから実践編です!
実際に使ってみよう
では、早速Figmotionを使ってみましょう!
インストールはこちらからできます。
使い方をご説明すると同時に、簡単なボタンのアニメーションを作ってみます!
1. パーツをフレームでまとめる
フレームの中に、アニメーションをつけたいパーツが入っている状態にします。
今回作成するボタンは、テキスト(download)と背景の2つのレイヤーから構成されています。
2. figmotionを開く
先ほどのフレームを選択した状態で、コマンド+/からfigmotionを検索して、「Open Figmotion」をクリックします。
3. アニメーションをつけたいパーツを選択する
figmotionが開けたら、まず右上の「Select child to animate」をクリックし「背景」を選択します。
4. アニメーションをつける
1. X軸方向の動きをつける
まず0msから300msの間にX軸方向の動きをつけます。0ms地点の設定をこのようにします。起点を左寄り中央に、座標位置は0にします。
もう片方は700ms地点にキーフレームを置き、同様の設定にします。
2.widthの設定
次に widthの設定です。0msから300ms間に動きをつけます。0ms地点のwidthを32にし、0ms地点での背景を正円の形にします。
3.opacityの設定
最後にopacityを設定です。widthと同様に0msから300ms間に設定します。0ms地点の値を0にし、見えなくします。
4. アニメーションを再生してみよう
ここまで設定してきたアニメーションを再生して確認しましょう。左上の再生ボタンをクリックすると、一連のアニメーションが再生されます。またタイムハンドルをドラッグすることでも確認できます。
5. 書き出し
確認ができたら書き出します。formatでgifを選び、永遠に再生したい訳ではないので「Enable loop」のチェックを外し、「Auto download and insert gif」にチェックを入れます。framerateは1秒間のコマ数です。ここでは24で書き出してみます。
6. 完成!
書き出しが終わりfigmotionを閉じると、gifが生成されています。
これで完成です!
まとめ
今回はFigmaで簡単なアニメーションを作成できるプラクイン「Figmotion」をご紹介しました!
Figmaのプロトタイプと掛け合わせると、タップのような動作に対するフィードバックなどをアニメーションで表現したりすることができます。
今後プロトタイプにアニメーションを取り入れる際には、Figmotionを使ってみてはいかがでしょうか?
Figmaのお仕事に関するご相談
Bageleeの運営会社、palanではFigmaに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。
この記事は
参考になりましたか?
1
0
関連記事
![](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2022/06/Artboard-Copy-98.1-300x179.png)
2022年6月14日
Figmotionの使い方
![](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2022/02/stacked-steps-haikei-7-300x179.png)
2022年2月25日
palanXRサイトリニューアルの流れをご紹介します!
![](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/12/stacked-steps-haikei-5-300x179.png)
2021年12月21日
FigmaでGIFを作成する!
![デザイナー目線のChakra UI](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/12/chakraogp-300x179.jpg)
2021年12月15日
デザイナー目線のChakra UI
![](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/12/eyecatch-300x179.png)
2021年12月12日
Figmaのライブラリの使い方
![](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/12/figmastudy-1-300x179.png)
2021年12月8日
社内のFigma勉強会について紹介します!
簡単に自分で作れるWebAR
「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。
palanARへ![palanar](https://bagelee.com/wp-content/themes/bagelee/img/palanar/palanar_img.png)
palanでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー
![eishis](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2017/06/bagel-150x150.png)
Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。
![yamakawa](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2019/01/icon-150x150.png)
やまかわたかし デザイナー
フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。
![はらた](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2018/12/f1efe970cfdfeb37a1e64ccc1ae16ede-120x120.png)
はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
![kobori](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2019/09/1.png)
こぼり ともろう エンジニア
サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。
![sasai](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2019/11/panda-rect-s-150x150.jpg)
ささい エンジニア
フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。
![damien](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2019/12/mone_svg-150x150.png)
Damien
WebAR/VRの企画・開発をやっています。森に住んでいます。
![ゲスト bagelee](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2020/01/normal-copy-5-150x150.png)
ゲスト bagelee
![かっきー](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2020/12/kaki-150x150.png)
かっきー
![まりな](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/02/nyan-e1612854591162-150x150.jpg)
まりな
![suzuki](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2020/12/icon_yoko-150x150.png)
suzuki
miyagi
![ogawa](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2020/12/moldiv-150x150.jpg)
ogawa
雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。
![いわもと](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2020/12/0b2bc228d70e0486ad56488e01f5d92e-150x150.jpg)
いわもと
デザイナーをしています。 好きな食べ物はラーメンです。
![kobari](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/06/IMG_20191105_135518_713-150x150.jpg)
taishi kobari
フロントエンドの開発を主に担当してます。Blitz.js好きです。
![shogokubota](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/08/image0-9-150x150.jpeg)
kubota shogo
サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!
nishi tomoya
![aihara](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/10/symbol-150x150.png)
aihara
グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。
nagao
SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。
![kainuma](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/11/IMG_1659-150x150.jpg)
Kainuma
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
![sugimoto](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/12/Untitled-150x150.jpg)
sugimoto
asama
ando
iwasawa ayane
![oshimo](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2022/06/tulips-g3b120453e_640-150x150.jpg)
oshimo
異業界からやってきたデザイナー。 palanARのUIをメインに担当してます。 これからたくさん吸収していきます!