Figma Motionとは?使い方・料金・AI生成とLottie出力を整理

Figma Motionとは?使い方・料金・AI生成とLottie出力を整理
目次

Figma Motionは、Figmaのデザインに動きを付け、動画やアニメーションの素材として書き出せる機能です。時間軸で細かく編集する方法に加え、Figma agentに動きを指示して、生成後に調整する方法もあります。

本記事では、基本操作、AIへの指示、料金と出力方法を整理します。Smart Animateとの違いも踏まえ、試作する動きに合った制作方法を選べます。

職種別AI活用事例18選

マーケ・営業から開発・経営・人事経理まで。8職種18業務のAI活用事例を無料公開中!

無料ダウンロード →

Figma Motionとは?デザインに動きを付ける標準機能

デザインと動きの図解。デザインを編集、動きを調整、素材として出力

Figma Motionは、Figma内で時間軸を使って動きを制作・編集するアニメーション機能です。

デザインと同じファイルで動きを編集できる

静止した画面だけでは、要素が現れる順番や、操作に対してどう反応するかまでは伝わりません。Figma Motionでは、Figma Designのファイル内でレイヤーに動きを設定できます。別のツールへ画像を渡す前に、デザインと動きの関係を同じ場所で確認できます。

編集の入口は、ツールバーにあるDesignとMotionの切り替えです。Motionへ切り替えると画面下にタイムラインが現れ、選択した要素の動きを時間軸で扱えます。位置、不透明度、回転などを変え、再生しながらタイミングを整える流れです。

Figma Motionは独立した動画編集サービスというより、Figmaのデザイン制作に動きの編集を加える機能として捉えると分かりやすくなります。デザインの形を直しながら、同じ要素の動きも調整できる点が特徴です。公式の機能概要で、画面構成を確認できます。

向いているのは短い動きや繰り返し使う表現

例えば、カードが少し遅れて現れる、図形が回転する、グラフの棒が伸びるといった動きを作れます。完成した動きは素材として出力したり、コンポーネントとして再利用したりできます。何を動かし、何を動かさないかを決めておくと、表示の目的に沿った表現にしやすくなります。

装飾のためだけに動きを足すと、読む場所が定まらなくなる場合もあります。初めて試すなら、状態の変化を知らせる要素を一つ選ぶとよいでしょう。例えば、操作後にチェックマークが現れる動きなら、開始状態と終了状態が明確で、完成したかどうかも判断できます。

同名のプラグインやFigma MCPとは役割が異なる

検索結果に出てくる「Motion」が、標準機能のFigma Motionを指すとは限りません。同名のプラグインを紹介する古い記事もあるため、ツールバーのMotionモードを扱っているかを確認してください。本記事の対象はFigmaが提供する標準機能です。

Figma MCPは、外部のAIツールへデザインの情報を渡す接続の仕組みです。Figma Motionで動きを作る操作と、MCPの接続設定は別の作業になります。動きを作りたいだけなら、MCPの導入手順から始める必要はありません。

関連記事:Figma MCPとは?使い方とClaude Code・Codexでの設定手順を整理

Figma Motionの仕組み|時間・値・イージングを分ける

時間・値・速度の図解。時間、値、速度の変化

動きの編集では「いつ」「どの値へ」「どんな速さで変わるか」を分けると、狙いと操作を対応させやすくなります。Figma Motionでは、時間軸、キーフレーム、イージングがそれぞれの役割を担います。

キーフレームはある時点の状態を記録する

キーフレームとは、特定の時点におけるプロパティの値を記録したものです。例えば、最初の不透明度を0、後の時点を100にすると、その間で要素が見える状態へ変化します。位置なら、開始点と終了点を指定して移動を作ります。

少なくとも二つの状態を用意すると、何がどこまで変わるのかが明確になります。同じレイヤーでも、位置と不透明度は別のプロパティです。カードを下から現れさせるなら、位置の変化と不透明度の変化を同じ時間帯へ重ねる、という考え方になります。

途中で動きが止まったり、急に飛んだりする場合は、時間の位置と値を別々に確認してください。値が意図と違うのか、開始・終了の時点が違うのかを分けると、修正する対象を絞れます。キーフレームの具体的な追加方法は公式ヘルプにまとまっています。

