📌 この記事のポイント

• 操作はキーフレーム・タイムライン・数値の3手順だけ

• 動かせるのは位置・スケール・回転・不透明度の4つ

• キーフレームの記号はFigmaがダイヤ、AEが時計

• イージングを変えると動きの印象が変わる

• 最初はプリセットから選ぶのが上達の近道

2026年9月2日更新

モーションの基本操作は3手順しかない

モーションをつける操作とは、キーフレームを打つ、タイムラインを動かす、数値を変更するという3手順の繰り返しです。Figma MotionでもAfter Effectsでも、この流れは変わりません。すべての動きがこの3手順の組み合わせでできています。

ツールが難しく見えるのは、画面に並ぶ項目が多いからです。実際に操作するのは、動かしたいプロパティの横にあるマークを押し、時間軸を移動し、数値を書き換える。この3つだけです。

参考：本記事はNOT DESIGN SCHOOL主催ウェビナー「After EffectsからFigma Motionまで！はじめてのモーションデザイン入門」（2026年7月開催）の内容をもとに構成しています。登壇者はモーション歴10年のデザイナーで、NOT DESIGN SCHOOLのメンターを務めています。

動かせるのは4つのプロパティだけ

モーションの基本プロパティとは、位置・スケール・回転・不透明度の4つです。複雑に見える動きも、この4つのうち1つから4つを組み合わせて作られています。

ウェビナーのデモでは、Figmaのロゴを題材にこの3つが順に重ねられていました。まずY座標で下から上への移動をつけ、次に回転をマイナス180度まで加え、最後に不透明度を0%から変化させます。結果として「出現しながら回転しながら移動する」という動きになります。

組み合わせを増やすほど複雑に見えますが、やっている操作は同じ3手順の反復です。ツールの違いについてはFigma MotionとAfter Effectsの違い｜使い分け早見表にまとめました。

キーフレームとは｜ダイヤと時計のマーク

キーフレームとは、「この時間にこの数値である」と指定する打点です。始点と終点にキーフレームを打つと、その間の動きはツールが自動で補間します。

Figma Motionでは、モーションを起動すると数値の右側にダイヤのマークが表示されます。このマークがついている項目が、動かせるプロパティです。逆に言えば、マークのない項目は動かせません。After Effectsに比べて動かせる範囲は限られますが、選択肢が絞られているぶん初心者は迷いにくくなります。

After Effectsでは、図形を作ってトランスフォームを開くと、位置・スケール・回転・不透明度が並んでいます。それぞれの左にある時計のマークを押すとキーフレームが打たれます。アンカーポイントという項目も並んでいますが、最初は気にしなくて問題ありません。

Figma Motionで動かしてみる

実際の操作は次の順序で進みます。ここではY座標を使って、要素を下から上へ動かします。

1. モーションを起動する：デザインモードの右側にある「モーション（ベータ版）」を押す

2. 始点にキーフレームを打つ：Y座標のダイヤマークをクリックする

3. 終点にキーフレームを打つ：タイムラインを0.8秒あたりに移動し、もう一度ダイヤマークをクリックする

4. タイムラインを0秒に戻す：始点の位置に移動する

5. 数値を変更する：Y座標を24ピクセルほど下げる

6. 再生する：スペースキーで動きを確認する

この時点で、要素が下から上へ移動する動きができています。同じ手順を回転と不透明度でも繰り返せば、3つの動きが重なります。

操作のうえで知っておくと楽なのが、時間の表示単位です。タイムライン左側の「秒」を押すと、秒とミリ秒を切り替えられます。ミリ秒は日常の感覚と結びつきにくいため、秒表示のまま作業するほうが判断しやすくなります。

打ったキーフレームは後から左右にドラッグして位置を変えられます。出現のタイミングだけ早めたいといった調整は、この操作で行います。

イージングとは｜4種類の違いを押さえる

イージングとは、始点から終点までの速度の変化のつけ方です。同じ移動距離でも、速度の変化が違うだけで印象が変わります。キーフレームを打っただけの状態は等速で、機械的な動きになります。

UIで最も使われるのはease-outです。要素が素早く現れてすっと止まるため、待たされる感覚が減ります。

Figma Motionでは、タイムライン上のキーフレームとキーフレームの中間にイージングのマークが表示されます。ここをクリックすると種類を選べます。等速の動きにease-outを適用すると、同じ移動でも心地よさが変わることが体感できます。

After Effectsでは、キーフレームを選択して右クリックからイージングを設定します。さらに細かく調整したい場合はグラフエディターを使いますが、慣れるまではメニューからの適用で足ります。

