How Figma Make is changing the way I do handoff

Most of the Figma Make examples I see focus on prototyping.

But it's starting to change how I think about handoff too.

Lately, I've been using Make to deliver production-ready code, so the Figma team asked me to highlight a few examples from my workflow:

1) Creating subcomponents

See this little progress bar that turns into a character counter as I type?

I explored this concept in Make and really liked where it landed.

A couple years ago, I would've dropped a Cleanshot .gif on the canvas and asked my developer to recreate it as closely as possible.

But I'm no longer making concept cars.

This component is the design.

Every detail is rooted in code and behaves exactly how I want it to in production.

So why ask a developer to rebuild it from scratch?

Instead, I added an annotation that links directly to the code. My developer copied it straight into their IDE and it worked perfectly in one shot. It exists in prod as I type this!

2 — Creating animations

A few weeks ago we needed to ship a hot fix for the Inflight Figma plugin.

I had about ~7 minutes to figure out some kind of a success state 🙈

I don't have a ton of brand assets to work with so I decided the easiest way to make the plugin feel premium was to add a bit of motion to a simple checkmark.

I'm not a motion designer, so I opened my mockup in Make with the following prompt:

Make gave me 6 options and I selected my starting point.

After ~2 minutes of ping-pong, I had something serviceable.

At that point, I asked Make to print only the CSS required for the animation directly underneath the prototype.

I then sent that publish link to my developer and they had everything they needed at a glance.

TLDR:

If you zoom in on specific components and interactions, you can easily create production-ready code using Figma Make and bake that into your handoff process.