# Figma Motion Export MP4 _September 1, 2026 · 11 min read · by Systergon_ > MP4 is the format that plays everywhere without asking anything of anyone — Slack, a deck, a phone, a message thread. Here is how to get one out of Figma Motion, and how to choose the three settings that decide what it weighs. **Answers the question:** figma motion export mp4 **What this page is for:** How to export a Figma Motion animation as an MP4 file, including the frame rate, quality and size settings, what each does to the resulting file, and when MP4 is the wrong choice. URL: https://systergon.com/figma-motion-export-mp4 Plugin: Motion Path for Figma — https://systergon.com/products/figma-plugins/motion-path Install: https://www.figma.com/community/plugin/1654530170219655744 ## Steps at a glance 1. **Apply the motion path** — Press Apply motion path so the timeline exists. 2. **Open Export video** — Click ⋯ in the titlebar and choose Export video. MP4 is already selected. 3. **Choose a frame rate** — Pick 12, 24, 30 or 60 fps. 30 is the default and suits almost every use. 4. **Choose a quality preset** — Low, Medium or High. High is the default; drop it only when the file has to be small. 5. **Choose a size** — A multiplier from 50% to 4× applied to the frame’s own dimensions. 6. **Export the MP4** — Press Export MP4. Figma encodes the top-level frame and the file downloads. --- [Install Motion Path — it’s free →](https://www.figma.com/community/plugin/1654530170219655744) [See the product page](https://systergon.com/products/figma-plugins/motion-path) **The short answer:** apply your motion with [Motion Path](https://systergon.com/products/figma-plugins/motion-path), open the **…** menu in the plugin titlebar, choose **Export video**, and press **Export MP4**. MP4 is already selected when the panel opens, and the defaults — 30 fps, High quality, 100% — are right for almost every use. Figma encodes the file itself, so what downloads is canvas playback rather than a recording of it. MP4 is the format that asks nothing of anyone. It plays in Slack, in a deck, in a message thread, on a phone, in a browser, without a plugin or a player or a conversation about codecs. That universality is the entire reason to choose it — and it is also why it is the wrong choice in the three specific cases at the end of this page. ## The three steps First, **apply the motion**. The plugin previews your animation live in the panel, but that preview writes nothing to the canvas. Export reads the canvas, so an MP4 taken before you press **Apply motion path** is a video of something standing still. ![The Motion Path Animate tab: an object riding an S-curve in the preview, Source and Animate rows, Essentials with duration, direction, loops and easing, and the blue Apply motion path button at the bottom](https://systergon.com/motion-guides/shots/animate-tab.png) Second, **open Export video** from the **…** menu. ![The Motion Path panel with the overflow menu open, listing Save as preset, Copy as code, Export video, Config JSON, Settings and Help](https://systergon.com/motion-guides/shots/menu-open.png) Third, **press Export MP4**. The whole sequence, held a beat per step: ![A step-by-step loop: the Animate tab ready to apply, the overflow menu opening to reveal Export video, the Export video panel set to MP4, and then switched to GIF where a Loops field replaces Quality](https://systergon.com/motion-guides/shots/steps-video.gif) That is genuinely all of it. Everything below is about the three settings between those steps, and about knowing when to leave them alone. ## The panel, field by field ![The Export video panel set to MP4: a format segmented control with MP4 selected, frame rate 30 fps, quality High, size 100 percent, a summary line reading MP4 30 fps 100 percent high quality, and a blue Export MP4 button](https://systergon.com/motion-guides/shots/export-video-mp4.png) ![The five fields of the MP4 export panel annotated: format decides which knobs appear, frame rate offers 12 24 30 or 60, quality is a preset not a bitrate, size is a multiplier from 50 percent to four times, and the summary states what you are about to get](https://systergon.com/motion-guides/diagrams/mp4-settings.svg) Five things, one of which is not an input. Taking them in order: ### Format MP4 is selected by default. The choice matters beyond the file extension because it decides which fields appear below: MP4 and WebM get a **Quality** preset, GIF gets a **Loops** count instead, because loop count is the knob GIF actually has and quality is not. If you switch away and back, the panel keeps your frame rate where it can. Where it cannot — GIF caps at 30 fps and MP4 allows 60 — it snaps to the nearest legal rate rather than letting you submit something the encoder will reject. Ties resolve downward, so switching never silently upgrades you to a heavier export. ### Frame rate ![The Export video panel with the frame rate dropdown open, listing 12 fps, 24 fps, 30 fps with a checkmark, and 60 fps](https://systergon.com/motion-guides/shots/export-video-fps.png) MP4 accepts **12, 24, 30 and 60**. Those are the only values — they are a literal union in the plugin API, so anything else is a rejected export rather than a slightly worse one, and the panel therefore offers no others. 30 is the default and is right for almost everything. Reach for 60 only when the motion is fast and someone will watch it closely, because it doubles the encoded frames for a difference most viewers will not consciously notice on a two-second clip. 24 gives a slightly filmic cadence and a smaller file. 12 is a deliberate stylistic choice that reads as stepped animation — useful occasionally, never a way to save space quietly. ### Quality ![The Export video panel with the quality dropdown open, showing Low, Medium and High with High checked](https://systergon.com/motion-guides/shots/export-video-quality.png) A preset, not a bitrate: **Low**, **Medium**, **High**. High is the default. Because Figma is encoding flat vector artwork rather than camera footage, High is cheaper here than the word suggests — large areas of solid colour compress extremely well. Drop it only when you are up against a hard size limit and would rather lose fidelity than resolution. ### Size ![The Export video panel with the size dropdown open, listing 50 percent, 75 percent, 100 percent checked, 150 percent, 200 percent, 300 percent and 400 percent](https://systergon.com/motion-guides/shots/export-video-size.png) A multiplier applied to the frame’s own dimensions, from **50% to 4×**. This is the field most likely to be misused, and the reason is in the next section. ### The summary line Under the controls sits one line reading something like _MP4 · 30 fps · 100% · high quality_. It is not a setting; it is a statement of what you are about to get, placed before the button on purpose. Reading it takes a second and is faster than exporting twice. ## The file-size maths, and the trap in it ![Frame rate options drawn as bars showing 60 fps is twice the frames of 30 fps, and size options drawn as chips, with a note that pixels scale with the square of the size multiplier so 200 percent is four times the data](https://systergon.com/motion-guides/diagrams/fps-weight.svg) The two knobs compound differently, and the difference matters when a file is too big. **Frame rate scales linearly.** 60 fps is twice the frames of 30. Halving the rate roughly halves the work. **Size scales quadratically.** 200% is four times the pixel data, not twice; 400% is sixteen times. This is the trap: the multiplier looks like a quality control, and it is not. Scaling a 100% export up to 200% does not add detail — the source artwork is whatever resolution the frame is. It multiplies the data describing the same picture. So when a file is too heavy, drop the frame rate first. It costs less visually than you expect on short clips, and it costs far less than you would lose by halving the size. And when you genuinely need a crisper large render, make the _frame_ bigger in Figma and export at 100% — or, if what you actually want is resolution independence, you do not want a video at all. You want [Lottie](https://systergon.com/figma-motion-export-to-lottie), which is vector and has no resolution. ## Duration is the setting that is not in the panel Nothing in the export panel controls how long the clip is. That is decided on the Animate tab, by duration, loops and direction — and it affects file size more than any of the three export settings do. A four-second clip at 30 fps is 120 encoded frames. The same clip at 60 fps is 240. Halving the duration saves more than dropping from High to Medium, and it costs nothing visually because you were probably showing one idea for twice as long as it needed. Loops matter here too. If your motion repeats the traversal three times on the Figma timeline, the encoder faithfully records all three — you get three times the file for something a viewer will experience as a loop anyway, because the player loops it. One clean pass, looped by the player, is almost always the better artefact. [Direction, loops and seamless](https://systergon.com/motion-path/help/direction-loops) covers the settings. ## Where MP4 is the wrong answer ![A comparison table of GIF against MP4 covering inline playback in email and READMEs, colour depth, file size, frame rates offered, and loop control in the file](https://systergon.com/motion-guides/diagrams/gif-vs-mp4.svg) There are exactly three cases, and they are worth knowing precisely because MP4 is right the rest of the time. **Email, READMEs and issue threads.** These render images but will not run a video element, so an MP4 arrives as an attachment or a link rather than as motion. GIF is the only format that plays inline there. It costs you 256 colours and a much larger file, and in that one context it is worth it. Everything about GIF in [the video export guide](https://systergon.com/figma-motion-export-video). **A web page where the animation sits on a coloured or patterned background.** MP4 has no alpha channel, so your animation arrives on an opaque rectangle. WebM does support alpha, and is smaller besides. It is a web-only answer — support outside browsers thins out fast — but on a web page it is the better one. ![Three cards making the case for WebM: smaller files than MP4 at the same quality, alpha channel support for transparency, and current-browser support, with a caveat about support outside the browser](https://systergon.com/motion-guides/diagrams/webm-alpha.svg) **The animation is going into a product.** This is the big one. A video is finished pixels: it cannot be recoloured, resized without loss, paused at 40% while a form validates, sped up on a fast connection, or driven by application state. If an engineer has to _ship_ the motion rather than look at it, they need a description of it, not a recording. ![A table mapping destinations to formats: Slack and slide decks to MP4, release emails and READMEs to GIF, weight-sensitive web pages to WebM, app builds to Lottie, browser-owned motion to CSS, and reproducing a setup to Config JSON](https://systergon.com/motion-guides/diagrams/format-decision.svg) The useful habit for that last case is to send both: the MP4 so they can see the intent in one second without opening anything, and the [Lottie](https://systergon.com/figma-motion-export-to-lottie) so they can build it. ## What the MP4 does not carry An MP4 is pixels over time, and it is worth being explicit about what that excludes, because the gaps are invisible until someone downstream needs one of them. It carries no layer names, no structure and no text you can select or search. It carries no interactivity — a prototype hotspot, a hover state, a scroll trigger all flatten to whatever happened to be on screen. It carries no colour tokens or styles, so nobody can pull a hex value out of it. And it carries no audio, because a Figma timeline has none. None of that is a defect; it is what “a video” means. The failure mode is treating the MP4 as the handoff rather than as the illustration accompanying one. If the recipient needs any of those things, the MP4 is not the deliverable — it is the covering note. ## Naming exports so they stay useful The file arrives named by Figma, and if three of them end up in a Slack thread nobody can tell which is which a week later. It is worth renaming on the way out, because the cost of not doing it lands on whoever has to find the right one under review pressure. What actually helps is naming for the _decision_ rather than the settings: `checkout-success-v3.mp4` beats `export-30fps-high.mp4`, because the person looking for it remembers what it showed, not how it was encoded. Where a clip is one of several options being compared, numbering them in the order they will be discussed saves a surprising amount of meeting time. And if a clip is going to be re-exported repeatedly as a design iterates — which is the normal case, not the exception — keep the version marker in the name rather than relying on the download timestamp. Timestamps survive the download folder; they do not survive being pasted into a document. ## When the button will not go ![The Export video panel with a disabled Export MP4 button and the message Select the animated layer or its frame to export](https://systergon.com/motion-guides/shots/export-video-blocked.png) Two states disable it, and the panel names which one you are in. Either nothing is selected, or the selection is not inside a frame with a timeline. There is also a third failure that is not an error at all: the export succeeds and the file shows a static frame, which means the motion was previewed but never applied. Figma encodes a **top-level frame** — one sitting directly on the page. You will normally have the moving layer selected instead, and the plugin resolves upward to find the frame, so either selection works. A nested frame does not. ![A canvas tree showing a page containing a top-level frame named Hero which contains the selected layer Ship, with panels explaining that nested frames are rejected and top-level frames with animated content are accepted](https://systergon.com/motion-guides/diagrams/top-level-frame.svg) ## Frequently asked questions ### How do I export an MP4 from Figma? Apply your motion with Motion Path, open the **…** menu in the plugin titlebar, choose **Export video**, and press **Export MP4**. MP4 is selected by default, and the default settings suit most uses. ### Does Figma export MP4 natively? Figma has the encoder — it arrived in Plugin API Update 131 — but it is reachable through the plugin API rather than as a button in the Figma UI, so a plugin has to call it. The encoding itself is Figma’s, not the plugin’s. ### What frame rate should I use for an MP4? 30 fps, unless you have a reason. MP4 accepts 12, 24, 30 and 60. Use 60 only for fast motion someone will study; it doubles the encoded frames for a difference most viewers will not notice on a short clip. ### How do I make the MP4 smaller? Shorten the clip first, then drop the frame rate, then drop the quality preset. Reducing the size multiplier is a last resort because it costs resolution — and note the reverse, that raising it costs data quadratically without adding detail. ### Can I export MP4 with a transparent background? No — MP4 has no alpha channel. Use WebM, which does, if the destination is a web page. Outside a browser, support for WebM is patchy, so an opaque MP4 is usually the safer artefact. ### Why is my MP4 a still image? The motion was previewed but never applied. Press **Apply motion path** so the native keyframes exist on the canvas, then export again. ### Can I choose the bitrate? Not directly. Quality is exposed as Low, Medium and High presets rather than a numeric bitrate, because that is the shape of the underlying API. Frame rate, size and clip duration are the levers that actually move file weight. ### Does the MP4 loop? MP4 has no loop flag in the file — looping is up to whatever plays it, and most players and social platforms loop short clips by default. If you need a guaranteed loop count baked in, that is GIF, which has a Loops field. ### Can I export MP4 from FigJam or Figma Slides? No. Video export runs in Figma design files only. ## Where to go next - [Figma Motion export video](https://systergon.com/figma-motion-export-video) — all three formats, with GIF and WebM in full. - [How to export Figma Motion](https://systergon.com/how-to-export-figma-motion) — every route out, compared. - [Figma Motion export to Lottie](https://systergon.com/figma-motion-export-to-lottie) — when the motion has to ship, not just be seen. - [Figma Motion to JSON](https://systergon.com/figma-motion-to-json) — the three JSONs, and which one you want. - [Motion Path help centre](https://systergon.com/motion-path/help) — paths, timing, effects and troubleshooting. [Install Motion Path — it’s free →](https://www.figma.com/community/plugin/1654530170219655744) [Browse 300+ animation examples](https://systergon.com/motion-path/examples) ## Related guides - [Figma Motion Export Video](https://systergon.com/figma-motion-export-video) — How to export a Figma Motion animation as video — MP4, GIF or WebM — using Figma’s own encoder, including every setting in the panel and the top-level-frame rule that governs what can be encoded. - [How to Export Figma Motion](https://systergon.com/how-to-export-figma-motion) — The hub page for exporting Figma Motion: compares every available route — MP4, GIF, WebM, Lottie, CSS, SVG, HTML, Figma’s native Copy as, and Config JSON — and says which to pick for a given destination. - [Figma Motion Export to Lottie](https://systergon.com/figma-motion-export-to-lottie) — Step-by-step instructions for turning a Figma Motion animation into a Lottie JSON file using the Motion Path plugin, including where the export lives, what the file contains and what it cannot carry. - [Figma Motion to JSON](https://systergon.com/figma-motion-to-json) — Explains the three JSON outputs available from a Figma Motion animation — Lottie JSON, Figma’s own Copy as JSON, and Motion Path’s Config JSON — and which one to use for playback, inspection or reproducing a setup.