# Figma Shipped Motion. Nobody Shipped the Sound. _July 31, 2026 · 5 min read · by Systergon_ > A sheet rises and whooshes. A toggle slides and clicks. The animation is now designed in Figma — the sound is still decided months later by whoever implements the screen. How Sound Kit reads a layer’s real Figma Motion duration, delay and easing, fits a clip to that exact curve (length, transient and easing), finds every animation on the page that is still silent, and exports a handoff that names the animation each sound belongs to. Tags: Figma, Motion, Sound, Plugin URL: https://systergon.com/blog/sound-for-figma-motion-animations --- [Install Sound Kit — it’s free →](https://www.figma.com/community/plugin/1398310751744117050) [See the Motion features](https://systergon.com/sound-kit/features/motion-inspect) Figma shipped Motion, and designers who had been faking transitions with Smart Animate suddenly had a real timeline. Durations, delays, easing curves, per-property tracks — the vocabulary of motion design, native in the file. What did not ship is the other half. Motion in a product is almost never silent: a sheet rises _and_ whooshes, a toggle slides _and_ clicks, a success state animates _and_ chimes. The animation is now designed in Figma. The sound is still decided months later by whoever implements the screen. Sound Kit’s Motion tab exists to close that gap — and the important design decision behind it is that it reads your **real** Motion data rather than asking you to describe it. ## It reads the animation that exists Select an animated layer and the Motion tab shows what Figma actually exposes. Two sources, and it is worth being precise about which is which: - The node’s prototype **reactions** — the stable, documented API. A smart-animate or directional transition already carries the animation’s **duration**, its **easing** (including the exact custom cubic-bezier control points, or the spring’s mass/stiffness/damping), the interaction **trigger**, and any trigger **delay**. - The **Beta Motion API** — `timelines`, keyframe tracks and applied animation styles. Where Figma surfaces these, the inspector shows the timeline duration, each keyframe’s offset and animated property, and an easing bound to a variable. Every read is guarded, because it is beta and undeclared. Either way, the values are the layer’s own — not an approximation, and not something you typed in a second time. ![The Sound Kit Motion tab inspecting an animated Figma layer, showing its real duration and easing alongside suggested sounds](https://systergon.com/sound-kit-help/motion.webp) That matters more than it sounds. The usual failure in sound-for-motion is not picking a bad clip; it is picking a clip that is the wrong _length_. A 400 ms sheet with a 900 ms whoosh feels broken in a way people notice instantly and describe vaguely (“it feels laggy?”). Because the tab knows the animation is 400 ms, the sounds it suggests are ones that can actually live in 400 ms. ## Sync to animation Suggestions get you close; **Sync to animation** gets you exact. It fits the clip to the real curve three ways at once: - **Length** — time-stretched to the animation’s actual duration, with the ratio shown before you commit. - **Curve** — the animation’s easing becomes the sound’s gain envelope, so a spring-bounce transition doesn’t sit under a linear fade. When the reaction carries an exact custom cubic-bezier or spring, the envelope follows that geometry rather than the nearest family. - **Moment** — the attack transient is moved onto the instant the motion peaks. This is the one people miss: a clip can be exactly the right length and still feel late, because its hit is 80 ms into the file while the motion peaked at 20 ms. That last one deserves a note on what “the moment the motion peaks” actually means, because it isn’t a number you type in. It is derived from the easing itself — the point of **peak velocity**, the steepest part of the curve. That gives the intuitive answer for every easing: - **Ease-out** peaks at the very start — the hit is the departure. - **Ease-in** peaks at the end — the hit is the arrival. - **Ease-in-out** peaks in the middle — the hit is the crossing. - **Bounce** peaks where the ball first lands, ahead of the rebounds. - **A custom bezier** peaks wherever its own geometry says. The editor shows both numbers side by side — “Attack at 92 ms”, “Motion peaks at 20 ms” — and one button closes the gap by padding the head with silence or trimming it. It will never cut into the attack itself, and it never touches the decay, because the tail is what makes a sound recognisable. One ordering rule: **stretch first, then align.** Stretching afterwards rescales everything, including the silence you just added, and drags the transient straight back off the mark. ![An easing curve read from Figma Motion above a sound waveform trimmed to the same 420 ms, with a playhead sweeping both in lock-step](https://systergon.com/blog/sound-for-figma-motion-animations/images/sync-curve.svg) Preview them together, and if it is right, attach. The behaviour — when it fires, whether it interrupts, any delay — is recorded alongside the sound, so the decision survives into handoff instead of being re-litigated in code review. ## Find the animations that are still silent One animated layer at a time is fine for the first three. It does not scale to a file with sixty transitions in it, and the ones that get missed are never the ones you are looking at. Run **Scan page** and the Motion tab lists every animated layer with its timing and whether it carries sound. Silent animations are almost always oversights rather than decisions — nobody deliberately chooses to have four of six modal transitions make noise. Click any row to select it on canvas and score it, then re-scan to confirm the page is covered. ![The Sound Kit Motion tab page audit, listing every animated layer on the page and whether it has sound](https://systergon.com/sound-kit-help/motion-audit.webp) ## The handoff names the animation This is the part that stops the work evaporating. A normal sound handoff says “play success.wav on the confirmation screen”, which leaves an engineer to guess _when_ during a 420 ms animation it should fire. The Motion export names the animation the sound belongs to and carries its timing, so the instruction is unambiguous: this clip, on this animation, starting at this offset, at this level, not interrupting. Combined with the [tokens and code snippets](https://systergon.com/sound-kit/features/developer-export), what engineering receives is a specification rather than a filename. ## A caveat worth knowing Motion data is read through Figma’s Beta Motion API. It is genuinely useful today — timing, easing and structure all come through — but it is beta, and if a layer you know is animated shows nothing, reload the plugin and reselect it. The [help centre covers the details](https://systergon.com/sound-kit/help/motion-overview). Also worth setting expectations on: hearing a sound _inside_ a Figma prototype requires the sound to be carried by a video node, which needs a paid Figma plan. Everything else — inspecting motion, fitting sounds, auditing the page, exporting the handoff — works regardless. [Here is why](https://systergon.com/sound-kit/help/why-video). ## Where to start Pick the three transitions users hit most — usually a primary action, a sheet or modal, and a success state. Score those, sync each to its real timing, then run the page audit and see how many others you had not thought about. That list is normally longer than anyone expects, and it is the fastest way to make a prototype feel finished. [Install Sound Kit — it’s free →](https://www.figma.com/community/plugin/1398310751744117050) [Read the Motion guide](https://systergon.com/sound-kit/help/motion-overview)