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

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

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

Motion

Figma

Figma

https://www.figma.com/community/plugin/889777319208467032/Motion

Figma Community plugin — Easily animate everything. Use avanced animation techniques. Share your design in any format: gif, mp4, webm, svg, sprites, frames, css, json.DocumentationYou can learn some basics of how to use the plugin in this community filehttps://www.figma.com/community/file/966913921712314277Bug Repo...

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

基本的な使い方

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

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

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

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

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

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

1. オブジェクトの移動

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

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

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

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

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

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

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

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

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

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

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

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

3. イージングの設定

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

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

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

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