Adobe認定トレーニングセンター

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

Figmaを使ってみようーアニメーション作成ー

Others

Figmaを使ってみようーアニメーション作成ー

使用ソフト: Figma  

今回は番外編でFigmaでアニメーション作成の紹介になります。
ただアニメーションを作るだけでなく動きをCSSアニメーションとして書き出せるのでWEB制作でも活躍できそうです。

今までの記事とは内容が繋がっていませんがFigmaが使用できること前提の紹介になります。
まだ記事をご覧になっていない方はこちらから。

Figmotionの導入

まず「Figmotion」といプラグインを導入しましょう。
導入はこちらから。
https://www.figma.com/community/plugin/733025261168520714/Figmotion

Figmotionの使い方

起動

①右クリックでプラグインから「Figmotion」を選び、さらに「Open Figmotion」を選びます。
Figmotion使い方1

②起動したらアニメーションさせたいフレームを選びます。
Figmotion使い方2

③フレームを選ぶとこのようなエディタが起動します。
Figmotion使い方3

キーフレームの編集

動きを追加するには任意の秒数にキーフレームを追加します。
例:開始から3秒後に回転させたい → 開始から3秒後にキーフレームを追加
①動きを入れたい秒数に赤い目盛をあわせ、◇をクリックするとキーフレームが追加されます。
Figmotion使い方4

②追加したキーフレームをクリックすると動きについて細かく設定できます。
Figmotion使い方5

③「custom」を選ぶとイージングの設定画できます。
Figmotion使い方6

アニメーションの書き出し・保存

①「Render」をクリックするとアニメーションの書き出しができます。
・「Format」で書き出し形式を選びます。形式はgif・mp4・webmが選べます。
・「Framerate」でフレーム数を選びます。
※フレーム数とは1秒に何コマ記録されるかの数値です。24fps〜30fps程度が人間が見てスムーズに感じる数値です。
Figmotion使い方7

②書き出しが完了すると「view last render」というリンクが現れますのでリンク先に飛びます。
Figmotion使い方8

③リンク先に書き出した動画が表示されるので「ダウンロード」ボタンをクリックして保存します。
gifの場合は画像の上で右クリックし「名前を付けて保存」から保存してください。
Figmotion使い方9

CSS・JSONでの保存

作成したアニメーションを「CSS」もしくは「JSON」として保存します。
※JSONとはJavaScriptで定義されているオブジェクト表記法の1つになります。
①「Export」をクリックすると「As CSS」と「As JSON」という2つのボタンが出るので保存したいものを選んでクリックします。
Figmotion使い方10

②保存したものを貼り付けて使用できます。(見本はCSS)
Figmotion使い方11

動きの種類

Figmotionでは10種類の動きが作成できます。
これらを組み合わせれば複雑な動きを付けることも可能です。
以下からは一つ一つの動きについて解説していきます。
Figmotion使い方12

X

「X」は横の動きを表します。
数字が増えれば右に進み、減れば左に進みます。
Figmotion使い方13

Y

「Y」は縦の動きを表します。
数字が増えれば下に進み、減れば上に進みます。
Figmotion使い方14

width

「width」は横幅の大きさを表します。
数字が増えれば横幅が増え、減れば横幅が減ります。
Figmotion使い方15

height

「height」は縦幅の大きさを表します。
数字が増えれば縦幅が増え、減れば縦幅が減ります。
Figmotion使い方16

opcity

「height」は縦幅の透明度を表します。
数字が「0」の場合は透明(見えなくなる)になり、「1」に近くなるほど濃くなります。
Figmotion使い方17

border radius

「border radius」は角の丸みを表します。
数字が「0」の場合は角ができ、「100」に近くなるほど丸くなります。
Figmotion使い方18

rotation

「border radius」は回転を表します。
数字が「0」の場合は回転せず、数値が大きくなるほど回転する速さが早くなります。
数値に「-」が付くと時計回りになり、「-」がない場合は逆時計回りになります。
例:-360・・・時計回り   360・・・逆時計回り
Figmotion使い方19

fill color

「fill color」は色の変化を表します。
カラーピッカーから変化させたい色を選びます。
Figmotion使い方20

stroke width

「stroke width」は線の太さを表します。
数字が「0」の場合は戦は表示されせず、数値が大きくなるほど線が太くなります。
「stroke width」は「stroke color」で線の色を設定しないと表示されないので注意してください。
Figmotion使い方21

stroke color

「stroke color」は線の色を表します。
カラーピッカーから変化させたい色を選びます。
「stroke color」は「stroke width」で線の太さを設定しないと表示されないので注意してください。
Figmotion使い方22

まとめ

動きの機能を組み合わせると以下のようなアニメーションも簡単に作成できます。
ぜひFigmotionを使ってWEBにアニメーションを取り入れて見てください。
Figmotion使い方23

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. 雪の結晶完成例

    Illustrator

    もうすぐ冬本番!Illustratorで雪の結晶を作ろう

    今年もあとわずか。日々寒くなってきましたね。これからの時期、広告媒…

  2. 華やかなサンプル

    Others

    ヴィンテージなデザインが簡単に作れるツール

    ヴィンテージなデザインが簡単に作れるWebツール「Heritage D…

  3. Others

    キーボードの操作を画面に表示しよう!フリーソフト「KeyCastr」

    IllustratorやPhotoshopを教える時に、今どういうショ…

  4. food pic

    Others

    革命!?料理の写真を美味しそうに加工できるサイト

    手作りのご飯や、外食をした際に料理の写真を撮る人は多いのではないでしょ…

  5. Mac

    Macで簡単にスクリーンショットを撮ろう!フリーソフト「Captur」の使い方

    こちらの記事でご紹介した「Captur」のサイトは2018/8/2現在…

  6. Others

    【デザイン】おしゃれなデザインのトレンド3選

    Hola!(こんにちは!)ファッションと同じように、デザインも…

人気の記事

CodeCamp

おすすめの参考書

PAGE TOP