タイムラインでは同時に動く要素と順番を調整する

画面下のタイムラインには、レイヤーごとのトラックと再生位置が表示されます。再生位置を示すplayheadを動かすと、その時点の状態を確認できます。複数の要素がある場合は、それぞれの開始位置を見比べると、同時に動く部分と順番に動く部分が分かります。

例えば、見出し、説明、ボタンを順に表示するなら、開始位置を少しずつずらします。一方、同じ情報を一つのまとまりとして見せたい場合は、動きの時間帯を揃える方が自然です。時間差を付けること自体を目的にせず、読み手に何を先に見てほしいかから決めましょう。

タイムラインには、再生、停止、表示する時間の単位、繰り返し方などの操作があります。一度だけ再生した場合と、繰り返した場合では終わり方の印象が変わります。始点へ戻る瞬間も確認し、ループの継ぎ目で不自然な飛びが起きていないかを見てください。

イージングは途中の速度変化を決める

開始と終了の値が同じでも、途中の速度によって動きの印象は変わります。一定の速度で動かすのか、終わりに向けて減速するのか、ばねのように揺らすのかを決めるのがイージングです。Figma Motionでは、キーフレームを結ぶ線から設定を変更できます。

細かく調整したい場合は、カスタムのベジェ曲線やスプリングを使います。勢いのある表現が常に見やすいとは限りません。読ませたい文字や細かな数値の近くでは、動きが視線を奪いすぎないかを確認してください。制作中は一つの値だけ変えると、違いを見分けやすくなります。

複数の要素で同じ速度の変化を使うなら、イージングや時間を変数として揃える方法もあります。毎回手入力する代わりに共通の規則を持てるため、後から一貫性を保ちやすくなります。イージングの公式解説も参照してください。

Figma Motionの更新|音声・テキスト・Lottie出力

Figmaは2026年9月30日のリリースノートで、モーションの再利用、音声、テキストアニメーション、Lottie出力に関する更新を案内しました。古い紹介記事だけでは提供範囲を判断しにくいため、この更新を踏まえて使う機能を選びます。(出典: Figma公式リリースノート)

音声とテキストをタイムラインで扱える

音声はタイムラインへ追加し、位置の変更、トリミング、分割などができます。音と動きの始まる時点を合わせたり、必要な区間だけを使ったりする編集が可能です。音声を含む出力では、MP4とWebMが案内されています。

テキストアニメーションでは、文字、単語、行の単位で動きを付けられます。動かした後もテキストを編集できるため、内容を変更するたびに画像として作り直す必要はありません。ただし、長い文章を細かく動かすと読みづらくなることもあるため、見せる内容と演出の範囲を分けて考えます。

音声の追加ができることと、その素材を公開してよいことは別です。使用する音源の利用条件は素材側で確認してください。制作時に音が聞こえた場合でも、出力した動画に含まれているかを、最終ファイルでも確認する必要があります。

カスタムスタイルとLottieで再利用先が広がった

カスタムアニメーションスタイルには、時間やイージング、変数などを含められます。複数の動きを組み合わせたパターンを用意し、ライブラリへ公開して揃える使い方も案内されています。Figma agentやMCP、Skillsを通じて適用する方法も、同じリリースで紹介されました。

LottieとdotLottieは、対応するアニメーションについて書き出せます。「Lottie対応」と「すべての表現を変換できる」は同じではありません。実際の出力で使う動きを試し、必要な表現が残るかを確認してから、共通部品へ広げるとよいでしょう。

一方、Figma Motionの製品ページで近日公開とされている3D変形や全画面遷移まで、提供済みと読み替えることはできません。更新された機能と予告中の機能を分けて確認してください。

Figma Motionの使い方|短いアニメーションを作る

短い動きを作る手順の図解。対象を選ぶ、二つの状態を置く、再生して調整、自動記録を確認

最初は一つのレイヤーで、開始と終了が分かる動きを作ると操作を把握しやすくなります。以下は公式の操作説明を基にした手順です。編集できるファイルを用意し、試作用のフレームで進めてください。

