DEV Community: Shayan

AtomCut made its own intro using Opus 5.5 ( Launch Motion design )

Shayan — Sun, 27 Sep 2026 21:29:46 +0000

The motion design you see was entirely built using Opus 5.5 using atomcut MCP.
and it has a great taste.

This is one of those short articles, nothing more to say.
Just amazed by the results and the fact that all is editable, and customizable.

The easiest way to add liquid glass to your videos

Shayan — Mon, 21 Sep 2026 05:39:14 +0000

Liquid glass looks great. It actually deserves to stay the design trend also in 2027.

And getting them to your video is usually hard and needs extra work.

So I added a built-in Glass UI effect to AtomCut.

1. Draw your shape

Create any shape on the canvas.

2. Add the Glass UI effect

Inside the effects panel, add Liquid Glass effect.

3. Tweak it

Adjust the settings until it looks right.

That's it.

You can animate the shape, change its position, scale, opacity, and the glass effect itself — just like any other layer in AtomCut.

No After Effects setup.
No plugins.
No manually building the glass effect.

Just draw → apply → animate → export.

Try it in AtomCut for free

Figma-inspired video editing and motion design, done right

Shayan — Sun, 20 Sep 2026 00:49:13 +0000

A Figma-inspired video editor is one where the canvas is the place you work, the document is the truth, the browser is the runtime, and the free tier is the whole tool rather than a trial. AtomCut is that, with one addition Figma never made: a real multi-track timeline under the canvas, so a frame has a duration, a group is a clip, and every property you can see can be keyframed. It is free, needs no account, runs offline, and exports MP4, WebM, GIF, PNG sequences, SVG and Lottie. I built it alone over the last few months, and this post is about which Figma ideas survived contact with a time axis, which had to change, and what "done right" has cost so far.

AtomCut is a free motion design and video editor that runs in the browser, at app.atomcut.net. I am not affiliated with Figma; it is the reference point because it is the one most designers and developers already have in their hands.

Canvas above, timeline below, one document underneath both. The rocket is a group; the group is a clip; its four paths are its rows.

What Figma got right, and what a timeline does to each idea

Figma's real invention was not the pen tool. It was a set of decisions about where work lives: on an infinite canvas with artboards, in one document, edited by direct manipulation, in a browser tab you can send to anyone. Everything below is one of those decisions, what it became in AtomCut, and the thing time does to it.

In Figma	In AtomCut	What time adds
Frames (artboards) on an infinite canvas	Frames on an infinite canvas, `F`	a frame carries a duration and its own frame rate; nest one inside another and it becomes a clip with speed, loop, ping-pong and reverse
Pages	Pages, plus auto-managed Nested and Components pages	pre-comps and component sources live on their own pages, so the page you design on stays clean
Components and instances	Components: a frame flagged as a shared source; an instance is a nested clip pointing at it	⌥-drag, paste and duplicate make new instances; editing the source updates all of them at the current time; detaching deep-clones on purpose
Variables	Five typed variables: color, number, fontFamily, fontWeight, string; bind any field	a variable shares one value across layers; a keyframe animates one value over time; they are different axes and both work on the same field
Auto layout	Select what you already arranged, press `⇧A`; the row, column or grid you made becomes the rule, gap included	gap, padding and alignment are keyframeable, so a layout can widen over time like a shape changes colour
Fills and strokes as paint lists	Paint lists, solid and gradient, dashes, caps, joins	every stop keyframes; a stroke can be trimmed along its length over time
Boolean operations	Composite groups: union, subtract, intersect, mask, as a mode on the group you already have	the group is also a clip, so the boolean result can be trimmed, faded and moved as one thing
Crop-mode image fill	A cropped layer has two transforms: the window and the picture inside it	you can pan the footage inside a nailed-down frame, and the two never fight between keyframes
Plugins	Sandboxed plugins with a typed API; install from a `.zip` under Plugins → Manage plugins…	the built-in Icons, Waveform Visualizer and LipSync Studio are plugins, and they insert ordinary clips
Multiplayer	Not yet	this is the gap; more below

The pattern in the right column is the whole design. Nothing in the timeline is a special case bolted onto the canvas; every canvas idea kept its shape and gained a time dimension.

Where Figma stops: a canvas has no time axis

Every browser tool for motion I have used picks a side. Canvas-first tools (Jitter, Fable, Figma's own prototype transitions) have a stage you can draw on and a thin timeline. Video-first tools (CapCut, Clipchamp, Canva's video mode) have a timeline and no pen, no boolean ops, no keyframes on arbitrary properties. Both are good at what they chose. Neither lets you draw a lower third with a pen tool and then ripple-trim it against a talking-head clip in the same window.

AtomCut's one structural bet is that the two halves belong together: canvas above, an NLE below. The timeline is a proper one, not a keyframe strip. Tracks are unified channels, so any clip rides any lane. Drag a clip into its neighbour to ripple or overwrite. Grab the seam between two clips to roll the edit. Link clips so they trim and delete together, the DaVinci way. Split with the razor and the split is keyframe-aware, so the curve is continuous across the cut. Audio shows real decoded waveforms and carries its own effect stack.

None of that is new to video editors. What is new is what sits above it: the same frame that plays in the timeline is an artboard you can pen-edit, auto-layout and turn into a component.

A group is a clip, and the row is the container

The place where "Figma idea meets timeline" is most visible is grouping. In Figma a group is a folder in the layers panel. In a video editor a group is usually a pre-comp: a separate composition you drill into, with its own timeline you cannot see next to the parent's.

In AtomCut a group is a clip, exactly like any other, that happens to hold rows of its own. It sits on an ordinary lane of its parent, at any z. Open it and its rows appear nested under its bar, in the same timeline, at the same zoom. Because it is a clip it carries what every clip carries: transform, paint, effects, opacity, blend mode, feather, an in and an out animation, on top of whatever its members carry.

Its span is a window, not a container that owns its children's time. Trim the group's edge and members past the edge are hidden, never retimed; trim it back out and they reappear where they were. Drop any clip onto a group and it joins. Drag a member past the group's edge and it lifts out onto its own row. A clip is in a group because it sits on one of that group's rows; there is no clip.groupId field anywhere, so moving a clip onto a row is moving it into the group, and nothing ever needs compacting.

This is also what an icon becomes. Drop a Lucide rocket from the built-in icon search and it lands as a group of four path layers. Turn on Draw On and the outline inks itself in over 900 ms, one path after another, in the order it was drawn. The group is the clip you trim; the paths are the rows you keyframe.

"Done right" means one document, evaluated as a function of time

Here is the engineering under the claim, because "done right" is cheap to type.

The document is the product. Everything a project is (frames, layers, paints, effects, keyframes, sounds, captions, variables, node graphs, motion tracks) lives in one zod-validated JSON document, AtomCutDocument, currently at schema version 75. Every migration up to it still runs on load, so a file saved by an older build still opens. Nothing editor-specific leaks into the document; the web editor renders it, and a future native plugin could rebuild it from the same file.

├── durationMs, stageBackground      // one shared timeline for all frames
├── pages: Page[]                    // Figma-style workspaces; the canvas shows one
├── frames: Frame[]                  // artboards (comps): x, y, w, h, durationMs, fps, component, instanceOf…
├── tracks: Track[]                  // kind-agnostic lanes; a track with groupId is a ROW of that group
├── variables, graphs, trackers      // typed variables, node graphs, motion tracks
└── assets, markers

The core is pure. @atomcut/core has no DOM and no React. Evaluation is a deterministic function, (document, time) → frame, and it is the same code path for playback, scrubbing, the MP4 and WebM encoders, the PNG sequence and the Lottie translator. If the export ever differs from what you saw while scrubbing, that is a bug with one place to look, not a second renderer to reconcile.

