Figma MotionのLottie書き出しで確認したい5項目｜プレビュー追加と表現の制約
Figma Motionで作った動きは、編集画面で再生できれば納品してよいのでしょうか。答えは、書き出す形式と利用する環境まで確認してから、です。
2026年11月10日の更新では、Lottie書き出し前のプレビューが発表されました。ここでは、その新しい確認機会と公式に記載された書き出し制約を整理します。Lottie書き出し自体の初登場ではありません。
情報確認日：2026年11月13日。公式資料に基づく解説です。個別アカウントでの提供・実機動作・性能改善は未検証。図版は独自の模式図で、実際の製品画面ではありません。
今週の更新と、以前からある機能を分ける
今週の注目点は制作中にLottieの書き出し結果をプレビューできるという発表です。Figma Motion全体が11月10日に登場したわけではありません。形式による違いを早く見つける確認場所であり、すべての表現をそのまま出力できる保証ではありません。
なぜキャンバスの再生だけでは足りないのか
編集画面と書き出し形式が扱える表現は同じとは限りません。カードが上昇し、影も変わる演出なら、移動だけ再現されても影が変わらなければ奥行きの印象は変わります。これは確認方法を示す仮例で、不具合の実測ではありません。
位置、サイズ、透明度、文字、マスク、影を一括で「似ている」と判断せず、狙った変化を分けて見ます。
公式資料で確認できた表現の制約
公式書き出しガイドの一部を抜粋したものです。全機能の互換性表ではありません。
| 表現 | 公式資料上の扱い | 制作時の考え方 |
|---|---|---|
| 動画 | Lottieでは非対応 | 動画を残すならMP4などを検討 |
| Shader | 静止画像に変換され、アニメーションしない | 動きが不可欠かを判断 |
| Angular gradient | 静止画像に変換 | ベクターで扱うなら線形・放射状を検討 |
| Drop shadow・Noise・Glass | 一部対応。効果は最初のフレームの見え方を維持 | 効果の変化が重要な箇所を個別確認 |
操作と連動するUIか、決まった映像を見せるだけかも含め、表現を簡略化してLottieにするか、動画形式を選ぶかを決めます。
書き出しの基本手順と利用条件
公式ガイドでは、アニメーションを含む最上位のフレームを選び、ExportのAnimatedから形式を選びます。Animatedが見つからない場合は選んだ対象が最上位フレームかを確認します。
Figma Motionは確認時点でオープンベータ。書き出しガイドはStarterを含む各プランを対象としますが、編集権限やコピー・共有の許可なども関係します。高解像度・高フレームレートの動画書き出しのプラン条件を、Lottie利用全体の料金条件と混同しないようにしてください。
LottieとdotLottieは何が違う？
公式資料ではLottieは未圧縮のJSON、dotLottieは画像やフォントなどもまとめられる圧縮形式です。納品先の対応を先に確かめ、実際のファイルサイズと再生結果を比較します。本記事では容量や速度を実測していません。
提案：納品前の5項目チェック
公式の認定チェックリストではなく、制作現場向けの提案です。
- 色・グラデーション：色、角度、境界が意図と一致するか。
- 影・効果：効果の変化まで再現されるか。
- 文字・フォント：文字欠け、改行、置き換わりがないか。
- マスク・重なり順：隠すはずの部分や前後関係は意図どおりか。
- 開始・終了・ループ：最初と最後の状態、繰り返しの継ぎ目を確認。
15分で試す小さな確認方法
短いカードのモーションを用意してデザイン、長さ、表示サイズを固定します。影などの検証対象だけ一つずつ変え、書き出し前プレビューと本番プレーヤーを同じ時点で比較します。形式、プレーヤー、変えた要素、差が見えた時点を記録します。15分は範囲を区切る提案で、解決や時間短縮の保証ではありません。
よくある疑問
プレビューが問題なければ本番確認は不要？
不要とはいえません。公式資料も本番で使うプレーヤーで書き出しファイルを試すことを推奨しています。
今週、Lottie書き出しが初めて可能になった？
今回取り上げているのは11月10日発表のプレビュー追加です。書き出し機能そのものの初登場とは区別します。
動画とLottieのどちらを選べばよい？
再生環境と必要な表現で判断します。動画素材などを含む演出は公式制約を確認し、形式を変えるか演出を組み直すかを決めます。
まとめ：完成の判断を、使う場所まで伸ばす
プレビューで書き出しの違いを早めに探し、出力後は本番プレーヤーで確かめる。今週の更新は、この二段階を制作手順に入れるきっかけになります。
公式出典
関連記事：Photoshop Convert to Text Layers