ステップ1: 対象を選びMotionモードへ切り替える

Figma Designのファイルを開き、動かしたい要素を選びます。ツールバーをMotionへ切り替え、画面下のタイムラインを確認します。ファイルを閲覧できるだけでは編集の条件を満たさないため、can editの権限があるかも確認しましょう。

試作では、動かす対象を一つに絞ります。カード全体を動かしたいのか、内部のアイコンだけを動かしたいのかで、選ぶレイヤーは変わります。親と子の両方に同じ変化を付けると狙いが分かりにくくなるため、まず選択したレイヤーの名前を確認してください。

文字やアイコンを細かく分けたデザインでは、どのまとまりを動かすかを先に決めると編集しやすくなります。例えば、ボタンならラベルと背景を一体として扱うのか、ラベルだけを変えるのかを決めます。完成時の見た目から逆算して、対象の範囲を選びましょう。

ステップ2: 開始時点と終了時点に値を置く

再生位置を開始時点へ移動し、動かすプロパティのキーフレームを追加します。不透明度で試すなら、開始時点の値を0にして、後の時点に見える状態の値を置きます。位置を動かす場合も、開始点と終了点で値を設定する考え方は同じです。

キーフレームを置いたら、対象のプロパティと時間を見比べます。見た目だけで編集すると、別のプロパティへ記録してしまっても気付きにくいことがあります。タイムライン上に開始と終了の二つの状態があるかを確認してから再生すると、原因を切り分けやすくなります。

AIエージェントの作り方

AIエージェントを「どう作り、どう育てるか」を、GiftX記事制作エージェントの実物で解説。

無料ダウンロード →

ステップ3: 再生して時間とイージングを調整する

再生ボタン、またはSpaceキーで動きを確認します。表示が速すぎるなら、まず開始と終了の間隔を広げてみます。終わり方だけ気になる場合は、時間を変えずにイージングを変えると、何が印象に影響したかを確かめられます。

要素を重ねる場合は、各レイヤーの開始位置も確認してください。後から表示する説明が先に現れたり、文字が読める前に画面が切り替わったりしないかを見ます。動きの滑らかさだけでなく、情報が伝わる順番も検収してください。

  • 開始時点に、見せたい前の状態が記録されているか
  • 終了時点に、完成した状態が記録されているか
  • 同時に動かす要素の時間帯が揃っているか
  • 繰り返したときに、始点へ戻る動きが不自然ではないか

ステップ4: 自動記録を使うときは意図しない変更を残さない

自動キーフレームを使うと、値を変えた操作がキーフレームとして記録されます。手作業で記録する手間を減らせますが、再生位置が違うまま形を直すと、意図しない時点に変化が残る場合があります。自動記録を使う間は、再生位置と記録対象を確認してください。

動きの編集が終わったら、自動キーフレームを切ってから静止状態のデザインを直すと、不要な記録を増やしにくくなります。誤って付けた動きは、対象のトラックとキーフレームを確認して修正します。ファイル全体を作り直す前に、どの値がいつ変化しているかを調べましょう。

Figma agentを使うMotion制作の使い方と指示例

Figma agentには、作りたい動きを自然言語で指示できます。AI(Artificial Intelligence、人工知能)が生成した案をMotionで再生して調整する流れです。左側のAgentsから入力し、編集可能な動きを人が確認します。

指示には対象・変える点・保持する点を含める

「いい感じに動かして」だけでは、AIがどこを変えてよいか分かりません。レイヤーやフレームの名前、動きの目的、変えるプロパティ、固定する部分を伝えると、後から確認する基準も作れます。まずは対象の範囲を明確にしてください。

例えば、カードの表示なら「カードを下から現れさせる」「文字と色は変えない」「背景は動かさない」と指定できます。完成した案は、その条件に沿っているかを確認します。ここで示す日本語は指示内容を考えるための例であり、言語ごとの対応範囲や実行成功を保証するものではありません。

公式のモーション制作ワークフローでも、対象、印象、変える値、一定に保つ条件を含める方法が説明されています。元の形を保持したいなら、動きの指示とは別に、変えてほしくない点を明示しましょう。

