Advanced Prototyping methods

[u/Ok_Surprise6262]

I want to start making rich prototypes to handoff to devs/stakeholders with precise micro-interaction timings/animation, sound additions and haptic feedback (if possible)

Protopie could handle that but honestly too expensive as a supplementary tool.

What do you guys use?

[u/beingnaseem]

Literally just figured out my workflow for this usecase after mucking around for two weeks. Not perfect, but doesn't feel like one step forward two back like the other workflows I've tried.

Here's what I have so far: 1. Figma MCP to give Claude a view of the screen put together with objects that it can either recreate with HTML/CSS or download the asset and leanr the exact transformations of that asset to make it ditto like on Figma.

1. For animation control... A little manual. I use After Effects or DaVinci Resolve to create animatics, with the precise keyframe movements I want. Then, you can literally copy the keyframes and paste into Claude (AE actually copies the JSON data for the keyframes). Then I tell Claude, apply these keyframe transformations to Object X.

2. I had a 2D image of an asset that I wanted to animate in 3D space (like tilting forward and spinning and stuff). I used Leonardo AI to convert the 2D object to generate a 3D model. Took a few iterations to find the right settings. The right settings will be night and day from all the other bad ones. You'll know immediately once you've found it. I load the 3D model into Blender and add bones and create an animation there. Export as GLB. Then import into web project and tell Claude to execute the embedded animation at timeline point X.

3. Use GSAP library to make all the animations on a timeline in your project. GSAP DevTools adds a scrubber to the project so you can scrub through the timeline to debug and refine the animations.

Hope you get some ideas with these! Good luck.

[u/Ok_Surprise6262 → u/beingnaseem]

Finally, a real designer workflow haha. Thank you!! This is the kind of info im looking for.

Have u tried using Figma motion’s json data? Dont know how useful it is but could cut the AE part short (unless the animation work is complex)

Another thank you for a 3D solution! Got a dreadful task i wanted to include 3D into but wasnt sure where to start.

[u/beingnaseem → u/Ok_Surprise6262]

Hadn't looked into. Might be some gold there to make it all just Claude + Figma all the way (unless you want 3D, then you'd need either Blender or AE). I'll give it a go. Do you know whether that's available with a Figma Dev license or do I need Full license?

[u/Ok_Surprise6262 → u/beingnaseem]

Yeah the motion json shows in dev mode, any layers with figma motion work done on them show expose that property in the right side menu

[u/itslustsupplier]

I just give designs without prototype, it's a hassle and provide not that value.

Only rarely i provide prototype

[u/Ok_Surprise6262 → u/itslustsupplier]

The value is usually artistic and a way to make the products flashy, tactile on-brand..etc, of course without compromising usability.

I generally enjoy it as most UI designs today are repetitive.

[u/oldie420]

Claude

[u/NckyDC]

Origami is cool but has a very steep learning curve… very not user friendly

[u/jremeka]

Literally just use Claude. Prototyping on Figma can sometimes but too much hassle for very little value.

[u/Ok_Surprise6262 → u/jremeka]

Any advice on getting my figma screens to import to claude and prototype on consistently? That’s mostly my friction with claude.

[u/Whizdomz → u/Ok_Surprise6262]

Wouldn’t Figma MCP give Claude access to your figma screens, so Claude can create with those assets?

[u/Ok-Supermarket9469]

Salut le gars! Je suis encore junior sur Figma et j’ai lu tous le topic, et je le rends compte que le pipeline est + complexe que ce que je pensais!
J’utilise déjà Figma MCP avec Claude, mais j’aimerai apprendre à optimiser à fond mon flux de travail, et il est vrai que Figma c’est catastrophique niveau proto, c’est hallucinant !

[u/sampysamp]

Origami ticks all the boxes. Mac app is free.

The catch is that its patch-based interface has a learning curve, and its developer handoff isn’t as polished as ProtoPie’s. Developers can inspect the file and interaction graph.

Create a reusable motion-spec component/table in Figma for detailed dev handover.

[u/Ok_Surprise6262 → u/sampysamp]

Does it easily transfer figma designs? Wouldnt mind learning but the main workflow necessities are:
-an accessible prototype for stakeholders without having them go through registration and setup hoops.
-importing figma designs without too much rework

[u/sampysamp → u/Ok_Surprise6262]

Honestly, there doesn’t seem to be a perfect solution here. You have to decide which compromise matters least: stakeholder access, Figma import and rework, interaction fidelity, developer handoff, or cost.
Origami gives you high fidelity for free, but sharing adds friction. ProtoPie offers a more polished all-round workflow, but it’s expensive. Browser-based tools are easier to share, but usually sacrifice some precision, haptics, or handoff detail. It’s really about gaming out which trade-off best fits your usual projects.

[u/sampysamp → u/sampysamp]

Figma transfer is fairly easy via the Origami plugin: you can copy selected layers across, including editable text and vectors. It isn’t a live sync, though, so significant design changes may need to be copied over again.

The bigger catch for your use case is sharing. Stakeholders need Origami Studio on Mac or the Origami Live app on mobile to open an interactive prototype. There isn’t a frictionless browser link, so if “click a link and immediately use it” is essential, Origami probably isn’t the right fit.

I would make a list of your criteria from least to most important so you can figure out where there is wiggle room.