ByFigma Motion is Figma’s built-in animation tool, announced at Config 2026 on June 24, and it adds a real timeline with keyframes directly inside your design file. You no longer need a separate app or plugin to animate a button, a card, or an onboarding flow. This guide covers how to turn Motion on, how keyframes and easing actually work, how exporting to MP4, GIF, or developer-ready code works, and where the tool still falls short of dedicated animation software.
What Is Figma Motion?
Figma Motion is a native animation mode built into the Figma canvas, introduced alongside Code Layers, Weave tools, shader effects, and an upgraded Figma agent at Config 2026 on June 24 (Figma, 2026). Instead of exporting a prototype to a separate motion tool, you switch any frame directly into Motion mode and a timeline appears next to your layers panel.
The name doubles as a description: it’s motion, built by Figma, living where your design already lives. That framing matters because it signals Figma’s broader direction at Config 2026 — pulling capabilities that used to require separate specialist tools (animation, AI image editing, custom plugins) directly into the core design surface instead of treating them as external integrations.
For years, designers who wanted real keyframe animation had to hand off static frames to After Effects, Principle, or ProtoPie and hope nothing got lost in translation. Figma Motion keeps the animation in the same file as the design, which means updating a color or a layout doesn’t break the motion built on top of it the way an export-based workflow often does.
How Do You Turn On Figma Motion for a Frame?
Select any frame on the canvas and switch it into Motion mode from the mode selector at the top of the editor, the same place you’d normally switch between Design and Prototype (Figma Learn, 2026). The timeline panel opens beneath the canvas, showing every layer inside that frame as its own row, ready to be animated independently.
Once you’re in Motion mode, you can scrub the timeline to preview any moment in the animation, drag a layer’s bar to adjust when it starts and ends, and add keyframes directly on the properties you want to change. Nothing here requires a plugin install or an account upgrade to try for the first time.
Figma Motion is not the same feature as Smart Animate, and the two solve different problems. Smart Animate automatically animates the differences it detects between two frames or component states, which makes it fast for hover states, modal entrances, and navigation transitions. Figma Motion gives you a real scrubbable timeline with manual keyframes on a single frame, which is what you need for path-based motion or precise, frame-by-frame timing that Smart Animate can’t fake.
How Do Keyframes Work in Figma Motion?
A keyframe marks a specific point in time where a layer property, such as opacity, position, rotation, or scale, holds a specific value (Figma Learn, 2026). To create motion you need at least two keyframes: one for the starting state and one for the end state. Figma Motion automatically fills in every frame in between to produce a smooth animation.
You can add keyframes manually by clicking on the timeline, or turn on auto-keyframe mode so that any property change you make while the playhead is moving gets captured as a new keyframe automatically. Auto-keyframe is faster for quick micro-interactions; manual keyframes give you more precise control for longer, more deliberate sequences.
Figma Motion also ships with pre-built animation presets for common moves like fade-ins, slides, and rotations, so you don’t have to hand-place keyframes for a simple entrance animation. You can drop a preset onto a layer and then fine-tune the individual keyframes it creates if you need something more custom.
How Long Should a Figma Motion Animation Be?
New animations in Figma Motion default to 2,000 milliseconds, or two seconds, and you can shorten or lengthen that by entering a new duration value directly on the timeline (Figma Learn, 2026). Most UI micro-interactions, like a button press or a toggle switch, look more natural closer to 150 to 300 milliseconds than the two-second default.
Easing controls how a property changes over that duration rather than moving at a constant rate. Figma Motion includes pre-built easing curves alongside a custom curve editor, and you can save a custom easing curve as a reusable variable so an entire team applies the same motion feel across a file instead of eyeballing it animation by animation.
How Do You Build a Simple Fade-In Animation in Figma Motion?
- Select the frame containing the layer you want to animate, then switch it to Motion mode from the mode selector.
- Select the layer, move the playhead to the start of the timeline, and set its opacity to 0 to create your first keyframe.
- Move the playhead forward (300 to 500 milliseconds is a natural starting point for a UI element) and set opacity back to 100 to create the second keyframe.
- Pick an easing curve for the transition between the two keyframes; an ease-out curve usually reads as more natural than a linear fade for interface elements.
- Scrub the timeline to preview the fade, then export it as a GIF for a quick share or hand it to Dev Mode for CSS or React output.
That same five-step pattern, set a start keyframe, set an end keyframe, choose easing, works for position slides and scale changes too. Once you’re comfortable with a basic fade, adding a second or third property to the same keyframes is how most real onboarding and micro-interaction animations actually get built.
How Do You Export a Figma Motion Animation for Developers?
Select any animated frame and export it straight from the file as an MP4, GIF, SVG, or WEBM to share with stakeholders for quick sign-off (Figma, 2026). None of these require Dev Mode, so anyone with edit access can grab a shareable clip in a couple of clicks.
For engineers who need to actually build the interaction, Dev Mode adds export options for CSS, React, or JSON output pulled straight from your keyframes and easing curves (Figma, 2026). That removes a step that used to require a developer to eyeball a video and guess at timing and easing values by hand.
Here’s how the export options break down by audience:
| Export format | Best for | Requires Dev Mode? |
|---|---|---|
| MP4 / WEBM | Sharing a preview with stakeholders or clients | No |
| GIF | Quick previews in Slack, docs, or presentations | No |
| SVG | Lightweight animated icons and illustrations | No |
| CSS | Web developers implementing the exact motion in code | Yes |
| React / JSON | Engineering teams wiring the animation into components | Yes |
What Else Did Figma Announce at Config 2026 Alongside Motion?
Figma Motion launched as part of a much bigger Config 2026 announcement, which is worth knowing since several of these features now sit right next to Motion in the same toolbar (Figma Forum, 2026). Code Layers let you convert any design layer into an interactive code layer with a single click or prompt, treating code as a design material rather than a separate handoff step; early access began in July 2026.
Weave tools bring AI image tasks like swapping backgrounds, adding a logo, or changing an image’s aspect ratio into a curated panel inside the Tools menu, without leaving the design file (Figma, 2026). Weave is in open beta for Professional, Organization, and Enterprise plans on Full seats, so free-tier accounts won’t see it yet.
Rounding out the announcement, Figma also shipped shader fills and effects, generative plugins, and an updated Figma agent that can build reusable skills from text prompts and connect to outside tools including Notion, GitHub, and Microsoft Excel. Motion, Weave, shaders, generative plugins, and the agent update all went live the same day; Code Layers, a FigJam agent, and a Slides agent were listed as coming soon.
Shaders in particular go beyond a simple filter. You describe or reference an image and the Figma agent generates a shader fill or effect, producing dynamic, generative patterns like watercolor textures or moiré grids rather than a flat gradient (Figma, 2026). These shaders are parameterized, so you get on-canvas controls to reshape them, and you can stack several shaders on top of a solid, gradient, or image fill. Generative plugins work the same way in reverse: describe a tool’s behavior and controls in plain language, and Figma builds a working plugin without you touching the Plugin API. Both features are in open beta as of Config 2026, so expect some rough edges.
How Does Figma Motion Compare to After Effects or Standalone Prototyping Tools?
Figma Motion’s biggest advantage is that it never leaves the design file, so there’s no export-and-reimport cycle when a designer tweaks a layout after the animation already exists. After Effects still has far deeper compositing, particle, and 3D tools, and it isn’t going anywhere for high-production video work or complex visual effects.
Compared with prototyping-focused tools built specifically for UI motion, Figma Motion trades some specialized physics and gesture simulation for the simple fact that your source file and your animation are the same file. For most product teams animating buttons, cards, onboarding flows, and page transitions, that trade-off favors Figma Motion. Teams producing cinematic brand videos or complex particle effects still have good reasons to reach for a dedicated motion tool instead.
What Are Practical Use Cases for Figma Motion?
Not every project needs a full animation system, so it helps to know where Figma Motion earns its place in a real workflow rather than becoming a novelty nobody revisits after the Config 2026 launch week. These five use cases cover most of what product design teams and freelance designers actually reach for it to solve.
- Micro-interactions: button presses, toggle switches, and hover states that need to feel instant and precise
- Onboarding flows: multi-step walkthroughs where each screen transition needs to match a specific easing feel
- Marketing prototypes: animated hero sections or product demos you can export as MP4 without booking developer time
- Developer handoff: exporting CSS or React values so engineers implement the exact timing the designer intended
- Design system motion tokens: saving custom easing curves as variables so an entire team’s animations feel consistent
How Do You Design Accessible Motion in Figma Motion?
Not every user wants every animation. The CSS media query prefers-reduced-motion lets a browser tell your site or app that the visitor has turned on a system-level setting to reduce motion, usually because of vestibular disorders or motion sensitivity. When your engineering team implements the CSS or React export from Figma Motion, that’s the point to wire in a reduced-motion fallback, typically a simple cross-fade instead of a slide, scale, or rotation.
It’s worth deciding this at the design stage rather than leaving it as an engineering afterthought. If you’re designing a keyframe sequence with several moving parts, sketch out (even just as a note in the file) which properties are purely decorative and which ones carry real information, since the decorative motion is usually what gets stripped out for reduced-motion users first.
What Are the Limitations of Figma Motion?
Figma Motion is brand new as of June 2026, so workflows, plugin support, and documentation are still catching up to a feature that took years to build inside tools like After Effects. Teams already deep into a plugin-based motion workflow will need to decide whether to migrate existing animations or run both systems in parallel for a while.
Version control is another open question worth watching. Because the animation now lives inside the same file as the design, a designer reverting a layout change could unintentionally affect an animation built on top of it, in a way that a separate motion file never would. Teams that rely heavily on branching should test how Motion timelines behave across branches before committing a whole design system’s animations to it.
Some of the other Config 2026 features that pair naturally with Motion, like Weave’s AI image tools, are gated to paid Professional, Organization, or Enterprise plans on Full seats, so a free-tier team can build the animation itself but may not get every companion tool in the same toolbar. Complex effects like particle systems, physics-based bouncing, or 3D camera moves also remain outside what Motion is designed to do.
If you’re building UI animation on top of an existing visual system, it’s worth revisiting your base design language first. Our guides to modern UI with glassmorphism effects and 2026 graphic design trends cover the visual styles that Figma Motion animations are usually built on top of.
Figma Motion also isn’t the only Figma feature that changed how designers organize their work this year. If you haven’t revisited your file structure recently, see our Figma nested folders guide, and if you want the AI-assisted image side of Figma rather than the animation side, our Figma AI image editing guide covers those tools in detail.
Frequently Asked Questions About Figma Motion
Is Figma Motion free to use?
Figma Motion works inside the same canvas as regular design files, and the core timeline and keyframe tools are not locked behind a separate purchase. Some companion Config 2026 features, like Weave’s AI image tools, are limited to paid Professional, Organization, or Enterprise plans on Full seats (Figma, 2026).
When was Figma Motion released?
Figma announced Figma Motion at its Config 2026 conference on June 24, alongside Code Layers, Weave tools, shader effects, and an updated Figma agent (Figma, 2026). Motion was available immediately the same day, unlike Code Layers, which started as an early-access rollout in July, and unlike the FigJam and Slides agents, which Figma listed only as coming soon.
How many keyframes do you need to animate a layer in Figma Motion?
You need at least two: one keyframe for the starting value of a property like opacity or position, and one for the ending value (Figma Learn, 2026). Figma Motion interpolates every frame in between automatically based on the easing curve you choose.
Can you export Figma Motion animations as code?
Yes. Dev Mode adds export options for CSS, React, and JSON pulled directly from your keyframes and easing curves, so engineers don’t have to reverse-engineer timing from a video file (Figma, 2026). Non-code exports like MP4, GIF, SVG, and WEBM are available without Dev Mode, which means designers can share a preview clip long before a single line of code exists.
Does Figma Motion replace After Effects?
Not for every use case. Figma Motion is built for UI-level animation that stays in sync with your live design file, while After Effects still leads on compositing, particle systems, and complex video production work. Most product teams use Figma Motion for interface motion and reach for a dedicated tool only for heavier video work. Smart Animate remains the faster option for simple, automatic frame-to-frame transitions when you don’t need manual keyframe control at all.
What is the default animation duration in Figma Motion?
New animations default to 2,000 milliseconds, or two seconds (Figma Learn, 2026). You can change the duration directly on the timeline, and most UI micro-interactions look best considerably shorter than the default.
Subscribe for Newsletter