複数案を比べるなら共通条件を固定する

試作の指示例としては「選択したカードについて、落ち着いた案と弾む案を作る。移動の方向と全体の長さは揃え、イージングだけ変える」といった形が考えられます。比較したい項目以外を揃えると、印象の違いを見分けやすくなります。

文字、色、配置、動きの長さを同時に変えると、どの変更を評価しているのかが曖昧になります。目的がイージングの選定なら、その値だけを変える方が判断しやすいでしょう。案を選んだ後で、必要なタイミングを手作業で詰める進め方もできます。

生成結果に対する追加指示も、範囲を絞ります。「全部直して」ではなく「選択した要素のイージングだけ変更し、値とキーフレームの時間位置は保持する」とすると、検収する対象を限定できます。変更前後を再生し、保持する条件が残っているかも確認してください。

自動生成と人の判断を分けて運用する

AIに任せやすいのは、候補を増やす作業や、同じ規則を複数の要素へ適用する作業です。一方、その動きが見やすいか、製品の性格に合うか、操作の結果を正しく知らせるかは、制作者が判断する必要があります。動きを付けた量を成果の指標にしない方がよいでしょう。

試す範囲は一つの部品から始め、生成、再生、修正、出力の各段階で確認します。元のファイルへ一度に広く適用する前に、試作で保つべき条件を整理してください。Figma agentの生成ができることと、公開や実装の確認まで自動化できることは、別の範囲です。

Figma Motionの再利用の仕組み|コンポーネントと共通スタイル

同じ動きを繰り返し使う場合は、完成した素材を複製するだけでなく、共通の部品や規則として持つ方法を考えます。コンポーネント、変数、カスタムスタイルは、変更する単位がそれぞれ異なります。

コンポーネントでは元の部品を編集する

Figma Motionで作った動きは、アニメーション付きのコンポーネントにできます。作成時はDesignモードへ切り替え、対象を選択してCreate componentを使います。動きがあるからといって、常にMotionモードのままで部品を作るわけではありません。

インスタンスはタイムライン上で位置を動かせますが、アニメーションの長さやプロパティを変更する場所はメインコンポーネントです。置いた側で直す内容と、元の部品で直す内容を区別すると、共通の動きが崩れにくくなります。公式のコンポーネント解説も確認してください。

例えば、同じ通知部品を複数の画面へ置くなら、動き自体は元の部品で揃え、各画面では表示するタイミングを調整します。全体を直したい変更と、その場所だけで変える変更を分けておくと、修正の影響を説明しやすくなります。

変数は時間やイージングを揃えるために使う

Figmaの変数には、時間を表すTimingや、曲線・スプリングを表すEasingがあります。複数の部品で同じ値を使う場合に、共通のルールとして管理できます。値を変える対象が一つの部品なのか、関連する複数の部品なのかを考えて設定します。

例えば、同じ役割の要素に共通の時間を与えておくと、画面ごとに別の値を入力するより一貫性を保ちやすくなります。ただし、すべての要素を同じ速さにする必要はありません。通知と読み物の切り替えでは目的が違うため、役割に応じた規則を用意する方が自然です。

変数をまとめるコレクションやモードの利用範囲は、プランにも関係します。動きの値を共通化できることと、必要なモードを制限なく増やせることを混同しないでください。変数の種類は公式の概要で確認できます。

スタイルを広げる前に元の動きを検収する

カスタムスタイルは、複数のアニメーションを組み合わせた規則を揃える用途に使えます。部品単位で再利用するコンポーネントと、共通の振る舞いを与えるスタイルを分けると、変更する場所が分かりやすくなります。

共通化した後の修正は、利用している部品へ広く影響する場合があります。まず一つの試作で、動きの始まりと終わり、文字の読みやすさ、出力した結果を確認しましょう。ライブラリの公開条件と編集者の席も、チームへ展開する前に確認する必要があります。

Figma Motionの書き出し形式比較と開発への受け渡し

完成した動きをどこで使うかによって、適した形式は変わります。見せるための動画と、アプリへ組み込むためのデータを分けて考えると、書き出した後に作り直す手間を減らせます。

