WebDesigner's Memorandumウェブデザイナーの備忘録

Figmaで細かいアニメーションを作成できるプラグイン「Motion」

Figmaで細かいアニメーションを作成できる「Motion」

最終的な実装イメージも表現するために、Figmaのプロトタイプ機能ではSmart Animationを使ってかなり細かいアニメーションを作成できます。

通常のアニメーションであればこれでも十分ですが、「Motion」というプラグインを使うとさらに細かく・便利にアニメーションを作成できます。

Motion

Motion

インストールするとFigmaのメニューバーに[Plugins]→[Motion]が追加されます。

基本的な使い方

メニューバーの[Plugins]→[Motion]を選択するとMotionのパネルが表示されます。

動画編集アプリで見かけるタイムラインのようなパネルになっています。
こうして見るとFigmaのUIに合わせて作られていますね。

Figma Motion

最低限の画面それぞれの役割は下記の通りです。

Motionの基本的な概要

やることは各オブジェクトに「キーフレーム」と呼ばれるポイントを打っていって、キーフレームごとに位置やサイズなどの状態を指定していきます。

本当に動画編集アプリのような形の作り方になるので、Figma内に動画編集機能がついたような感覚です。

実際にアニメーションを作成する

1. オブジェクトの移動

実際に試してみる方が早いので、まずは簡単なオブジェクトの移動を試してみます。

Figmaで長方形ツールを使ってオブジェクトを1つ用意します。
Motionパネルに移動すると、先ほど作成した長方形がレイヤーに追加されているので、選択します。

あとは「X」プロパティにキーフレームを追加します。

Figmaで長方形の移動

タイムラインハンドルを1秒(1s)に移動します。
Figmaの画面上で長方形を移動させて、「キーフレームを追加」ボタンをもう一度クリックします。

Motionで長方形を移動させる

これで、0秒のときに最初のX座標の位置情報が記憶されて、1秒のときに移動後のX座標の位置情報が記憶されます。

あとはその0秒から1秒の間の座標変化をいい感じにアニメーションしてくれます。
「Play」をクリックすると実際にアニメーションされます。

長方形の移動

X座標だけでなく、Y座標もキーフレームを追加すると縦方向にも移動させられます。

このように、「この秒数からこの秒数まで、この値を変化させたい」と指定をしていきます。
指定をするときはキーフレームを追加して情報を保存していくイメージです。

2. アニメーションの基点を設定

今度は移動ではなく回転させてみます。
基本的な設定は先ほどとあまり変わりませんが、設定時に基点の設定を左上にしてみます。

回転軸を指定

先ほどと同じように1秒かけて、回転させてみます。

長方形の回転

左上を軸に回転しているのが分かります。
このように、基点を設定するとその位置を軸にして移動や回転するようになります。

3. イージングの設定

プロトタイプ機能にもあるイージングの設定です。
Motionではかなりの数が用意されていて、自分でカスタマイズもできます。

設定はキーフレームの設定後に、右側に「Keyframe」パネルが表示されるので、その中の「Ease」を選択して別のイージングを選択するだけです。

イージングの設定

本格的なアニメーションを作るためには、いままで別途After Effectsなどの動画編集用のアプリケーションを開いて、そこでアニメーションだけ作って共有する必要がありました。

しかしMotionを使えば、本格的な自由度の高いアニメーションを作りつつ、デートはFigmaで完結します。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね