Rive, Figma and AI: The Workflow Behind My 3D Badges

A few weeks ago I could not have built this. Not because I did not know how, but because a flat badge is a sticker, and I did not want stickers.

Rive shipped real 3D, and the Masterclass now has badges you collect on your way to the certificate. Each one is a hexagon plate that turns, catches light and throws sparks as it lands.

Four tools made it: Claude, Weave, Figma and Rive. This is what each one actually did.

Why badges at all

The Masterclass is long. More than a hundred lessons across twenty-six modules, and a lot of it is slow work that does not look like progress while you are doing it.

The only thing marking that progress was a bar filling up. A progress bar tells you what is left. It never tells you what you have done. Those are different feelings, and the second one is the one that keeps people going.

I have taught enough people to know how the middle of a course feels. You are past the excitement and nowhere near the end. I wanted something that said: that thing you just finished was real, here it is, it has a name and a face and it is yours.

Why it only became possible now

A badge is a physical object. A medal, a pin, a stamp. Drawn flat it reads as a sticker, and a sticker does not feel earned.

What makes it feel earned is weight. It should turn, it should have an edge that catches light, it should land. That needs 3D, and until Rive's 3D shipped it meant faking perspective by hand, which never survives a close look.

It started as a conversation, not a drawing

The first question was not what the badges look like. It was what a badge is worth.

Handing them out is easy and that is the problem. Give them for everything and they are worth nothing. So the first thing I did was talk it through with Claude: when a badge should be earned, how to split a hundred lessons so each one means something, how to make the moment it arrives feel earned rather than issued.

That is why there are six and not twenty-six. A badge for every module is wallpaper. Grouping the modules into six runs that each feel like an achievement was a judgement, and having to explain my half-formed version of it out loud is what turned it into a real one.

The metaphors, traded back and forth

Then the concept, which is mine and I am still pleased with it: each badge is the Masterclass mascot, as a different character.

We already have characters in the course, but those are themed on weather. These are themed on the skill you just learned. Finish the rigging and you get a puppeteer on marionette strings. Finish data binding and you get a character charming data out of a basket. Get your first thing moving on a blank canvas and you get an astronaut with a rocket.

Working out which metaphor fits which skill was genuinely shared. Claude threw ideas at me, I kept some and rejected plenty, and I threw my own back. That is the honest shape of this kind of work. Not delegation, not doing it alone. Two sources of ideas and one person deciding.

Weave, which I never opened

Every one of those concepts was already in the conversation. So when I connected Claude to Weave through MCP, it did not need briefing. It had the whole brainstorm, every metaphor we had agreed, every rule about what the mascot is. It wrote the prompts itself and generated the directions.

I have a Weave subscription. I have never opened Weave. I do not know what the project looks like in its interface. Every image was generated, reviewed and iterated through the conversation, and I only ever saw results.

That is the part worth noticing. The interesting thing was not the image generator. It was that the thinking from the first conversation carried all the way through to it without me retyping any of it.

Where it broke, and the week of manual work

It broke on hands.

The mascot does not have hands. It has squares. Weave, after a great many iterations, kept drawing anatomically correct hands with joints, because that is what hands look like everywhere else in the world. At some point the honest answer is that the tool has given you what it can give you.

So I stopped, with the concept settled and enough of the art to work from. Everything after that was manual, and it was the longest part of the project.

I went through the generations deciding which piece to take from which. The vectors that came back were badly built, so I rebuilt them. I cleaned every asset, removed layers that should not have existed, regrouped, split things into the groups they would need for animation later, drew what was still missing, and tuned all of it until it was the art I actually wanted.

That is the ratio nobody mentions. The generating took minutes. The editing took days.

The last badge, four ways. There is no correct answer here, only a judgement about how it sits next to the other five, and the only way to make that is to draw all of them and look.

Into Rive: what it built, what I decided

Rive has an MCP server, so an agent can read and write the file directly. The structure it built is the part worth stealing: one artboard, not seven. The hexagon, the character, the props and the shell colours all come from a view model, so each badge is an instance rather than a file. Change the plate once and all seven change.

The 3D itself is a script, written through the MCP across a lot of iterations, and the particles that throw the sparks are another one. That is where an agent is genuinely strong, because underneath both is maths. Describe the behaviour precisely and it writes it faster than I can.

What came from me is everything about how the badge is put together. I decided it splits into four layers, and which part of the character goes in each one, because that is what makes the parallax read as depth when it turns. I decided how much tilt. I did the wiring: what is bound to the view model, what stays local, what needs animating at all. File structure in Rive is a craft decision, and an agent will confidently build a worse one if you have not made it.

Where hand animation still wins

Simple motion is not the hard part. Anything can scale a thing up and down.

The hard part is several things moving at once and having to agree with each other. A bubble rising in a glass while the glass itself moves. Fire off the back of a ship while the ship is flying. That is where I have to watch it, not describe it: how fast, how strong, whether the micro animation is carrying the moment or fighting it. You cannot specify that in advance. You can only look at it and know.

There is real leverage once you have. Teach the agent one animation properly and it will reproduce it across every other artboard exactly. Teach once, apply six times. That is a large saving, and it is a completely different thing from asking it to animate for you.

Then the website, which was the easy part

The badges also had to exist in the product: award logic in the database, frozen lesson sets so a renamed module can never move a badge someone already earned, retroactive awards so students get everything they have already finished, the dialog at the moment you win one, the badges on the certificate.

This is where the whole approach paid off in a way I did not predict. Because every step had run through the same conversation, from the first argument about what a badge is worth through to the file structure in Rive, nothing had to be explained again. It already knew what the badges were, what they meant, how they were built and where they belonged in the project. The code was the fastest stage of the entire thing.

What each tool actually did

Claude was in every decision without making any of them. It was a thinking partner at the start, it wrote the prompts for Weave, it built the structure in Rive, it wrote the code, and it carried the context between all of those so none of it had to be repeated.

Weave answered what it might look like in minutes, and could not draw a character that does not already exist in the world.

Figma is where the week went.

Rive is where it stopped being a picture and became an object.

The judgement was mine throughout, but I would not claim I made it alone. The useful version of working this way is not handing the work over and it is not refusing to. It is having something to think against, and then being the one who decides.

If you want to try this

The badges are in the Masterclass now. If you are working through it, some are already waiting for you.

If you want to build something like this, the ingredients are public: Rive's 3D, the Rive MCP server, and a willingness to do the deciding yourself. I have tutorials on the channel, and the course covers the rest.