Undo is patches, not snapshots. Every mutation goes through one store using immer's produceWithPatches. A history entry stores forward and inverse patches; a continuous gesture coalesces into one entry through a merge key. Undo cost is proportional to the change, not to the document.

A frame rate is a grid, never a time. Every frame carries its own fps and there is no document-global rate, because a global rate plus a per-frame override is two stored fields for one fact, and the halves of the app that read each one disagreed the moment a comp set its own. A rate only quantizes: it is what the ruler ticks on, what ← and → step by, what snapping magnetises to, what the exporter iterates. So nesting composes for free. A 12 fps flipbook inside a 60 fps comp holds each drawing for 83.33 ms regardless; the parent samples every 16.67 ms and sees the same cell five times. Nothing resamples across a comp boundary, so nothing drifts.

One fact, one field. A mirrored layer is a negative scale and nothing else; there is no flipX flag, because a flag plus a sign disagree the moment a keyframe interpolates between them. The pivot is stored as a fraction of the layer's own box, like CSS transform-origin, so it survives a resize, a re-wrap and a media swap. Each of these replaced a family of bugs, not one bug.

If you build editors, I wrote up why a group is a clip and why a frame rate is a grid at length; the two-transform crop, and why the content transform must know nothing about the crop insets, is next.

Keyframe anything, including whether an effect is on

Figma's canvas is stateless in time. AtomCut's rule is: if a property has a value, it keyframes. Click the ◆ next to any field in the inspector to plant a key at the playhead. Or arm Record and just edit; every change you make while it is armed becomes a keyframe at the current time, which is how you animate things that have no obvious slider, like whether a blur is enabled or which font weight a word has.