動画や画像素材として出力する場合

Figma Motionでは、MP4、WebM、GIF、SVGなどの出力が案内されています。音声を含める場合はMP4かWebMを確認します。受け取り先で必要な形式が決まっているなら、その形式で試しに出力してから制作を広げるとよいでしょう。

形式の名前だけでは、ファイルの大きさや画質、掲載先での表示まで判断できません。例えば、説明用の短い動画なら再生環境、ループ素材なら始点と終点、図形素材なら縮尺を変えた見え方を確認します。どの形式でも同じ見た目になると決めつけず、完成ファイルを開いて見比べてください。

動画は動きをそのまま見せる用途に向きますが、表示中の値や状態へ反応する製品UIとは扱いが異なります。見本動画を渡すのか、実装時に編集できる情報を渡すのかを、制作開始前に受け取り側と合わせておきましょう。

LottieとdotLottieは対応する動きで試す

LottieとdotLottieは、2026年9月30日の更新で対応するアニメーションの出力が案内されました。これらを使う予定なら、実際に必要な表現が出力対象になるかを確認します。使える形式が増えたことを、すべての効果がそのまま保持されるという意味には読み替えません。

短いサンプルを出力し、組み込み予定の環境で再生の開始、停止、繰り返しを確かめてください。

Figma Motionの受け渡し用途確認する形式・情報
完成した動きを見せるMP4・WebMなどの動画
ループ素材を使うGIFなど用途に合う形式
対応する動きを組み込むLottie・dotLottie
動きの数値を伝えるDev Modeの時間・値・イージング

Dev Modeでは動きの意図と値を伝える

Figmaの製品ページでは、Dev ModeでCSS、JSON、Reactの情報を確認し、MCPを通じて開発へ文脈を渡す使い方が紹介されています。動画だけでは分かりにくい、動きの時間や値を伝える際に役立ちます。

ただし、取得できる情報があることと、受け取り先のコードが完成することは同じではありません。開発側の構成に合うか、操作後の状態と矛盾しないか、動きを減らす設定をどう扱うかは、実装側で確認します。参照情報と完成した実装を区別して受け渡しましょう。

Figma Motionの料金・無料範囲とFullシート

Figma Motionはオープンベータとして案内されており、手動編集と、有料のFullシートが必要な機能では利用条件が異なります。本記事の料金情報は2026年10月3日時点で公式料金ページの日本円表示で確認したものです。年払いの欄は月額換算で、毎月払いの金額とは区別しています。

FigmaのプランFullシートの年払い月額換算Fullシートの毎月払いMotionの使い方を考える際の確認
Starter無料プラン無料プラン編集権限のあるファイルで手動制作を試す
Professional2,400円/人3,000円/人有料Fullシートで追加機能を使う
ビジネス(Organization)8,300円/人この表では未記載チーム運用に必要な条件を確認する
Enterprise13,600円/人この表では未記載組織全体の契約条件を確認する
AI活用実態調査レポート

全国8,000人調査で、AIの活用方法によって生産性向上に約3.8倍の差が生まれることが判明。

無料ダウンロード →

無料で試せる編集と有料機能を区別する

オープンベータでは、全プランで編集権限のある利用者がMotionの手動制作を試せます。一方、Figma agentによるアニメーション生成、アニメーション付きコンポーネントの公開、高解像度動画の書き出しには、有料のFullシートが必要です。ベータ機能の公式説明を確認してください。

本記事のベータの利用条件は2026年10月3日時点で確認した情報です。

Figma Motionで行うことオープンベータの利用条件
タイムラインで手動制作する全プラン・ファイルの編集権限が必要
Figma agentで動きを生成する有料Fullシートが必要
アニメーション付き部品を公開する有料Fullシートが必要
高解像度動画を出力する有料Fullシートが必要

AIクレジットの扱いはベータの条件を確認する

手動でMotionを使う操作は、AIクレジットを消費しません。Figma agentを使う場合も、ベータ期間中はクレジット不要として案内されています。ただし、これは将来の一般提供後まで消費がないことを意味しません。

