Prototype best practices

I just can recommend to make a duplicate to share with reviewers.
Please think, Figma will not implement all your scenarios instead you 🙂

Hmm. A copy of the page will include the same components, and those will reflect changes. If I copy to a new document it will include references to those master components as well.

It’s too bad as it makes Figma less useful for prototyping. It needs to have some sort of way of marking a prototype as being a snapshot of a state. I don’t really want to continue using Invision as well, but I may need to for this reason. Oh well!

No, and I had no idea that was an option! That looks like the perfect solution, and I will try it out.

Ahh, I looked into it, and this feature is only available on Organization plans, unfortunately.

I can just suggest to use my plugin Demo Station to export a prototype out of Figma.

I will try it out! Thanks Max.

Solution - use “on click” + link to the seperate prototype
Create a link for each menu item that links to the prototype in quesion. It does open it in a new page and take time to load, so not ideal…

Won’t the old prototypes continue to be updated with the new changes?

If you’re using multiple Flows in your prototype, my recommendation would be to create a new page for every iteration. Prototypes can’t span pages, so copying your most recent prototype and pasting it onto a new page will keep it safe from your clients until you’re ready to share it.

I’d name the page after the Flow and append it with “v1”, so for example “Account sign up v1”, “Account sign up v2.” You could also name the flows after the page names too so your client knows which version they’re viewing. It may be slightly annoying for the client as they’ll have a browser tab for every version of the prototype.

But if you’re not using multiple Flows, then you could keep everything on the same Page and only set a new Flow Starting Point on the next version when you’re ready to share it. This will be a nicer viewing experience for your client, and could benefit you too as you won’t have to flip between Pages in your file as you make updates.

That’s an interesting idea with copying to new pages. Any master components would only have their variants copied though. I’d have to move all master components to a separate page first.

Unless I am missing something, if I do option two and keep them on the same page, the first prototype will reflect the changes that I make after I share it. I’m not sure how that solves the issue?

ah that’s a good point to consider! I entirely skipped over how to deal with components in my previous reply.

You can make duplicates of main components and iterate on the copies. This is especially easy if the component is using variants, you can just copy the surrounding frame with the purple dotted line. But if it’s a single component I’d advise you detach an instance and then immediately re-componentize it.

If you chose to keep everything on the same page I would name the copies of main components so that you know which version they are associated with (eg “Button v1” gets used in “Account sign up v1” prototype only).

But this is where the separate pages have an advantage: Figma will automatically group main components by page in the Asset panel, so you could have two main components named “Button” in your file, but if one is on a page named “Account sign up v1” and the other is on “Account sign up v2” then you they will be organized as much in the asset panel. Still, it could be good to keep “v#” in the main component name just for total clarity, especially if you use the Asset panel’s search functionality (which obscures where the main components come from that match your keywords in the search).