イージングの種類は実際にはこの4つよりも多くあります。ウェビナーでも、代表的なものは3つか4つだが本当はもっとある、として一覧サイトが共有されていました。名前から動きを想像するのは難しいので、カーブの形と実際の動きを見比べて覚えるほうが早いです。

Figma MotionとAfter Effectsの操作対応

同じことをする操作が、ツールによってどこにあるかを対応表にすると迷いません。

After Effectsのコンポジションとは、これから作る箱のことです。Illustratorのアートボードや、Figmaのフレームに時間の概念が加わったものと考えると分かりやすくなります。デモでは16対9の1920×1080、5秒で作成されていました。この設定は後から変えられるので、最初は一般的な値で問題ありません。

After Effectsの画面は各項目が小さく表示されるため、慣れるまではUIを拡大しておくと操作しやすくなります。

プリセットから始めるのが最短ルート

プリセットとは、あらかじめ用意された動きのパターンです。ゼロからキーフレームを打たなくても、選んで適用するだけで動きがつきます。

ウェビナーでは、Figma Motionのプリセットから「バースト」を選ぶデモが行われました。下から回転を加えながら上がってくる動きが、選ぶだけで適用されます。

名前を見ただけでは動きが想像できないため、片端から適用して確かめるという進め方が推奨されていました。スタンダードな動きであればプリセットで十分に成立します。簡単に作って簡単に書き出したい場合、まずプリセットから探すのが最短です。

アニメーションのコピー＆ペースト

作った動きは、別の要素に使い回せます。同じ動きを複数の要素につける場面では、この操作で作業時間が大きく変わります。

• Figma Motion：「アニメーションを貼り付け」という項目から適用する

• After Effects：キーフレームを選択してコピーし、対象レイヤーにペーストする

Figma Motionの貼り付け機能は比較的新しく追加されたもので、2026年8月時点ではショートカットが割り当てられていません。メニューから実行します。

作業を速くするプラグイン

After Effectsには、標準機能では手間がかかる操作を短縮するプラグインがあります。ウェビナーでは2つが紹介されていました。

アンカーポイントとは、動きの起点になる位置です。中央にあれば中央を軸に回転し、四隅にあればその隅を軸に回転します。標準機能では一発で中央や端に配置できず、手動で動かす必要があります。

プラグインは必須ではありません。 基本の4プロパティとキーフレームだけで動きは作れます。作業量が増えてきて、同じ手作業を繰り返していると感じたときに検討すれば十分です。

限界と注意点

この記事の操作手順は、2026年8月時点のFigma Motion（ベータ版）を前提としています。 ベータ版のためUIの配置や項目名は変わる可能性があります。手順どおりに進まない場合は、Figmaの公式情報で現在の仕様を確認してください。

イージングの名称は混乱を招きやすい領域です。 ease-inとease-outは、どちらが加速でどちらが減速かを取り違えやすく、資料によって説明が食い違うこともあります。この記事ではCSSなどで一般的に使われる定義に沿って書いていますが、実際に適用してカーブと動きを見比べて確認するのが確実です。

プラグインの価格や提供状況は変動します。 Flowの約5,000円という価格はウェビナー時点で共有されたものです。購入前に販売元で確認してください。

よくある質問

Q. キーフレームは何個打てばいいですか？

動きの始点と終点で最低2個です。途中で速度や方向を変えたい場合は、その地点にも追加します。まずは2個で作り、必要になってから増やすほうが管理しやすくなります。

Q. 秒数はどれくらいが適切ですか？

ウェビナーのデモでは0.8秒が使われていました。UIの小さな動きであれば0.2秒から0.5秒程度、要素が大きく移動する場合は0.5秒から1秒程度が扱いやすい範囲です。実際に再生して、待たされる感覚がないかで判断します。

Q. Figma Motionで動かせないプロパティがあるのはなぜですか？

動かせるプロパティが限定されているためです。ダイヤのマークがついている項目だけが対象になります。After Effectsと比べると制限がありますが、選択肢が絞られているぶん初心者には扱いやすい設計になっています。

Q. After Effectsのグラフエディターは覚えるべきですか？

最初は不要です。キーフレームを右クリックしてイージングを適用する操作で足ります。標準のイージングでは表現しきれない動きを作りたくなったときに、グラフエディターやFlowのようなプラグインを検討する順序が現実的です。

Q. 動きを作る前にコンポジションの設定を決める必要がありますか？

After Effectsではコンポジションを先に作りますが、設定は後から変更できます。デモでも16対9の1920×1080、5秒という一般的な値で進められていました。最初から正確に決めようとせず、作りながら調整して問題ありません。