料金ページにプランごとのAIクレジットが載っていても、そこからベータ中のMotion生成が同じ量を消費すると推測するのは避けましょう。契約する際は、使う機能の条件を公式のベータ説明と照合してください。Figma for Governmentはベータの対象外として案内されています。

Figma MotionとSmart Animateの違い

どちらもFigmaで動きを扱いますが、Figma Motionは時間軸でアニメーションを作る機能、Smart Animateはプロトタイプのフレーム間で状態の変化を見せる機能です。作りたいものに応じて選び、既存の試作をすべて置き換える必要はありません。

比較軸Figma MotionSmart Animate
編集の中心タイムラインとキーフレームフレーム間の遷移
動きの指定時点ごとのプロパティとイージング対応するレイヤーの状態差
主な用途部品の動きや書き出す素材を制作操作による画面・状態の切り替えを試作
検収する点順番・時間・出力結果レイヤーの対応・遷移の結果

Figma Motion|時間軸で部品の動きを作る

一つの部品について、開始から終了までの動きを細かく決めたい場合はMotionを使います。複数のレイヤーを少しずつずらしたり、一つの値だけを動かしたりできるため、短いアニメーション素材や共通部品の制作に向いています。

Smart Animate|フレーム間の状態差を見せる

Smart Animateは、複数のフレームにある対応レイヤーを見つけ、状態の違いをアニメーションでつなぎます。対応付けにはレイヤー名と階層が関係するため、元と次のフレームで構造を揃えます。操作をきっかけに変わるUIの試作で使えます。

例えば、閉じた状態と開いた状態を別のフレームで用意し、その変化を見せる用途です。画面の流れを検証したい場合は、Motionのタイムラインへ作り直すより、既存のSmart Animateを使う方が適していることもあります。Smart Animateの公式解説で仕組みを確認できます。

動きの素材と操作の流れを別々に確認する

どちらかを選ぶ基準は、新しい機能かどうかより、確認したい対象です。部品の動く時間を詰めたいのか、操作後の状態を相手に試してもらいたいのかを決めてください。短い素材の制作と、フレーム間の画面遷移を分けると、関係者への説明も簡単になります。

既存のプロトタイプは保ち、表現を詰めたい部品だけMotionで試す進め方も考えられます。

Figma Motionを使う前に確認すること

動きを作れた後は、使う場所での見え方と運用を確認します。オープンベータの機能は変更や性能上の問題が起こる可能性があるため、納品や製品公開に必要な条件を、試作の段階で確かめておきましょう。

動きの少ない状態でも情報が伝わるかを見る

動きを付けると、見てほしい変化を示せます。一方、動きが続く画面や強い揺れは、見る人によって負担になる場合があります。重要な状態や完了の結果は、動きだけに頼らず、静止した表示でも理解できるようにするとよいでしょう。

実装する場合は、動きを減らす設定への対応も開発側と相談します。Figma上の見本を作っただけで、その配慮が完成したと判断しないでください。画面の目的、読むべき情報、動きを抑えたときの状態を、受け渡し時に一緒に伝えます。

出力と共有を使う人の環境で確かめる

編集画面では問題なく再生できても、書き出した素材の画質や音声、使う環境での再生は別に確認します。Lottieを選ぶ場合も、必要な表現を含む短いサンプルで試してから、本番用の部品へ広げましょう。

ファイルの閲覧、編集、ライブラリ公開は同じ権限ではありません。制作する人、動きを確認する人、部品を公開する人の条件を整理しておくと、後の作業が止まりにくくなります。確認できていない利用条件を、AIの説明だけで確定しないことも大切です。

AIでコンテンツを内製するときに陥りがちな3つの落とし穴

Figma Motionで動きを内製する場合は、試作、検収、共有の流れまで考えます。制作だけを自動化しても、確認の基準や受け渡し先が曖昧なままでは、後の作業に使いづらい素材になります。

落とし穴1: ファイル全体へ一度に動きを付ける

多くの要素へ一括で生成すると、どの条件が結果を変えたのか分かりにくくなります。まずは一つの部品を選び、保持する条件と合格基準を決めましょう。意図した状態へ変わることを確かめてから、共通部品へ広げる方が検証しやすくなります。

