Figma shipped the feature I’d been building

A timeline is the easy part. A generated picture needs two hours of cleanup before there is anything to animate.

On June 24th, Figma shipped Motion.

If you don’t use Figma, here’s what that means: it now has a proper animation timeline built in. You can move things around over time, set how fast, make it bounce a little at the end. You can type a sentence describing what you want and it’ll build the animation for you. Then export it as a video.

It’s free. On every plan.

I had been building an animation tool.

I found out from someone else’s post, a few hours late, on my phone.

I’m not going to pretend I took it well.

For about a week I did the thing you do. Opened it, tried to find something wrong with it, couldn’t. It’s good. The easing feels right. The agent that writes keyframes from a sentence actually works, which annoyed me more than anything else.

I told a few people I might stop.

Then I sat down and actually used it on the files I work with every day, and something didn’t fit.

Here’s the part that took me a week to see.

Figma Motion animates the layers you already have. That’s it. That’s the whole scope, and it’s the right scope — Figma is where designers keep the things they’ve drawn. Giving those things a timeline is obviously correct.

But I don’t start with things a designer drew.

I start with pictures that came out of an AI.

And those are different in a way that’s hard to explain until you’ve opened one.

Try this, it takes a minute.

Go to any AI tool that makes vector art. Ask it for something simple — a coffee cup, a folder icon, whatever. You’ll get something genuinely nice back. Composition’s right, colours work. It looks like a designer made it, and in a roundabout way one did.

Now download it and open the file.

I have one open as I write this. It’s an illustration for International Women’s Day, 1024 by 1024, and it is 144 kilobytes of text sitting on a single line.

Inside it: 198 separate shapes. No groups at all — nothing is attached to anything else. And not one of those 198 shapes has a name.

The corners don’t land on round numbers either. 56.2394. 50.0484. 48.2452.

Then the colours. Four near-blacks — 200200, 410301, 160301, 020000 — in a drawing that wants one. Two reds, F53F2C and ED4433, that you can’t tell apart by eye and that a design system will carry as two separate tokens forever.

The file does carry one piece of metadata: a signed manifest declaring it was made by AI. It says nothing at all about what is inside it.

The picture is fine. Often it’s better than fine.

The file is a mess.

So when someone says just put it on a timeline — okay, but animate what?

To animate something you have to select it. To select it you have to be able to find it. And there’s nothing to find — 198 shapes with no names, and the thing you actually want to move is somewhere in there, in pieces.

This is the bit I’d been staring at for so long I’d stopped seeing it as a problem. It was just Tuesday.

Figma built a really good timeline. I’d been building the two hours before the timeline, and I hadn’t noticed those were different jobs.

If you’re going to work with generated art at all, it’s worth learning to spot this before you commit to a file. Three things I check now, none of which need any special tool — just open the SVG in any editor:

Read the layer names. If they’re all numbers, or there aren’t any at all, nobody can hand this to a developer and nobody can animate it. That alone tells you how much work is ahead.

Count the pieces. A simple icon should be somewhere under fifty. If it’s in the hundreds, the generator drew the same shape several times in slightly different ways and stacked them.

Look for groups. Open the layer list. If it’s one flat list with no nesting at all, then nothing in that drawing is connected to anything else, and you’ll be rebuilding that structure by hand.

You can fix all of this manually. I did, for months. It’s about two hours an icon and it is genuinely miserable work — the kind where you look up and it’s dark outside and you’ve renamed four hundred layers.

Most people don’t fix it. They look at the mess, close the file, and redraw the whole thing from scratch. I’ve done it myself — cleaned up half an icon, lost patience, and drawn it again anyway, which is the embarrassing version.

That’s the part that bothers me. The picture was already good. We’re throwing away good work because the file underneath it is unusable.

I kept going, obviously, or I wouldn’t be writing this.

What I’m building is the boring half — the part where a file like that gets its anchors onto the grid, and where the pictures it draws itself arrive with the stray marks already gone and every layer already named. Then it can go on a timeline. Mine or Figma’s, honestly. It’s called Pieoro and it’s in early beta, which is a polite way of saying it breaks sometimes.

I should be straight about the comparison, since I started this by talking about Figma.

If your artwork already lives in Figma and your team lives in Figma, use Figma Motion. It’s free, it’s built in, it’s backed by a company that’ll still be shipping it in five years, and motion becomes something your whole design system inherits. I’m not competing with that and it’d waste your time if I pretended otherwise.

What I’m working on is for a narrower situation, and it’s one that didn’t really exist three years ago: a picture showed up without a usable file behind it.

That happens on an ordinary Tuesday now. It’s going to happen more.

Figma built the timeline. That was the obvious missing piece and they built it properly.

The unglamorous missing piece is everything between a generated picture and a file that’s worth animating in the first place. As far as I can tell nobody’s job is to fix that.

So I made it mine.

Figma shipped the feature I’d been building was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.