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!

2 Likes

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 - #4 by thesergie

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

Hey Steve @sdillon001, how are you?

I just jumped on your thread because I am setting up my new UX portfolio and I am struggling with the same type of problem. I would love to integrate an old XD prototype the same way as it works on Behance.

This is a link to my prototype:

(if it doesn’t pop up right away, it’s a the very bottom of the case study.)
Depending on the type of browser I use whether or not mobile it shows either on the same screen or opens a new one.

Did you find a solution for yourself? Would love to know.
Best regards,
Thiemo

Hi Thiemo, I used the embed code from Figma directly in the page and the prototype works in-page. You can see it at the link below. Click on the ‘Prototype’ in the side nav menu then scroll down a bit. Not sure if XD has an embed code anywhere, but you could try pasting that in an HTML embed in webflow. That’s how I’m using the Figma embed code.

Best of luck!
Steve

Sonder Mobile app case study

1 Like

Hey Gen UX were you able to get the LIVE EMBED to work with FIGMA?