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. Others

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

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

  2. Others

    Adobe Acrobat Proの便利なショートカットキーについて(プレゼンテーション編)

    PDFデータをAcrobatを使用して、他の人に見せたい。でも、思…

  3. デザインツールFigmaを使ってみよう デザイン作成

    Others

    Figmaを使ってみよう  ーデザイン作成ー

    前回はFigmaでワイヤーフレームを作成しましたが、今回はそのワイヤー…

  4. ウイスキーのボトルと本とバラの造花

    Others

    ブツ撮りをしてみよう Vol.2〜蛍光灯ライティング

    前回"ブツ撮りをしてみよう Vol.1〜自然光ライティング"では、ブツ…

  5. 左右で画面の明るさを分けたハンバーガー

    Others

    適正露出の写真を撮る・前編(絞り、シャッタースピード、ISO感度の関係)

    露出とは何でしょう?スマホで写真を撮ったり、一眼レフやミラーレスカ…

  6. DTP

    画像に文字を入れるコツ

    皆さんはバナー作成などで写真に文字を入れる際、文字が見えづ…

人気の記事

おすすめの参考書

PAGE TOP