Keys are value-typed. Numbers interpolate. Colours blend in RGBA. Discrete values (a font weight, the text itself, an effect's on/off) hold until the next key. So a gradient stop, a shadow's blur, an EQ band and an auto-layout gap all animate through the same engine as a position. The curves panel shows real Bézier easing with draggable tangents; non-numeric tracks show as a dope sheet you retime.

What is in the box

The point of this post is the model, not the feature list; I wrote the full contents, with every gap I know of separately. The short version: 337,000 open-source icons from 208 sets, searchable inside the editor and each one a group of paths that can draw itself on. 4,555 CC0 sound effects with an ear guard that measures perceived loudness. 103 kinetic text looks, captions you tap in time to the clip, text on a path that re-lays on a live curve. 36 keyframeable effects, 23 transitions, motion tracking, a frame-by-frame mode with onion skin, 43 pressure brushes including a watercolour that bleeds.

Export is where a Figma-shaped tool usually falls down, so: MP4, WebM, GIF, PNG sequence, a lossless MOV master with PCM sound for Resolve and Premiere, SVG with real glyph outlines, and Lottie with a fidelity report that says what the translator could not carry.

The export dialog. Free is everything up to 720p, no watermark. Lifetime is the ceiling removed.

Getting Figma work into it

There is no .fig import, and I am not going to pretend one is close. What works today: select the frame in Figma, export it as SVG, drop the file onto the AtomCut canvas. It lands as one resolution-independent layer, instantly, however many nodes it has. Click Edit as vector and every disjoint piece becomes its own layer with its own fill, transform, effects and keyframes. From there it is an AtomCut document. Figma outlines text on SVG export by default, so words arrive as paths; for anything you want to retype or animate per glyph, set the type again in AtomCut with T and bind it to a fontFamily variable.

What it does not do, in the order it will bother you

No multiplayer. This is the Figma feature, and AtomCut does not have it. The document is typed, versioned and patch-based, which is the groundwork a CRDT layer needs, and live collaboration is the next big piece of work. No date. Today it is one person per file.

No speech-to-text. Captions are typed and tapped, not transcribed.

No 3D. No cameras, no lights, no extruded text with materials; the text extrude is stepped 2D copies and its blurb says so.

Not for a two-hour feature. It is for motion graphics, short video, UI animation, launch clips and captions. A native NLE will handle a 4K multicam timeline better than a browser tab.

Two months old, one maintainer. Rough edges exist, and there is no community yet to have found them for you. Reported bugs are usually fixed in the next release, and the changelog is public.

What free means here, and what $29 buys

Every tool, effect, panel, icon and sound is free, with no watermark and no account, exporting up to 720p. AtomCut Lifetime is $29 once at launch ($49 later) and removes the resolution ceiling: Full HD, 4K, transparent and per-layer export, on web and desktop, every future version included. There is no subscription and there will not be one. The free tier has to be the real tool, because the only moment anyone pays is the moment they have something they want in HD.

FAQ

Is AtomCut a Figma plugin? No. It is a standalone editor at app.atomcut.net. Figma work comes in as SVG.

Can I import a Figma file? Not .fig. Export or copy the frame as SVG, drop it in, click Edit as vector.

Does it work offline and on an iPad? Yes. It installs as a PWA and keeps working offline, saving projects locally; on an iPad it is the same workspace with touch and pencil pressure. Desktop builds exist for macOS, Windows and Linux.

Can several people edit one file at once? Not yet. See the gaps above.

Is it open source? No. The GitHub repo hosts the releases and the changelog is public; the source is not open today.

Open app.atomcut.net, press R, draw a rectangle, arm Record, drag it somewhere else, and press Space.

A full motion design studio in a browser tab, free, on Mac, Windows, Linux and iPad

Shayan — Fri, 18 Sep 2026 14:01:59 +0000

AtomCut is a free motion design and video editor that runs in the browser: a Figma-style infinite canvas with a real multi-track timeline underneath it, in one window, with no account and no install. It ships with 337,000 open-source icons, 4,555 public-domain sound effects, 103 kinetic text looks, 36 keyframeable effects, 23 transitions, vector morphing, captions, motion tracking and a frame-by-frame mode, and it exports MP4, WebM, GIF, PNG sequences, SVG and Lottie. It runs on macOS, Windows and Linux as a desktop app, on an iPad with touch, and offline once it has loaded.

I built it, alone, so discount everything below by however much you like. Then open app.atomcut.net. It is free and there is nothing to sign up for, which means every sentence in this post can be checked in about ten minutes. That is the only reason I feel fine writing a post that is, unavoidably, a list of things my own app does.

What "a whole studio in a tab" means

Most browser tools for motion pick a side. Canvas tools (Jitter, Fable, Figma's prototype animations) have a good stage and a thin timeline. Video tools (CapCut, Clipchamp, Canva's video mode) have a timeline and no real vectors, no pen, no keyframes on arbitrary properties. AtomCut's one structural bet is that the two halves belong in one window: the canvas above, an NLE below, and one document underneath both, so a group is a clip, a text layer is a caption, an icon is a set of paths, and all of them keyframe the same way.

One window. Canvas, inspector, plugins rail, and the timeline with a group opened to show the four paths a Lucide rocket is made of.

The rest of this post is the contents. I have kept a "what it does not do" line in most sections, because a list with no gaps is an advert, and because those lines are where you decide whether it fits your work.

Vector tools that are actually vector tools

A Bézier pen with per-node corner rounding. Parametric shape tools. Segment-level path editing. Boolean composite groups (union, subtract, intersect) that carry their own fill, stroke and effects and that you can still get back out of. Strokes are a pipeline, so one path can have trim, dash, wave, taper and markers stacked on it. Masks, track mattes and feathering. Auto layout that reads the row, column or grid you already arranged and makes it the rule (⇧A).

Shape morphing is keyframed path geometry: set the points at one time, set them differently at another, and the app interpolates point by point. Draw on a raster layer with 43 pressure-sensitive brushes, including a simulated watercolour with wet bleed, granulation and drying, then split the drawing on its ink into separate layers.

What it does not do: it is not Illustrator. No mesh gradients, no CMYK, no print workflow.

337,000 icons that animate themselves

Every open-source icon set (208 sets: Lucide, Tabler, Phosphor, Material Symbols, Simple Icons, the emoji and flag sets) is searchable inside the editor, licence-gated so nothing non-commercial or share-alike can end up in your export. An icon is not a special object; it goes in through the SVG importer and lands as path layers in a group, so it morphs, takes effects, keyframes and exports like anything you drew.

Draw On is the part people stop on. It is a layer animation that inks the outline instead of moving the layer: together, one by one along the length, or staggered; from either end or the middle; fills kept, faded along or faded late. Drop a Lucide rocket, and it draws itself on over 900 ms, in the order it was drawn. Change the icon, the timing stays. Change the timing, the icon stays.

Frame 12 of a 900 ms Draw On. It is one tile in the same Animate tab every layer has.

What it does not do: search matches icon names, not synonyms. "home" misses the sets that call it "house". I wrote up how the icon panel is built if you want the engineering.

Text animation is the big one

Text was the first thing AtomCut did and it is still the deepest. Per-character styling. 103 text looks in the library (Karaoke, Neon, Synthwave, VHS, Typed, Terminal, Hologram, Lower Third, Title Card, Credits, Ticker, Datamosh…), each previewed as the real animation, each recoloured by one colour dial. 43 layer animations for entrances and exits. Per-glyph shadow, glow, extrude and echo as effect cards you can stack, sort and keyframe. Text converts to editable vector outlines. Right-to-left and bidirectional text with Arabic shaping, because I type Persian.

Text on a path: the text tool grows a wave cursor over any shape's edge; click, and the text binds to that outline. It never snapshots, so a morph or a keyframed corner radius re-lays the words on the live curve. Slide it along in laps, flip it, detach it.

Captions: a caption is a text layer with timed words. Type the words, press Tap sync and tap along as the clip plays, and the spoken word lights up at the playhead, styled however you like (Karaoke lights it as a white segment of the band; Punch switches it to the look's second colour; Whisper weights it). Retyping a word never shifts the others' timing.

Sound per letter: a typing sound lands on each glyph as it appears, with its hit point on the transient, so kinetic type clicks in time rather than roughly near it.

The Focus scope: what the spoken word looks like, separate from the rest of the caption.

What it does not do: it does not transcribe. You type the words and tap the timing. If you need a first pass from speech, get it elsewhere and bring the words.

4,555 sound effects, and a sound stack

An archive of public-domain sounds (Kenney, OpenGameArt's CC0 subset, a synthesized set of ours; 37 publishers, 91 packs), searchable from inside the editor. Every row draws its real waveform before you download a byte. ↓ walks the shelf and plays as it goes; ↵ drops the sound at the playhead with its transient on the playhead, not its first sample. An ear guard measures each sound's perceived loudness, not its peak, and holds anything above a ceiling down to it, so a brickwalled impact cannot ambush you between two soft ticks.

Audio clips carry an effect stack of their own: parametric EQ, reverb, echo, compressor and drive, plus keyframed gain, fades, pitch and keep-pitch. Cut transitions crossfade audio. A Waveform Visualizer plugin draws a procedural waveform or spectrum that reacts to any clip's sound, live; a LipSync Studio plugin maps mouth shapes to a voice clip and generates the switches as an ordinary nested clip.

Three sounds placed with Enter. Ordinary audio clips, tagged SFX, each with fades, an effect stack and keyframable gain.

What it does not do: dragging a sound onto a lane places the file as it is and ignores the landing settings; use ↵ or Add for those. The loudness story is its own post.

36 effects, 23 transitions, and everything keyframes

The effect stack is one list, on any layer, and every field on every card keyframes. Shadow, glow, blur, motion blur, RGB split. Light rays, lens flares, a travelling shine, live lightning. Bulge, wave, twirl, lens distortion, roughen edges, glitch. Halftone, pixelate, bevel, posterize, gradient map. A liquid glass that refracts the real backdrop behind it. Film grain, damage, scanlines, vignette, sharpen. Lift/gamma/gain colour wheels. Chroma key and one-click background removal. The same stack applies to the whole frame as a final pass, or through an adjustment layer with a scoped reach.

Transitions: Cross, Soft, Additive and Blur Dissolve, Dip to Colour, Push, Slide Over, Slide Apart, Roll, Iris, Clock Wipe, Barn Door, Bloom, Flash, Glitch, Shake, Smear, Pop, Displace, and a few more, each with its own knobs.

Motion tracking follows position, scale and rotation in a video and drives any layer, effect region or matte with it.

What it does not do: there is no GPU-heavy 3D. No cameras, no lights, no extruded 3D text with materials. The extrude on text is stepped 2D copies behind each letter, and its blurb says so.

Animation: keyframe anything, including on/off

Any property keyframes, including whether an effect is enabled. Record mode keys every edit you make while it is on. A curve editor and a dope sheet, easing presets and custom cubic-béziers, motion paths with spatial tangents. Speed is a keyframed property too: ramp into slow motion, hold a frame, drift back. Node graphs and expression drivers, modulators, typed variables that layers reference across the document, so one colour variable retints a whole brand's worth of icons.

A flipbook mode does frame-by-frame with onion skinning, and each nested composition keeps its own frame rate, which nests correctly because a frame rate is a grid, not a clock.

Export: MP4, WebM, GIF, PNG, SVG, Lottie

MP4, WebM and GIF. PNG sequences. Transparent and per-layer exports. Audio-only bounce. SVG, where a text on a path carries real glyph outlines already placed on the curve. Lottie, with a fidelity report that tells you what the translator could and could not carry, because Lottie cannot read a live relation and so every derived frame is baked to ordinary keys first, Draw On included.

The export dialog on a 1080p composition, sized to 720p. Free is everything up to 720p; Lifetime is the ceiling removed.

What it does not do: there is no MOV or ProRes, and no 4K in the free tier. Free exports are capped at 720p with no watermark; AtomCut Lifetime is $29 once (the launch price; $49 later) for Full HD, 4K and beyond, transparent and per-layer export, on web and desktop, every future version included. There is no subscription and there will not be one.

Mac, Windows, Linux, iPad, offline

It is a web app first: app.atomcut.net is the whole thing, and it installs as a PWA and keeps working offline, saving projects locally. There are desktop builds for macOS, Windows and Linux for people who want a dock icon and file associations. On an iPad it is the same workspace with touch: long-press menus, two-finger gestures, pressure on the brushes with a pencil. One workspace at every screen size, not a mobile subset.

Shortcuts match the physical key, so ⌘Z works under a Persian, Arabic, Cyrillic or Greek layout, and there are keymap presets for Premiere, DaVinci Resolve and Blender if your hands already know one of those.

What it is bad at

It is two months old, and one person maintains it, so there are rough edges, and there is no community yet to have found them for you. It is for motion graphics, short video, UI animation, launch clips and captions; it is not for cutting a two-hour feature, where a native NLE will handle a 4K multicam timeline better than a browser tab will. There is no live collaboration; a document is typed and versioned (schema v72, every migration still running), which is the groundwork for it, but today it is one person per file. No speech-to-text. No 3D.

Reported bugs are usually fixed in the next release, and the changelog is public, so you can read exactly what changed and when.

Why is it free?

Because I think the studio should be the free part. Every tool, effect and panel, every icon and sound, no watermark, no account: that is what makes it possible to open a link and check this post instead of taking my word. The thing you pay for once is the resolution ceiling coming off, at the moment you have something you want in HD. That is the whole business model, and it means the free app has to be genuinely good, or nobody ever reaches that moment.

FAQ

Is AtomCut really free? Yes. The whole studio, with no watermark, exporting up to 720p. Lifetime ($29 once at launch) removes the resolution limit and adds transparent and per-layer export.

Can I use the icons and sounds commercially? Yes. Icon sets are gated to licences that permit commercial use in rendered artwork (CC BY sets show who to credit). Every sound is CC0.

Does it work on Linux and iPad? The web app runs anywhere a modern browser does, including iPad with touch. Desktop builds exist for macOS, Windows and Linux.

Can I export to After Effects or Figma? No. Export is MP4, WebM, GIF, PNG sequence, SVG and Lottie. Lottie is the interchange format for developers; SVG for designers.

Is it open source? The source is public under a Fair Source licence (FSL-1.1-MIT): you can read it, run it and modify it, and it converts to MIT after two years.

Open app.atomcut.net, press T, type something, and press Space.

330,000 free icons for video, and every one of them can draw itself on

Shayan — Fri, 18 Sep 2026 02:20:42 +0000

AtomCut now ships an Icons panel: Lucide, Tabler, Phosphor, Material Symbols, Simple Icons, the emoji sets, the flag sets, 208 open-source icon sets and 337,000 icons, searchable from inside the editor and dropped onto the canvas as ordinary vector layers. Pick an ink, a size and an entrance in the panel's footer, drag an icon onto the stage or a timeline lane, and it lands drawing itself on: the strokes ink in over 900 ms, one piece after another, in the order the icon was drawn. That is an animated icon for a video, made from a free icon, in one drag. AtomCut is a free motion design and video editor that runs in the browser, no account, no install.

I want to write down the two decisions underneath it, because both look obvious afterwards and neither was the first thing I built.

Where do 337,000 icons come from?

Not from us. Every serious open icon set is published in the Iconify data format: a JSON file per set with the set's name, author, licence, sample icons, and one entry per icon holding its SVG body and viewBox. The same format feeds the Iconify plugin for Figma and the icon pickers in half the component libraries you have used. There is a public API in front of it that lists the sets, lists a set's icons, searches names across all of them, and returns bodies in batches.

My first instinct was a pipeline: pull the JSON, index it, publish it to object storage next to the sound library, ship a search. I got as far as sketching the manifest before noticing I was re-deriving, badly, exactly the three endpoints the API already had. So the editor asks the API. It asks it through a hostname I own, a Cloudflare Worker that caches every answer at the edge and forwards nothing but the four paths the panel uses, with the public API as the fallback if that Worker is ever down. If I later want richer tags than names, that is a different origin behind the same base URL, not a rewrite.

The one thing I did build is a licence gate. The catalogue includes sets under non-commercial and share-alike terms, and a 24px glyph must never put a condition on the video you export. AtomCut offers a set only if its SPDX licence is on a short list that allows commercial use in a rendered artwork, shows the licence on every set's cover, and for CC BY sets names who to credit. That cut 238 sets to 208.

Home. One row per family, the licence on every cover, View all at the end of each row.

Why an icon is not an icon layer

It would have been quick to add an icon clip kind that stores lucide:rocket and renders the body. It would also have been wrong in the way that costs the most later: a new kind of layer is a new row in every table in the app. Selection, keyframes, effects, the SVG exporter, the Lottie translator, morphing, the pen tool, the Layers panel: each would need to learn what an icon is, and until every one had, an icon would be the layer that does less.

So an icon goes in through the SVG importer, the same door a dropped .svg file uses. The importer already splits every disjoint piece of an SVG into its own path layer and groups them. A Lucide rocket therefore arrives as four path layers in a group called Rocket, each with a stroke list, each editable with the pen, each keyframeable, each able to morph into something else. The panel's only job is to decide what the SVG says before it goes in: the ink (which can be a colour variable, so a brand palette retints every icon at once), the landing size, and the stroke width if you want thinner lines than the set drew.

One real bug fell out of doing it this way, and it was in the importer, not the panel. Lucide, Feather and Tabler put the whole look on the root <svg> element: fill="none" stroke="currentColor" stroke-width="2". The importer walked the root's children starting from an empty style, so every icon came in black and filled. Nobody had noticed because nobody had dropped a bare Lucide file before; the panel dropped a thousand of them in an afternoon. The fix made the root part of the cascade, and every SVG import in the app got a little more correct.

What lands: a group of path layers, not an icon object. Everything a path can do, the icon can do.

Draw On, and why it is not a pose

Layer animations in AtomCut are poses: a preset takes a progress from 0 to 1 and returns an opacity, an offset, a scale, a rotation, a blur. Fades, slides, bounces and spins are all that one function. It is deliberately small, because the same pose is read by the canvas, by text glyphs, by the SVG exporter and by the Lottie translator, and none of them has to know which preset produced it.

A stroke drawing itself on is not a pose. It cannot be expressed as where the layer is; it is how much of a line exists. I did not want to teach a pose about outlines, because then a text glyph and a Lottie transform would be carrying a field that means nothing to them. So Draw On is a second channel of the same preset: same id, duration, easing, in and out edges, and the same timeline handle drags it, but only the stroke pipeline reads it. The compositor sees the identity pose and takes its fast path.

The pipeline was ready for it, which is the part I was most pleased about. Every stroke in AtomCut already runs a trim stage, and trim is cut as exact Béziers along arc length. A draw-on is a trim window per strand that opens over time, applied before the stroke's own trim, so a dash of light can still chase around a half-drawn logo. The knobs are the ones After Effects' Trim Paths and every SVG draw-on library converged on:

Knob	What it does
Order	Together, One by one (along the total length, the pen never lifts), Staggered (equal shares, each a beat after the last)
Stagger	For staggered: 0% is together, 100% is back to back, more leaves a pause between pieces
Pieces	Bottom piece first, the way the icon was drawn, or top first
Start at	Where along each strand the ink begins, 0 to 100%
Direction	Forward, backward, or both ways out of the start point
Fill	Keep, fade along, or fade late (the fill lands as the last line does)
Pen	The width borrowed when a filled icon has no stroke of its own

That last row is what makes it work on Material and Font Awesome, which are silhouettes with no line to draw. Draw On inks the silhouette's edge in the fill colour and then brings the fill in behind it.

A group read-through does the rest. Put Draw On on the Rocket group and its four paths draw as one drawing, bottom piece first, because that is document order in the SVG and the order a person drew it in. A child with its own Draw On keeps it; clear the group's and every child is untouched. It is the same rule a group's fill already followed, and it is the whole deep-customisation story: one setting for the icon, and any piece that deserves its own timing gets its own.

Frame 12 of a 900 ms entrance. The Animate tab is the same one every layer has; Draw On is one more tile in it.

Animated icons for video, without the marketplace

The reason this matters more than a picker: an animated icon pack is a product category. Sites sell them by the thousand, as Lottie files or MP4 loops, one motion baked per icon. Here the motion is a setting and the icon is a layer, so the pairing is yours. Any of 337,000 icons, any entrance in the gallery, any easing, any duration, in the brand colour from your variables, exported as MP4, WebM, GIF, PNG sequence, SVG or Lottie from the same render. Change your mind about the timing after the fact and it is a slider, not a re-download.

Lottie was the export I expected to lose, and did not. A Lottie trim is one window per shape group, keyed over time; a draw-on is exactly that, one per strand, so the exporter bakes the windows it would have drawn, one key per frame, and a filled icon gets the same borrowed outline the canvas gives it. The file is bigger than a hand-authored one would be. It plays the same.

The panel is in the Plugins rail of the editor now. The documentation, with every knob and every family, is at /docs/icons.

Add animated captions to a video in the browser, free

Shayan — Wed, 16 Sep 2026 16:46:46 +0000

AtomCut adds word-by-word, karaoke-style captions to a video in your browser: you type the words, cut them into cues, sync the timing, style the active word, and export an MP4. AtomCut is a free motion design and video editor that runs in the browser, no account, no install.

There's one thing it doesn't do yet: it doesn't listen to your audio and write the words for you. You type the script, and you time it. That's slower than a one-click auto-transcribe, and it's also why the timing is exactly what you want and not what a speech model guessed.

1. Import your clip

Drag your video onto the canvas, or use Import media in the Media panel and then Place on frame. It lands on its own track with its sound attached; the composition below is a 1920×1080 frame, but a vertical 1080×1920 reel is one click away in the new-project dialog.

The whole studio. The caption sits on the track above the video, so it draws on top.

2. Type the words as a text layer

+ Clip → Text in the timeline header adds a text layer at the playhead. Open Content in the inspector and type what's said, exactly as it's said. This is the one string every caption cue will be a span of, so get the words right here.

3. Turn it into a caption and cut it into cues

In the same Content section, switch on Captions. That seeds one cue per word across the clip and gives the spoken word a highlight you can see immediately. (There's also + Clip → Caption if you'd rather start with a caption and type into it.)

A Cues tab appears on the right rail. Its re-cut menu recuts the same text one word per cue, one line per cue, or one letter per cue; word-level is the karaoke look most people want. Each cue is a span of your original string, so retyping a word in the cue list later doesn't touch any other cue's timing.

A caption is a text layer, so it takes any text animation: here Scale In, per word.

4. Time the cues

Two ways to do it. Tap sync plays the clip and lets you tap a button in time with each word, which stamps that cue's start where you tapped. Or spread every cue evenly across the clip's duration with one click, then drag individual cue boundaries by hand where the even spacing is off. You can also give a cue a word from its neighbour, split one cue in two, or merge two into one, all from the same cue list.

The Cues panel. The lit row is the word under the playhead.

5. Style the word being spoken

The inspector for a caption has two scopes at the top: Text (the whole layer) and Focus (the word being spoken). Pick Focus and every field you touch overrides only that word: its colour, a highlight colour with its own radius and padding, and a Focus pop scale. The focus is a style range on the same text layer, not a separate object, so it stays attached to its word as you keep editing cues around it.

For the look in these screenshots we didn't style anything by hand: the Library's Text looks has a Captions group (Subtitle, Punch, Karaoke, Clean Sub, Boxed, Shout, Ticker, Whisper), and Karaoke applied to the selected layer gives the green band with the spoken word switching to white. A caption look carries its own idea of the spoken word, so applying one restyles the lit word too. Everything else in the caption can carry its own reveal preset and stagger, the same system that drives any AtomCut text animation.

Focus scope: the overrides that apply only to the word being spoken.

6. Export

Export as MP4, WebM or GIF. Every export is free with no watermark, capped at 720p; the one-time $29 adds HD, 4K and transparent export if you need more than social-post resolution.

Export, Video tab. 720p is the free ceiling; the one-time licence unlocks the sizes above it.

AtomCut does not transcribe your audio. There's no speech-to-text step: you type the caption's text yourself and time the cues by tapping along or dragging, rather than getting a rough auto-transcript to clean up.

Questions people ask

Does AtomCut transcribe my audio automatically?
No. You type the words as a text layer, then convert them to a caption and cut them into cues. If you already have an SRT or a transcript, you'd paste the text in and time the cues from there rather than importing timed subtitles directly.

Can I give one word a different look from the rest?
Yes. Select a run of letters or words in the caption and give that span its own animation or style, independent of the rest of the layer, without splitting it into a separate text layer.

Does this work on a tablet?
The drawing and timeline tools share one workspace at every size, so tap-syncing cues works the same on a tablet as it does with a mouse.

Once your cues are timed, the next thing worth trying is a sound on every word instead of just a style change — see kinetic typography with a sound per letter or the full reference at /docs/text-animation.

Try it: app.atomcut.net — free, no account, works offline.

I built a motion design studio in the browser. Here's what it took.

Shayan — Wed, 16 Sep 2026 15:46:53 +0000

AtomCut started as a tool that was supposed to animate text. Today it's an infinite canvas above a multi-track timeline, in the browser, where you can keyframe anything, paint with a wet watercolour brush, track motion, add captions that follow a voice, and export to MP4, GIF, SVG or Lottie. It's free, there's no account, and it works offline.

This is the honest version of how it got there, because the tidy version ("I had a vision and executed") isn't useful to anyone building something ambitious on their own time.

It started as a typing animation

The folder is still called typomation. The first thing it did was type words onto a frame, one letter at a time, with a sound on each keystroke, so a short clip could have a title that arrived the way a typewriter would put it there.

The problem with a tool that only does one thing well is that the second thing you need is always outside it. I needed a background clip under the text. Then a sound on each letter. Then the text had to move along a path. By the time I had those, I had a timeline that didn't care what kind of clip sat on it, and the question stopped being "what should a text tool do" and became "what is the smallest set of ideas that makes everything else a special case".

The one rule everything else hangs on

Anything that describes what an animation is lives in a pure package with no DOM and no React. Anything that describes how it's shown or edited lives in the app. That's the whole architecture, and every good week I had came from it.

Concretely: a project is one JSON document, validated with zod, versioned. The document is at schema version 71 today, and every one of those migrations still runs, so a project from the first month opens. Rendering a frame is a pure function: (document, time) → what you see. Playback, scrubbing, the MP4 exporter, the PNG sequence exporter and the Lottie exporter all call the same function. There is no "export renderer" that drifts from the "preview renderer", because there's only one.

Undo is patches, not snapshots. Every mutation runs through one store that records a forward patch and an inverse patch. Undo cost is proportional to the size of the change, not the size of the project, and a continuous gesture (dragging a keyframe for two seconds) coalesces into one history entry.

None of this is novel. It's the same shape Figma and Photoshop ended up at. What I'm saying is that if you start there, a lot of features become a union variant and a registry row instead of a rewrite. A group on the timeline is a clip that happens to contain rows. A caption is a text clip with a cue map. A flipbook is a nested composition whose cells are drawings. When the primitives are right, the feature list grows without the codebase growing the same way.

The studio: canvas above, timeline below. Two layers selected, the caption

What was actually hard

Not the effects. Thirty-six layer effects sounds like the hard part; it's the easy part, because an effect is a shader and a settings card, and the keyframe engine already animates any number.

The hard parts were the ones where two true things fight:

A cropped video has two things you can move. The window and the picture inside it. If you store that as one transform plus four insets, every keyframed reframe visibly swims between keys, because three animated quantities cancel to a constant that the interpolation doesn't know about. The fix was two transforms, one for the window and one for the content, and a rule that the content transform never reads the crop. It took a week to see that the bug was in the data model and not in the interpolation.

A mirrored layer is a negative scale, and nothing else. I had a flipX flag for a while. A flag plus a sign is two fields for one fact, and they disagreed the moment a keyframe interpolated across a flip. Deleting the flag deleted a family of bugs.

A frame rate is a grid, never a time. There is no project-wide fps. Each composition carries its own, and a rate only ever quantises: it's what the ruler ticks on, what the arrow keys step by, what export iterates on. A 12 fps flipbook inside a 60 fps comp holds each cell for 83.33 ms and nothing resamples anything, so nothing can drift. The earlier version had a global rate plus overrides, and half the app read one while half read the other.

The crop one cost the most. I fixed the interpolation three times before I admitted the data was wrong.

The changelog is the spec

Every change has to earn one line in a public changelog, written before the code: what can a user do now that they couldn't before. If I can't write that line, the change doesn't ship. It sounds like process; it's actually the fastest way I've found to kill work that only feels productive. Half of what I started never got its line.

What it's bad at

Cutting a two-hour 4K timeline. It renders in the browser; a native NLE will beat it on heavy footage. It's young, so you will find rough edges; when someone reports one, it's usually fixed in the next release, and you can watch that happen in the changelog.

What's next

It's free and it stays free. Exports are capped at 720p; $29 once, not a subscription, removes the cap. After that, the plan is live collaboration, an assistant inside the editor that can operate the timeline, and the plugin SDK opening up.

If you make anything with it, I'd like to see it. It opens at app.atomcut.net with no signup.

MotionKit Figma Motion: import, sync, and push native animation (yes, even baked physics)

Shayan — Sun, 28 Jun 2026 00:19:07 +0000

Figma shipped native Motion. A real animation timeline, right inside the file.

When that landed, a lot of people emailed me some version of the same question: "is MotionKit dead now?"

Fair question. My honest first reaction was a quiet "...maybe." But the more I used native Motion, the clearer it got — it's genuinely good, and it's not trying to be everything. No physics. No frame-by-frame. No Lottie export. No morphing. So the move was never to compete with it. The move was to bridge to it — let the two tools hand work back and forth, and let MotionKit be the power layer that does the stuff native Motion can't.

So that's what this update is. A two-way bridge between MotionKit and Figma's native Motion.

Here's everything it does, and exactly how to use it.

The short version

Four moves, one little control in the header:

Import native Motion into MotionKit as real, editable keyframes
Live sync (read-only by default) so changes in Figma Motion flow into MotionKit as you work
Link for export so your native Motion renders inside a Lottie without duplicating anything
Push MotionKit keyframes back into native Motion — including motion you baked from the physics engine

And the headline trick: bake a real physics drop in MotionKit, then push it into Figma Motion as native keyframes. Native Motion has no physics engine. Now it kind of does.

First, find the bridge

Look at the top-right of the toolbar, next to the Pro star. There's a small badge: the MotionKit diamond, an arrow, and the Figma logo.

That little arrow is the status. You don't have to open anything to read it:

faint dotted line → not connected
arrow pointing into MotionKit → reading from Figma, live, read-only
arrows on both ends → two-way, MotionKit also writes back

If there's native Motion sitting on the current frame but you haven't connected, you'll see a small purple dot on the Figma side — that's "hey, there's something here to import." Click the badge to open the bridge.

That's the whole mental model. Direction of the arrow = direction of the data. I rebuilt this specifically so you never have to remember what some toggle does.

Import: pull native Motion in as editable keyframes

This is the one most people want first. You (or a teammate) animated something in Figma Motion, and you want it as proper MotionKit keyframes — to refine the curves, add morphs, export to Lottie, whatever.

select the animated frame
open the bridge and hit Import from Figma Motion
pick how conflicts resolve — Figma wins (native overwrites) or Keep mine (native only fills gaps)
done. you get a little report of what came across, what got an approximated easing, and what was skipped

It pulls transforms, opacity, size, corner radius, stroke weight, auto-layout spacing, solid fills and strokes, drop and inner shadows, and blur — as real keyframes you can grab and move. Position and scale come in as proper X/Y so you can edit each axis on its own.

One honest note: once MotionKit owns a transform, MotionKit drives it during preview. That's the trade for editability. If you'd rather native Motion stay in charge of movement, keep reading — Link is for exactly that.

Live sync: read-only by default, on purpose

Turn the direction control to Read and MotionKit keeps pulling changes from Figma Motion as you work. Tweak a curve natively, it shows up here.

The important part: read-only is the default, and it will never touch your Figma file unless you explicitly switch to Two-way. Sync turning on used to scare people because an early version could write back when you didn't expect it. Not anymore — Off, Read, and Two-way are one clear three-way switch, and Read is a one-way street into MotionKit.

Link for export: native Motion in your Lottie, zero duplication

This is the cleanest option and honestly the one I'd reach for most.

When you Link Figma Motion for export, MotionKit references the native animation instead of copying it. Nothing gets added to your timeline. Nothing moves on the canvas. No duplicate rows, no two engines fighting over the same layer and sending it twice as far as it should go.

Then when you export to Lottie, MotionKit folds the native Motion in at render time and ships one animation — your MotionKit layers and the native Motion together. Your MotionKit keyframes always win on any property you actually animated; native just fills the rest.

open the bridge
hit Link Figma Motion for export
animate the rest in MotionKit like normal
export to Lottie — the native motion is baked into the file

If you go back and edit the Figma path afterward, just hit Link again to refresh the snapshot.

The fun one: bake physics in MotionKit, push it into Figma Motion

Native Motion can't simulate physics. MotionKit can — and it bakes the result into normal keyframes. So you can author a real physical bounce in MotionKit and then hand those keyframes to native Motion.

Here's the full loop:

drop in the layer you want to throw or bounce
add a Physics modifier — set gravity, bounce, mass, and mark whatever's the floor or a wall as a collider
hit Bake. MotionKit runs an actual rigid-body simulation and writes it back as real position/rotation keyframes (re-bake as much as you want — it always replays from the top)
happy with the drop? open the Figma Motion bridge
expand Advanced → Push to Figma Motion
confirm (back up your file first — every push is backed up and revertable, but still), and the baked bounce now lives as native Figma Motion keyframes

Now the motion is native. It plays with Figma's own Motion engine, lives in the file, and anyone can open it without the plugin. You used MotionKit purely as the physics authoring tool. That's the whole idea of the bridge — each tool doing the part it's best at.

Push writes the round-trip-safe subset (transforms, opacity, size, color, shadows, blur, and friends), so a tumbling, bouncing object's position and rotation transfer cleanly. Easings without an exact native match get approximated, and the report tells you which.

Bonus: nested frames animated in Figma Motion

If a child frame inside your frame is animated natively, MotionKit can pull it in as a previewable clip — so it actually plays inside your timeline, with its own loop mode you control per clip. When MotionKit spots one, you'll get a one-click "import as clips" prompt. Handy for building a scene out of pieces other people animated natively.

What survives the trip (the honest table)

Trust matters more than hype, so here's the real list.

Round-trips both ways: position, scale, rotation, opacity, size, corner radius, stroke weight, auto-layout spacing, solid fill & stroke color, drop & inner shadow, layer & background blur.

MotionKit-only (stays here, reported as skipped on push): text animation, shape morphing, frame-by-frame, gradient-stop animation, the beta noise/texture/glass effects, and expression-driven properties. These are the things native Motion has no slot for — so MotionKit keeps them, and uses Link-for-export when you need them in a final render.

No silent data loss. The bridge always hands you a report of what mapped, what got an approximated easing, and what it couldn't translate.

The one real limitation

Figma's plugin API lets me read and write Motion keyframes, but it can't move native Motion's playhead or evaluate it at an arbitrary time. So I can't show you Figma's native render and MotionKit's preview playing in perfect lockstep on the same canvas — that part isn't possible yet.

That's why Link-for-export is a snapshot you re-link after edits, instead of a live mirror. The day Figma adds a "give me the value at time t" call, that seam flips to live and most of this gets even better. I've already filed it as the number one thing I want from the Motion API.

Where this is going

The direction is simple: MotionKit as the Pro power layer that sits on top of native Motion. Native Motion handles the clean, file-native basics. MotionKit handles physics, frame-by-frame, morphing, expressions, and Lottie — and the bridge moves work between them without you redoing anything.

And as always — if something feels off or breaks, tell me. Half of every release is just people telling me what annoyed them.

happy animating.

Figma's New Motion vs MotionKit — timeline is here, but is it enough?

Shayan — Fri, 26 Jun 2026 20:52:11 +0000

Figma finally added a real timeline-based motion system.

That changed the game a bit.

But once you actually use it in real animation workflows… you notice something quickly:

It’s powerful — but still incomplete.

That’s where MotionKit still sits in a very different category.

This isn’t “which is better”.

It’s more like:

what Figma gives you vs what you actually need once animation gets serious.

What Figma Native Motion actually does now

Figma’s motion system now includes:

real timeline editing
keyframe-based animation
basic easing control
physics-like behavior (limited / experimental level depending on setup)
improved Smart Animate pipeline

So yes — it’s no longer just prototype transitions.

You can now:

animate objects across time
scrub animations
control timing visually

That alone is a big shift.

But here’s the catch:

It still focuses on flat motion inside a single layer context, not structured animation systems.

Where Figma Motion still falls short

Even with the timeline, a few big gaps remain:

1. No real text content animation system

You can animate text transforms, but not true content-level animation logic (like structured text transitions, sequencing, or per-character systems).

2. Frame-by-frame (FBF) is still not a real mode

You can fake it with frames, but:

no true FBF workflow
no synced editing across frames
no onion-skin style consistency system

You still end up manually managing duplication.

3. Nested animations are not first-class

Figma doesn’t properly support:

nested frame animation trees
reusable animation blocks inside components
hierarchical animation timelines

Everything still lives mostly at a flat level.

4. Physics is not truly baked

Even when physics-like behavior exists:

it’s not fully controllable
it’s not always exportable as keyframes
it doesn’t behave like a reusable system

So it’s more “effect” than “simulation pipeline”.

What MotionKit actually brings to the table

This is where the gap becomes obvious.

MotionKit is not trying to compete with Figma’s timeline.

It’s extending it in the directions where real motion work breaks down.

1. True Frame-by-Frame (FBF) system

MotionKit supports proper FBF workflows:

synced frame structure
mirror selection across frames
layer consistency enforcement
editing one layer across all frames at once

This turns FBF from “manual duplication” into an actual workflow.

2. Nested animation support

MotionKit introduces structured animation layers:

animations inside frames
reusable nested motion blocks
hierarchy-aware timelines

So instead of flat motion, you get:

animation systems inside animation systems

3. Physics baked into keyframes

This is a big one.

Instead of just simulating motion visually:

you define physics (gravity, bounce, mass)
MotionKit simulates it
then bakes it into real keyframes

So everything becomes editable afterward.

No black box.

4. Full timeline control + modifiers

Beyond keyframes, MotionKit adds:

Offset modifiers
Wiggle procedural motion
curve-level editing
editable baked simulations

So motion becomes programmable, not just draggable.

5. Two-way sync with Figma Motion

This is probably the most important difference.

MotionKit doesn’t replace Figma Motion — it connects to it.

You get bidirectional sync:

Figma Motion → MotionKit import
MotionKit edits → back into Figma system

So you can:

prototype quickly in Figma Motion
refine deeply in MotionKit
move back and forth without losing structure

That’s the real workflow upgrade.

Simple comparison

Feature	Figma Native Motion	MotionKit
Timeline	Yes	Yes (advanced)
Frame-by-frame	Limited / manual	Native system
Nested animations	No	Yes
Physics	Basic / experimental	Fully baked keyframes
Text content animation	Limited	Structured support
Sync with Figma	Native only	Two-way sync
Workflow depth	Prototype level	Production level

When Figma Motion is enough

Use Figma Motion if:

you’re building UI prototypes
you just need simple transitions
you don’t care about animation systems
speed matters more than control

When MotionKit becomes necessary

Use MotionKit if:

you’re doing real motion design work in Figma
you need frame-by-frame animation control
you care about reusable animation systems
you want physics + keyframes together
you need structured workflows, not hacks

The real takeaway

Figma Motion is finally becoming a real animation layer inside design tools.

But MotionKit exists in a different layer entirely:

turning Figma into a motion design system, not just a prototyping tool.

That gap is still very real.

And for anyone doing serious animation work inside Figma — it shows up immediately.

Figma Motion Feels Like It Was Vibe-Coded

Shayan — Thu, 25 Jun 2026 03:11:03 +0000

When Figma announced Motion at Config, I got excited.

Finally.

A native animation tool inside Figma.

No plugins. No weird workflows. No jumping between tools.

Then I actually used it.

And honestly... what happened here?

It Feels Weirdly Unfinished

This isn't a "beta has bugs" complaint.

I expect bugs.

What surprised me was how many basic UX decisions felt wrong.

The timeline feels awkward.

Interactions feel inconsistent.

Simple actions somehow take more clicks than they should.

Why Is It So Slow?

The biggest problem isn't missing features.

It's the feeling.

Everything feels heavy.

Dragging through the timeline feels heavy.

Selecting things feels heavy.

Working on larger files feels heavy.

It's hard to explain, but the whole experience lacks that polished "Figma feeling" we're used to.

The best Figma products usually disappear and let you focus on your work.

Motion constantly reminds you that you're using Motion.

Missing Things You'd Expect To Exist

After a few hours I kept running into walls.

Want to do advanced text animation?

Good luck.

Want to animate gradients?

Limited.

Want more sophisticated motion workflows?

You'll hit restrictions quickly.

Want nested animation systems?

Not really.

For a company with Figma's resources, I expected much more from version one.

The Strange Part

There are already plugins solving many of these problems.

Whether it's MotionKit, Figmotion, or other animation tools in the ecosystem, users have been doing advanced motion work inside Figma for years.

So naturally I expected Figma to study what works and build something better.

Instead it feels like they reinvented the wheel and somehow made it square.

It Doesn't Feel Like Figma

This is probably my biggest criticism.

The best Figma features feel obvious.

You open them and immediately understand the workflow.

Motion feels like the opposite.

It feels like a separate product that got dropped into Figma.

The UX feels disconnected from the rest of the platform.

The performance feels off.

The workflow feels overcomplicated.

At times it genuinely felt like somebody shipped the first prototype and called it a beta.

Final Thoughts

I really want Motion to succeed.

A first-party animation tool inside Figma would be amazing for designers.

But right now?

I'm not frustrated because it's missing features.

I'm frustrated because it doesn't feel finished.

The whole thing feels surprisingly rough, surprisingly slow, and surprisingly difficult to enjoy.

Maybe it'll become great in a year.

Today, it feels less like a polished Figma product and more like a proof of concept that escaped into production.

MotionKit Review: The Most Powerful Animation Plugin for Figma?

Shayan — Tue, 16 Jun 2026 11:55:24 +0000

Figma has become the default design tool for millions of designers, product teams, and developers.

But when it comes to animation, many designers still leave Figma and jump to tools like After Effects, Jitter, or Rive.

For years, that workflow felt normal.

Design in Figma.

Export assets.

Import them somewhere else.

Animate.

Export again.

Repeat.

Recently, I tried MotionKit, and it made me question whether leaving Figma is still necessary for many animation workflows.

Why Animation in Figma Still Feels Limited

Figma's built-in prototyping tools are great for showing interactions and user flows.

But the moment you want more advanced motion design, you quickly hit limitations.

Common challenges include:

No professional animation timeline
Limited control over keyframes
No frame-by-frame animation workflow
Limited export options
Difficult vector morphing workflows
No dedicated motion design environment

As a result, many designers end up maintaining multiple tools just to create animations.

That adds complexity, cost, and context switching.

What Is MotionKit?

MotionKit is an animation plugin built specifically for Figma.

Instead of focusing on a single animation technique, it combines several animation workflows inside one environment.

The goal is simple:

Allow designers to create professional animations without leaving Figma.

At first glance, that sounds ambitious.

After spending time with it, I realized that's exactly what makes MotionKit interesting.

What Makes MotionKit Different?

Most Figma animation plugins solve one problem.

MotionKit solves several.

1. Timeline Animation

For UI animations, onboarding flows, product showcases, and marketing videos, timeline-based animation is often the fastest approach.

MotionKit includes a dedicated timeline system that feels familiar to anyone who has used professional animation software.

You can:

Create keyframes
Control timing
Adjust easing
Sequence animations visually

This alone covers a huge percentage of common design animations.

2. Frame-by-Frame Animation

This is where things get interesting.

Most Figma animation tools focus exclusively on keyframes.

MotionKit also supports frame-by-frame animation.

That means designers can create:

Character animations
Hand-drawn effects
Custom illustration motion
Traditional animation sequences

without switching to another application.

Very few Figma animation tools support both approaches.

3. SVG Morphing

Morphing is one of those features that instantly makes animations feel more professional.

Instead of abruptly changing one shape into another, MotionKit can smoothly transition between vector paths.

This is particularly useful for:

Logo animations
Icon transitions
Loading states
Interactive UI effects
Brand motion systems

Good morphing can dramatically improve the perceived quality of an animation.

4. Advanced Text Animation

Text animation is often overlooked.

Yet it appears everywhere:

Landing pages
Product videos
Social media content
SaaS marketing sites
App onboarding screens

MotionKit provides animation controls specifically designed for text, making it easier to create engaging typography effects directly inside Figma.

5. Export Options That Matter

Creating animations is only half the workflow.

Exporting them is equally important.

MotionKit supports exporting animations into formats commonly used by modern teams, making it practical for real-world projects instead of just prototypes.

Why This Matters for Product Designers

Most designers are not trying to become motion graphics artists.

They simply want a fast way to create:

Product demos
Feature showcases
Landing page animations
Marketing content
Interactive prototypes

without constantly switching tools.

The fewer tools involved, the faster the workflow becomes.

That is where MotionKit provides the most value.

MotionKit vs Other Figma Animation Tools

Many animation plugins do a great job solving specific problems.

However, MotionKit stands out because of its breadth.

Instead of specializing in only timeline animation or only prototyping, it combines multiple animation systems into a single workflow.

The result feels less like a simple plugin and more like a dedicated animation studio built inside Figma.

Who Should Use MotionKit?

MotionKit is especially useful for:

Product Designers

Create polished onboarding experiences, micro-interactions, and feature walkthroughs.

Marketing Teams

Build promotional animations and product videos directly from existing Figma designs.

Startups

Reduce the need for multiple animation tools and simplify workflows.

Design Systems Teams

Create reusable motion patterns and animated components.

Content Creators

Produce engaging visual content without leaving the design environment.

Final Thoughts

Most animation plugins help Figma do one extra thing.

MotionKit feels different.

It expands what Figma is capable of.

The combination of timeline animation, frame-by-frame animation, SVG morphing, text animation, and export capabilities creates a workflow that simply doesn't exist in most Figma plugins.

If you've ever searched for:

Best Figma animation plugin
How to animate in Figma
Figma alternative to After Effects
Motion design in Figma

MotionKit is worth exploring.

The future of animation inside Figma may not be about adding one more feature.

It may be about bringing an entire motion design workflow into the tool designers already use every day.

Best Figma Motion Design Tools in 2026, [Compared]

Shayan — Sun, 07 Jun 2026 02:45:01 +0000

Figma has quietly become a much more serious place for motion work. For a long time, Smart Animate was the main answer. Now, there is a real mix of plugins and workflows that cover everything from quick prototype transitions to proper animation timelines, exports, and banner builds. This article compares the main options without the hype, so you can pick the one that actually fits the job.

The short version

If you only need simple screen-to-screen transitions, Figma’s native Smart Animate is enough. If you want a real motion workflow inside Figma, MotionKit and Figmotion are the strongest “stay inside the canvas” options. If you want fast polished motion with templates and collaboration, Jitter is very hard to ignore. If your output is banners, HTML, GIF, or video, Bannerify is the most purpose-built. If your goal is Lottie export and Lottie-based delivery, LottieFiles is the obvious pick.

1. Figma Smart Animate

This is the native baseline. Smart Animate looks for matching layers across frames and animates the differences between them. It is built into Figma, available on any plan, and it is still the fastest way to make simple motion without installing anything. The catch is obvious. It is great for prototypes, but it is not a full motion design tool.

Use it for loading states, simple transitions, toggles, expands, and quick product demos. Skip it when you need timeline control, frame-by-frame work, morphing, or export-focused motion.

2. MotionKit

MotionKit is the most complete “motion design inside Figma” tool in this group. Its official docs and site describe a full timeline, keyframes, frame-by-frame animation, vector morphing, text animation, easing presets, recording mode, nested compositing, and direct export to MP4, GIF, PNG sequence, and Lottie JSON. That makes it much closer to a real motion studio than a prototype helper.

The big reason it stands out is depth. It is not just a neat plugin. It is trying to replace the “design in Figma, then rebuild the motion elsewhere” loop. That matters a lot if your motion work lives inside product design, social clips, explainers, or UI demo assets.

3. Figmotion

Figmotion is another serious Figma animation plugin. Its site says the free tier includes animation features and export options, including code export and render output such as WEBM, MP4, GIF, and WEBP, with paid tiers adding things like versioning, support, and more advanced properties.

Figmotion feels strong when you want classic motion control without leaving Figma, and it has been around long enough that a lot of designers already know the workflow. It is not the flashiest option, but it is one of the more established ones.

4. Jitter

Jitter is not just a plugin, it is also a collaborative motion design tool with a Figma workflow. Its site positions it as a way to animate Figma designs with an intuitive timeline, presets, text animation, reusable animations, templates, and export to formats like video, GIF, and Lottie. It also leans hard into collaboration and speed.

This is probably the best option if your top priority is making polished motion quickly, especially when templates and teamwork matter more than staying purely inside Figma.

5. Bannerify

Bannerify is the banner export specialist. Its docs and product pages describe it as a Figma plugin for animated HTML banners, GIFs, and videos. It is aimed at production-ready ad work and banner workflows, not general motion design.

That makes it very useful, but also very specific. If you need marketing banners, ad creatives, or HTML-based outputs, it is one of the best tools in the list. If you want general motion design, it is probably too narrow.

6. LottieFiles for Figma

LottieFiles for Figma is built around Lottie export and lightweight motion delivery. The official pages describe creating, animating, and exporting Lottie animations from Figma without leaving the app. That makes it strong when your end goal is web or app implementation, not just a pretty preview.

It is less about being a full motion studio and more about connecting design to a runtime-friendly animation format. If your team already uses Lottie, this one belongs on the shortlist.

So, which one is best?

For pure motion design inside Figma, MotionKit is the strongest overall choice in this list because it goes furthest toward a real animation workflow, not just prototyping. For speed and collaboration, Jitter is the easiest recommendation. For simple product motion, Smart Animate still wins on convenience. For banner ads, Bannerify. For Lottie delivery, LottieFiles. That is the honest answer.

Comparison table

Tool	Best for	What it does best
Smart Animate	Quick prototypes	Native, fast, built in, good for simple transitions.
MotionKit	Full motion inside Figma	Timeline, frame-by-frame, morphing, text animation, exports.
Figmotion	Classic Figma animation	Keyframe-style motion and export-focused workflow.
Jitter	Fast polished motion	Templates, collaboration, easy animation, multiple exports.
Bannerify	Banner and ad exports	Animated HTML banners, GIFs, and video.
LottieFiles	Lottie workflow	Create and export Lottie animations from Figma.

Link to each one in Figma

Smart Animate: built into Figma prototypes
MotionKit: https://www.figma.com/community/plugin/1602896408819057835/motionkit
Figmotion: https://www.figma.com/community/plugin/733025261168520714/figmotion
Jitter: https://www.figma.com/community/plugin/961270034818256057/jitter-animation-for-figma
Bannerify: https://www.figma.com/community/plugin/796124491692147799/bannerify-banner-studio
LottieFiles: https://www.figma.com/community/plugin/809860933081065308/lottiefiles

What do you think?

I can't select the winner here, you should ( Write inside comments )
But I definitely suggest you try MotionKit ( because it's newer and you don't usually hear about it ).