Streaming live at 10am (PST)

Embed Prototype into Webflow

Hello
I am wondering if anyone knows whether we can embed an InVision or Figma prototype into Webflow. I know that we can do a live embed into other platforms like Medium or Wordpress, however, I am not sure if Webflow’s embed works for an app prototype (I can embed the prototype using embedly). Thanks!

1 Like

Are you using an image or code snippet? Both can be embedded.

@garymichael1313 I’m curious about this as well. You can see a clickable prototype in a mobile phone mockup if you scroll down this page.

It was made with Marvel app. Is something like this possible with Figma, Sketch or XD?

Hey @sdillon001,

I’m on Windows, so haven’t used Figma and Sketch. But you can use Invision to do this much more efficiently and you don’t need any conversions based on OS. It’s web-based with a similar process as the others. I would give that a try and it’s fairly cheap, I believe you can start 1 project free and the next level is like $9 or something.

In addition, you can build this directly in Webflow as an actual process, not a sequence or composite. Why don’t you do that? Why duplicate the process?

Just go from a sketch - to - Webflow. Stage a page on the (.io) domain. Then add multiple sections on the same page for different mockups.

Before you publish, simple display: none for the unrelated sections for that client or project.

Just throwing out a few options and suggestions :smile:

:wink:

thanks very much. I appreciate the response. I should have mentioned I already have a bunch of prototypes that have been made in Figma and XD. I’m transitioning my portfolio from Wordpress to Webflow and was looking for a way to embed a completed prototype into Webflow via existing integration within those programs.

I’ll look into implementing your suggestions. Thanks again!

Yeah I hear ya. If you’ve already finished them, then I understand what you’re trying to do. At least from now on you can start the prototyping in Webflow to save a bunch of time!

Holler if you need anything else, see ya :slight_smile:

@sdillon001 That mobile prototype you linked is just an external page that is rendered in an iframe.

This comment gives you a quick tip on how to use iframes in webflow: How to embed iframe of a site into my website

So you would use the direct embed link to the marvel prototype as the iframe src

Hope this helps.

1 Like

It’s a clickable prototype inside the iframe. It’s hosted on Marvel but the user can interact with it on Webflow.

I don’t have or want a Marvel subscription.

I’m asking if something similar can be achieved with XD or Figma - meaning can I embed a clickable prototype made with XD or Figma where the user will be able to interact with in an iframe?

I’m not familiar with their output / or how those tools deliver or host a clickable prototype. If it’s hosted like Marvel, I see a possibility to include it in an iframe. If it’s a deliverable that you run offline, it becomes more tricky. Could you let us know how your preferred tool outputs/hosts?

Adobe XD and Figma are my preferred tool outputs/hosts. But if you’re not familiar with how those tools deliver or host clickable prototypes, then I’m not sure you can answer this. But thanks for your help