落とし穴2: 生成した案を検収せず共通化する

候補が増えても、文字の読みやすさや動きの目的を確認しなければ、使える素材は決まりません。生成後に何を見るかを先に揃え、修正する値を絞ります。ライブラリへ広げる前に、出力したファイルも確認してください。

落とし穴3: 制作機能だけで公開まで自動化できると考える

Figma agentが動きを作れることと、他のツールへの転送、承認、公開、実装後の検証まで任せられることは別です。後続作業も自動化したい場合は、入力、判断する人、共有先、失敗時の扱いを個別に決める必要があります。

検証工程を持ったうえで、まず1コンテンツを型にする

まずは、一つの素材の試作案を作り、人が確認する流れから始めます。制作と検収を分け、小さく試してから共通部品や継続制作へ広げましょう。GiftXのAI活用コンテンツ制作支援では、企画・制作から最終レビューまで、仕事に合う制作体制を相談できます。

Figma Motionについてよくある質問

Figma Motionは無料で使えますか?

オープンベータでは全プランで手動制作を試せますが、ファイルの編集権限が必要です。Figma agentによる生成、アニメーション付きコンポーネントの公開、高解像度動画の出力には、有料Fullシートが必要です。無料で使えることを、全機能が無条件に使えるという意味には読み替えないでください。

Figma MotionはAIクレジットを消費しますか?

手動のMotion編集はAIクレジットを消費しません。Figma agentの利用もベータ期間中はクレジット不要と案内されています。一般提供後の条件まで同じとは限らないため、使い始める際にはベータ機能の公式説明を確認してください。

Figma Motionで日本語の指示を使えますか?

本記事の日本語の指示例は、対象や条件を整理するための例です。日本語での実行成功や、すべての言語の対応を検証したものではありません。公式のワークフロー例は英語で提示されているため、まず短い指示で対象と保持する条件が伝わるかを確認するとよいでしょう。

Figma Motionですべての動きをLottieへ書き出せますか?

2026年9月30日の更新は、対応するアニメーションのLottieとdotLottie出力を案内しています。すべての表現が変換できるという意味ではありません。必要な効果を含むサンプルを出力し、組み込む予定の環境で再生して確認してください。

Smart AnimateからFigma Motionへ移行する必要はありますか?

一律に移行する必要はありません。Smart Animateはフレーム間の状態差を使ったプロトタイプ、Motionは時間軸で作る部品の動きや出力素材に向きます。確認したい対象に合わせ、既存の画面遷移と、細かく作りたい動きを分けて使えます。

まとめ

Figma Motionでは、タイムラインとキーフレームで動きを作り、Figma agentで候補を生成してから調整できます。コンポーネントや共通スタイルとして再利用する前に、短い試作で見た目と出力結果を確認しましょう。

手動編集と有料Fullシート向けの機能を分け、動画、Lottie、開発へ渡す情報の用途を揃えることが大切です。検証工程を持ち、まず1コンテンツを型にしてから共通化すると、後続の制作でも使いやすくなります。

デザイン制作の体制と品質を整えたい方へ

AIを使って制作量を増やしたい場合は、素材の生成に加え、企画や品質確認の工程も整える必要があります。GiftXのAI活用コンテンツ制作支援では、企画・制作から専門チームの最終レビューまでを支援します。

継続的な制作だけでなく、内製化や制作体制の移管まで見据え、必要な支援を整理できます。デザイン素材を安定して作る体制について、具体的な作業を基にご相談ください。

▶ GiftXのAI活用コンテンツ制作支援の詳細・お問い合わせはこちら

関連記事

石塚 悠悟
AIエキスパート

GiftX共同代表。デロイト トーマツ/PwCでのコンサルティングを経て、ホットリンク執行役員として事業領域全体(デジタルマーケティング支援事業・SaaSプロダクト事業)・バックオフィス領域を統括。AI活用・業務自動化・エージェント構築の実務に注力。

SHARE
職種別AI活用事例18選

マーケ・営業から開発・経営・人事経理まで。8職種18業務のAI活用事例を無料公開中!

無料ダウンロード →