--- title: "Figma Motionとは？使い方・書き出し・無料でできる範囲を解説【2026年10月】" url: "https://www.issoh.co.jp/tech/details/12722/" published: 2026-06-25 updated: 2026-10-13 categories: ["プラットフォーム"] publisher: "株式会社一創" --- # Figma Motionとは？使い方・書き出し・無料でできる範囲を解説【2026年10月】 Figma Motionは、Figmaのデザインファイルの中にタイムラインを持たせ、キーフレームでアニメーションを作る機能です。2026年6月24日にオープンベータとして公開され、9月30日の更新でLottie書き出し・音声・テキストアニメーションが加わりました。無料のStarterプランでも使えますが、書き出しは1920×1080・30fpsまでに制限されます。 この記事では、Motionモードの開き方と閉じ方、キーフレームとイージングの操作、MP4・GIF・Lottieへの書き出し設定、Dev Modeでの受け渡しまでを、Figma公式ヘルプの記載に沿って順に説明します。 ## まとめ：Figma Motionの要点（2026年10月時点） - ツールバーの切り替えを「Motion」にすると画面下にタイムラインが出る。編集権限（can edit）があれば全プランで使える。オープンベータのため、機能は今後も変わる。 - 動きはキーフレーム（2点以上）で作る。手で打つ、自動キーフレームで記録する、fade・move・scaleなどのプリセットを置く、Figmaエージェントに生成させる、の4通りがある。 - イージングはベジェ曲線7種（Linear・Ease in・Ease out・Ease in and out・Back系3種）とHold、スプリング4種（Gentle・Quick・Bouncy・Slow）から選び、独自の曲線も作れる。 - 書き出しはMP4・WebM・GIF・SVGに加え、9月30日からLottieとdotLottieに対応した。ただしシェーダー・動画・角度グラデーションはLottieで動かない。 - Dev ModeでのCSS・React・JSONのコードコピーは、有料プランのFullシートかDevシートが必要。アニメーションコンポーネントの公開とエージェントでの生成も有料プランのFullシートが条件になる。 ## Figma Motionとは｜デザインファイルにタイムラインを足す機能 Motionは、Design・Draw・Devと並ぶFigmaのモードの1つです。動きはコンポーネントや変数と同じファイルの中に置かれ、After Effectsなどの別ツールへ書き出して作り直す工程が要りません。 ### 公開から9月30日の更新までの経緯 Figmaは2026年6月24日、[公式ブログ「Introducing Figma Motion」](https://www.figma.com/blog/introducing-figma-motion/)でMotionを発表し、同日からオープンベータとして段階的に配信しました。その後の主な追加は次のとおりです。 | 時期 | 追加された機能 | | -------------- | --------------------------------------------------- | | 2026年6月24日 | タイムライン・キーフレーム・プリセット・エージェント・Dev Mode連携 | | 2026年7月（ヘルプ公開） | モーションパスの編集、パストリム（線の描画アニメーション） | | 2026年9月30日 | カスタムアニメーションスタイル、音声、テキストアニメーション、Lottie・dotLottie書き出し | | 未提供 | 3D変形（製品ページで「近日公開予定」・待機リスト登録制） | 7月の2項目はリリースノートで提供日を確認できなかったため、Figmaヘルプセンターに手順記事が作成された日（モーションパス7月7日・パストリム7月24日）を目安として載せています。9月30日の更新内容は[Figmaのリリースノート](https://www.figma.com/release-notes/)に「Motion adds custom styles, audio, text animations and Lottie export」として載っています。 ### プロトタイプのSmart Animateとの違い Smart Animateは、プロトタイプで2つのフレームを行き来するときに、名前とレイヤー階層が対応するレイヤーの位置や大きさの差を補間する機能です。動きの単位は「画面Aから画面Bへの遷移」になります。Motionは1つのフレームの中で、時間軸に沿ってプロパティを変化させます。ローダーの回転、トーストの出現、ロゴのアニメーションのように、画面遷移を伴わない動きはMotionで作ります。 画面から画面への遷移にタイムラインを付ける機能は、[Figma Motionの製品ページ](https://www.figma.com/ja-jp/motion/)で「近日公開予定」とされており、2026年10月時点で遷移の演出はまだプロトタイプ側の担当です。 ## Figma Motionの使い方｜モードの切り替えからキーフレームまで 操作の大半は、画面下のタイムラインと右サイドバーで行います。キーフレームを打てるプロパティには、右サイドバーの入力欄の横にひし形のアイコンが出ます。 ### Motionモードの切り替えとタイムラインの非表示 ツールバーの切り替えで「Motion」を選ぶと、画面下にタイムラインが表示されます。Motionの選択肢が見当たらない場合は、そのファイルの編集権限があるかを確認します。[タイムラインのヘルプ](https://help.figma.com/hc/en-us/articles/41405906446999-Use-the-Figma-Motion-timeline)によると、タイムラインはMotionモードの間しか表示されません。 Motionモードを解除するには、ツールバーの切り替えを「Design」に戻します。Motionモードのまま作業領域だけ広げたいときは、タイムライン右上の「Collapse timeline」で最小化するか、上端をドラッグして高さを縮めます。コンポーネントプロパティの変更やコンポーネントの作成はDesignモードでしかできないため、モードの行き来は頻繁に発生します。 ### タイムラインの操作部と初期値 タイムライン上部の操作部には、次の項目が並びます。 | 項目 | 働き | | ------------- | --------------------------------- | | Play／Pause | 再生と停止（Spaceキーでも切り替え） | | Auto-keyframe | 変更を自動でキーフレームとして記録 | | Current time | 再生ヘッドの位置。数値入力でその時刻へ移動 | | Duration | 全体の長さ。新規アニメーションは2000ミリ秒 | | Time unit | 秒とミリ秒の表示切り替え | | Playback | Loop（繰り返し）・Once（1回）・Ping-pong（往復） | ズームはタイムライン右側のスライダーか、Macなら Command、Windowsなら Control を押しながらマウスホイールを回します。レイヤーごとのトラックをドラッグすると、そのオブジェクトに付けた動き全体の開始時刻を動かせます。 ### キーフレームを手で打つ手順 動きには最低2つのキーフレーム（開始の状態と終了の状態）が要ります。[キーフレームのヘルプ](https://help.figma.com/hc/en-us/articles/41307938657559-Add-select-and-delete-keyframes)では、正方形を500ミリ秒で180度回す例として、0ミリ秒に回転0、500ミリ秒に回転180のキーフレームを置く手順が示されています。 1. 再生ヘッドを動きの開始位置に置く 2. 動かしたいプロパティの横にある「Add keyframe」を押し、開始値を入れる 3. 再生ヘッドを終了位置へ動かし、終了値を入れる（2つ目のキーフレームが自動で入る） 4. 2つのキーフレームを結ぶ線をクリックし、Easingメニューで曲線を選ぶ 5. Spaceキーで再生して確認する キーフレーム同士の間隔が広いほど動きは遅くなります。キーフレームはShiftを押しながら再生ヘッドへドラッグすると吸着し、Deleteキーで削除できます。プロパティ名を選んでDeleteを押すと、そのプロパティのキーフレームがまとめて消えます。位置にキーフレームを打つと、キャンバス上に点線の軌跡（モーションパス）が出て、Command（Windowsは Control）を押しながらハンドルを引くと軌跡を曲線にできます。 ### 自動キーフレームの記録とプリセットの適用 自動キーフレーム（Auto-keyframe）を有効にすると、タイムライン上部と再生ヘッドに赤いバーが出て、その間の変更がすべてキーフレームとして記録されます。ヘルプは、誤って別の値を触ると意図しないキーフレームが入ると注意しています。記録が終わったら必ずオフに戻してください。 キーフレームを打たずに動きを付けるなら、右サイドバーのAnimations欄の「＋」からプリセットを選びます。プリセットは再生ヘッドの位置から始まり、タイムライン上でドラッグして開始時刻と長さを変えられます。複数のプリセットを一度に当てる「composite animation style」もあり、9月30日からは自作の動きをアニメーションスタイルとして保存し、ライブラリへ公開できるようになりました。 ### Figmaエージェントによる生成手順と利用条件 ファイル左のナビゲーションにある「Agents」を開いて動きを言葉で指示すると、エージェントがタイムラインにキーフレームを置きます。結果はタイムライン上で手直しするか、追加のプロンプトで詰めます。Figmaの[AIワークフローの解説](https://help.figma.com/hc/en-us/articles/41159708615319)は、プロンプトに入れる要素として、案の数・動かす要素・目的・質感・案ごとに変える値・固定する値の6つを挙げています。同記事の例を訳すと次のようになります。 「この積み上げ棒グラフに3通りの動きを作って。色付きの棒のグループを1つの形として動かし、軸・目盛線・ラベル・枠は動かさない。1案はきびきびとデータ寄り、1案はバウンドのある遊び心、1案は映画的でゆったり。イージングとずらし（stagger）は案ごとに変え、全体の長さは3案で揃えて。」 エージェントによる生成は有料プランのFullシートが必要です。[ベータ機能のFAQ](https://help.figma.com/hc/en-us/articles/4406787442711-What-Figma-features-are-in-beta)によると、同FAQは、エージェントがベータの間はAIクレジットを消費せず、正式提供後は通常の消費が適用されると説明しています。[リリースノート](https://www.figma.com/release-notes/)では、Figmaエージェントは2026年10月6日に正式提供（ベータ終了）となりました。このため、10月6日以降はエージェントでの生成にAIクレジットが消費される前提で計画してください。生成されたキーフレームを手で直す操作がクレジットを消費することはありません。エージェントがFigmaファイルへ書き込む仕組みそのものは、[use\_figmaとは？Figma MCPでAIがキャンバスに書き込む仕組みと使い方・制限](/tech/details/11541/)で扱っています。 ### Motionが表示されない・書き出せないときの確認点 - ツールバーにMotionが出ない：そのファイルの編集権限が必要。Figma for Governmentプランでは提供されていない。 - 書き出しの「Animated」タブが出ない：キャンバスに直接置いたトップレベルのフレームを選んでいるか確認する。動くレイヤーはフレームの中に入っている必要がある。 - インスタンスの動きを直せない：アニメーション付きインスタンスの長さとプロパティはメインコンポーネント側でしか編集できない。 - キーフレームが勝手に増える：自動キーフレームが有効のまま（タイムライン上部の赤いバー）になっている。 ## イージングとスプリングの選び方 キーフレーム間の線、またはプリセットの設定からEasingメニューを開いて選びます。Figmaの[イージングのヘルプ](https://help.figma.com/hc/en-us/articles/41414048690839-Adjust-an-animation-s-easing)が挙げる種類と用途は次のとおりです。 | 種類 | 動き方 | 公式が挙げる用途 | | --------------- | ------------------------ | ---------- | | Linear | 一定速度 | スピナー・進捗表示 | | Ease in | ゆっくり始まり加速 | 画面から出ていく要素 | | Ease out | 速く始まり減速 | 画面に入ってくる要素 | | Ease in and out | 両端で減速 | 画面内での移動 | | Back系3種 | 逆方向への溜め・行き過ぎ | 遊び心のある出入り | | Hold | 即座に終了値へ跳ぶ | 段階的なシーケンス | | Spring | Gentle・Quick・Bouncy・Slow | 弾む動き | 独自の曲線は「Custom bezier」を選び、制御点をドラッグするか cubic-bezier の4つの値を直接入力します。y座標が0〜1の範囲を超えると、Back系のような行き過ぎが生まれます。スプリングは「Custom spring」でBounceの値を調整します。曲線の4つの値の意味は[ベジェ曲線とは？仕組みをわかりやすく解説｜数式・Illustratorでの描き方・スプラインとの違い](/tech/details/8375/)で詳しく説明しています。 キーフレーム間の既定は、Linearではなく自作扱いのベジェ曲線です。公式チュートリアルのローダー作例でも、自動キーフレームで打った回転に既定の曲線が付き、手でLinearへ変える手順が入っています。作例がLinearへ変える理由として挙げているのは、ループし続けるローダーは一定速度のほうが自然に見えるという点です。回転し続けるものは、曲線をLinearに変えてから確認してください。 ## 公式チュートリアルの作例｜ローダー・線の描画・テキスト・音声 Figmaヘルプの「Motion design fundamentals」には、値まで指定された作例があります。初めて触るなら、この数値どおりに組むと操作を一通り体験できます。 ### 一定速度で回るローダー（1400ミリ秒・Linear） [ローディングアニメーションの作例](https://help.figma.com/hc/en-us/articles/41295998367895-Motion-design-fundamentals-Create-a-loading-animation)では、200×200のフレームに直径80・線幅14の円弧を置き、タイムラインの長さを既定の2000ミリ秒から1400ミリ秒に縮めます。自動キーフレームを有効にして再生ヘッドを1400ミリ秒へ動かし、回転に360を入れると、0ミリ秒に0度、1400ミリ秒に360度のキーフレームが自動で入ります。最後にキーフレーム間の曲線をLinearへ変えれば、途切れずに回り続けるローダーになります。 ### パストリムによるスピナーの伸縮設定 パストリムは、線のどこからどこまでを表示するかを0〜100%で動かす機能で、手書き風の描画やスピナーに使います。中央揃えの線（Center）にしか効きません。前述の作例では、円弧の開き（Sweep）を60%にして回転の終了値を-185度に変え、Path trim end を0ミリ秒で20%から750ミリ秒で100%へ、Path trim start を650ミリ秒で20%から1400ミリ秒で80%へ動かします。始点と終点を少しずらすことで、伸びながら縮む動きになります。 右サイドバーのプリセット「Path」でも同じ系統の動きを付けられますが、こちらは開いたパスに1つまでという制限があります。閉じた円のようなパスはキーフレームで組みます。 ### テキストアニメーションの適用単位と時間差設定 9月30日の更新で、テキストレイヤーに専用のアニメーションスタイルが付きました。Animations欄で「Text」を選び、動きの単位を文字・単語・行・段落から選びます。ずらし方はText stagger settingsで調整します。出現と退場の組み合わせ済みスタイルは「Text enter」「Text exit」から選べ、カーソルを重ねるとキャンバス上でプレビューされます。アニメーションを付けた後もテキストは編集できます。 ### 音声トラックの追加・分割と動画書き出し 音声ファイルをフレームかタイムラインへドラッグすると、音声トラックが追加されます。対応形式はAAC・MPA・MP3・WAVです。再生ヘッドの位置でトラックを分割するショートカットは、Macが Option+K、Windowsが Alt+K です。音声はMP4とWebMで書き出すときに一緒に出力されます。 ## アニメーションコンポーネントと変数による動きの共通化 ボタンやトーストの動きを画面ごとに作り直すと、担当者ごとに値がばらつきます。Motionでは動きをコンポーネントと変数に持たせ、デザインシステムの一部として配れます。 ### アニメーションコンポーネントの作成と公開条件 [アニメーションコンポーネントのヘルプ](https://help.figma.com/hc/en-us/articles/41307940738967-Create-and-use-animated-components)によると、作り方は通常のコンポーネントと同じで、Designモードに戻ってから Option+Command+K（Windowsは Ctrl+Alt+K）で作成します。Motionモードではコンポーネントを作れません。インスタンスはタイムライン上に紫色のトラックで表示され、開始時刻はずらせますが、長さとプロパティはメインコンポーネント側で直します。 作成は全プランでできます。ライブラリへ公開してチームに配るには、有料プランのFullシートが必要です。 ### タイミング変数・イージング変数とモード Figmaの変数には、ミリ秒の長さを持つTiming変数と、曲線やスプリングを持つEasing変数があります。Easing変数に「標準」「ゆっくり」のような複数のモードを持たせ、ページ単位でモードを切り替えると、その変数を参照するすべてのアニメーションが一度に変わります。Easing変数で共通化できるのは加減速や弾み方です。プリセットの所要時間や遅延を共通化する場合は、DurationやDelayにTiming変数を適用します。 ## 書き出し｜MP4・WebM・GIF・SVG・Lottieの設定と制限 動きは、共有用のファイルとして書き出す方法と、Dev Modeでコードを渡す方法の2通りで外へ出せます。ここでは前者を扱います。 ### 動画・GIF・SVGの書き出し手順と無料プランの上限 [書き出しのヘルプ](https://help.figma.com/hc/en-us/articles/41307983648407-Export-animations-from-Figma)の手順は次のとおりです。アニメーションを含むトップレベルのフレームには、レイヤー一覧でMotionのアイコンが付きます。 1. トップレベルのフレームを選ぶ 2. 右サイドバーのExport欄で「Animated」タブに切り替える 3. 形式（MP4・WebM・GIF・SVG）、サイズ、フレームレートを選ぶ。MP4とWebMは画質、GIFはループの有無も選べる 4. Exportを押し、新しいタブで開いたファイルをダウンロードする 1920×1080を超えるサイズと30fpsを超えるフレームレートでの書き出しは、有料プランだけで使えます。動画が粗く見える場合は、書き出しサイズと表示サイズ、元画像の解像度、MP4・WebMの画質設定を確認してください。 ### LottieとdotLottieで崩れる要素 Lottieは、アニメーションをJSONのデータとして持つ形式です。ベクター部分は拡大してもぼやけず、実装側で色や再生区間を制御できます。ただし、画像素材や画像として書き出された効果は、拡大時に粗くなることがあります。Figmaでは、Lottie（圧縮なしのJSON・1ファイル1アニメーション）とdotLottie（画像やフォントを同梱した圧縮形式・複数アニメーション可）の2種類を選べます。 一方で、ヘルプには次の非対応・一部対応が明記されています。 | 要素 | Lottieでの扱い | | ---------------- | ---------------------- | | シェーダー | 非対応（動かない画像になる） | | 動画 | 非対応（MP4・WebM・GIFで書き出す） | | 角度グラデーション | 非対応（画像になる。線形か円形に置き換える） | | ドロップシャドウ・ノイズ・ガラス | 一部対応（最初のフレームの見た目で固定） | 影やガラス効果を動かす前提のデザインは、Lottieにすると影だけ止まります。本番で使うLottieプレイヤーで再生して確かめてから実装に渡してください。LottieとRiveのどちらで実装するかの比較は[RiveとLottieの違いを徹底比較｜ファイルサイズ・インタラクティブ性・Unity対応で選ぶ](/tech/details/4461/)にまとめています。 ## Dev ModeとMCPによる実装への受け渡し 開発者にファイルではなく値とコードを渡す場合は、Dev ModeとFigma MCPサーバーを使います。どちらも有料プランのFullシートかDevシートが必要です。 ### Dev Modeでコードをコピーする手順 [開発への受け渡しのヘルプ](https://help.figma.com/hc/en-us/articles/41296356954263-Hand-off-animations-to-development)によると、アニメーションのあるフレームを選び、InspectパネルのMotionタブで「Show in timeline view」を押すと、読み取り専用のタイムラインとコードが並んで表示されます。コードの初期表示はCSSで、形式の切り替えでReactとJSONを選べます。公式ブログは、React向けとしてmotion.dev形式のコードにも触れています。motion.dev（旧Framer Motion）側の書き方は[Framer Motion（現Motion）とは｜motion/reactの使い方とeasing・springの既定値【v13対応】](/tech/details/3016/)で解説しています。 ### MCPサーバー経由のアニメーション情報の受け渡し MotionはFigma MCPサーバーに対応しています。フレームのリンクをコーディングエージェントへ渡すと、MCPサーバーからキーフレーム・動きの種類・タイミング・イージング曲線が渡り、元の動きに近い実装をエージェントが書けます。対応クライアントやレート制限は[Figma MCPサーバーとは｜料金・レート制限・対応クライアント17種と使い方【2026年9月時点】](/tech/details/5892/)を参照してください。 ### 実装前に足すべき「動きを減らす」設定 Figmaで決めた動きをそのままWebに載せると、OSで「視差効果を減らす」を有効にしている利用者にも同じ動きが再生されます。Webアクセシビリティの基準であるWCAG 2.2のうち、ここでは自動再生の停止と操作に伴うアニメーションに関する2つの達成基準を扱います。 - 2.2.2 Pause, Stop, Hide（レベルA）：自動で始まり、5秒を超えて続き、ほかのコンテンツと並んで表示される動きには、一時停止・停止・非表示にする手段が必要。ただし、その動きが活動に不可欠な場合は例外 - 2.3.3 Animation from Interactions（レベルAAA）：操作をきっかけに起こる動きは、機能や情報の伝達に必須でない限り無効にできること PlaybackをLoopにした装飾アニメーションをページに常時表示すると、2.2.2の条件に当たります。停止ボタンなどを付けるか、自動再生が合計5秒以内に終了する設計にしてください。次のCSSは、動きを減らす設定に応じてトーストの出現アニメーションを無効にする例です。常時ループに必要な停止手段や再生時間の制限は、別途実装します（クラス名と値は例）。 ``` .toast { animation: toast-in 300ms cubic-bezier(0.25, 1, 0.5, 1) both; } @keyframes toast-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* OSで動きを減らす設定をしている利用者には再生しない */ @media (prefers-reduced-motion: reduce) { .toast { animation: none; } } ``` Figma側にこの設定を表す項目はないため、デザインレビューの段階で「減らす設定のときはどう見せるか」を決めておくと、実装側の判断がぶれません。 ## Figma Motionに寄せる仕事と、After Effects・プラグインに残す仕事 Motionはオープンベータで、ヘルプのMotion関連記事の冒頭には「機能が変わり、性能上の問題が起きる場合がある」と書かれています。すべての動きを移すのではなく、次の条件で線を引くのが安全です。 **Motionに寄せるのは、コンポーネントに紐づくUIの動き**です。ボタン・トースト・ローダー・テキストの出現のように、画面をまたいで同じ動きを使い回すものは、アニメーションコンポーネントと変数に載せればファイル間で値が揃い、Dev Modeでそのまま値を渡せます。 **After Effectsに残すのは、同ツールの合成機能や既存の制作工程を必要とする仕事**です。Motion側の書き出しにも制約があり、FigmaのLottie書き出しでは、シェーダーは静止画像になり、影やガラス効果は最初のフレームの見た目で固定されます。動画は非対応のため、MP4・WebMなどへの書き出しを検討します。After EffectsからLottieを書き出している既存の制作ラインがあるなら、新規のUI部品からMotionへ移すのが無理のない順序です。 FigmotionなどのサードパーティのアニメーションプラグインでFigma内の動きを作ってきた場合、2026年10月時点の公式ヘルプのMotion関連記事に、プラグインのデータをMotionへ移す手順はありません。過去の資産は、利用中のプラグインに移行機能があるかを確認し、移行できない動きの再制作工数を見積もってください。デザインと実装をまたぐUIの動きの設計から相談したい場合は、[UI/UXデザインの支援](/service/web/ui-ux/)でも承っています。 ## よくある質問 ### Figma Motionは無料プランでも使えますか？ 使えます。編集権限のあるファイルなら、Starterを含む全プランで動きを作って書き出せます。ただし無料プランの書き出しは1920×1080・30fpsまでで、コンポーネントの公開・エージェント・Dev Modeでのコードコピーは有料プランの機能です。 ### 作ったアニメーションをGIFや動画、Lottieで書き出せますか？ 書き出せます。トップレベルのフレームを選び、Export欄の「Animated」タブでMP4・WebM・GIF・SVGを選びます。2026年9月30日からはLottieとdotLottieも選べますが、シェーダー・動画・角度グラデーションはLottieでは動きません。 ### Motionモードを解除してタイムラインを非表示にするには？ ツールバーの切り替えを「Design」に戻すと、Motionモードが解除されタイムラインも消えます。タイムラインはMotionモードの間しか表示されません。Motionモードのまま表示領域だけを広げたい場合は、タイムラインを「Collapse timeline」で最小化します。 ### Figma Motionで3Dのアニメーションは作れますか？ 2026年10月時点では作れません。フレームやテキストをz軸で回転させる3D変形は、Figma Motionの製品ページで「近日公開予定」とされ、待機リストへの登録制です。公式ブログでは、提供後はCSSへの書き出しとMCP連携にも対応するとしています。 ### FigmotionなどのプラグインやAfter Effectsはもう不要ですか？ UI部品の短い動きはMotionに置き換えられます。After Effectsの合成機能や既存の制作工程が必要な仕事は残ります。Lottieへの対応可否は、制作ツールとは別に書き出し機能と再生環境で確認します。プラグインで作った過去の動きは、移行機能の有無をプラグインごとに確認し、対応していない場合は組み直します。 ## 関連記事 - [use\_figmaとは？Figma MCPでAIがキャンバスに書き込む仕組みと使い方・制限](/tech/details/11541/) - [Figma MCPサーバーとは｜料金・レート制限・対応クライアント17種と使い方【2026年9月時点】](/tech/details/5892/) - [Framer Motion（現Motion）とは｜motion/reactの使い方とeasing・springの既定値【v13対応】](/tech/details/3016/) - [RiveとLottieの違いを徹底比較｜ファイルサイズ・インタラクティブ性・Unity対応で選ぶ](/tech/details/4461/) - [Figma Makeの料金・AIクレジットとは？プラン別の上限と消費量・使い方・エクスポートまで解説](/tech/details/9048/) --- 出典: [Figma Motionとは？使い方・書き出し・無料でできる範囲を解説【2026年10月】]()（株式会社一創）