Relume Community Icon

Relume Community

Home
Events

Announcements
General
Getting Started
Issues
Showcase

Powered by Tightknit

Help Needed for Embedding Figma Prototype in Portfolio Case Study

·

I am trying to embed a prototype into my portfolio case study, but it is not formatting the way I want it to. Ideally, it would just be the mobile frame with the prototype inside. Currently, it is an Embed Code element with the pasted embed code copied from figma. Share only link is below. Any help would be appreciated. Thanks! https://preview.webflow.com/preview/elevate-web-design?utm_medium=preview_link&utm_sou[…]&pageId=6728ec8b57ba055796657a48&locale=en&workflow=preview

4 comments

Matt J.
·
Jarret okay so looks like you have the prototype settings within figma correct, so thats cool. So then the next thing to do would be to change the background color of the prototype to match the background of the section, and then you'll modify the iframe code a little. change the width and height to 100%. Change the border to just be border: 0px; and then on the code embed itself, give it a class and then start to define the width/height of that embed. So for me, it seemed like width: 100% and height: 990px seemed to have worked out. Then I wrap that embed code with another div, that I can use to help define its width and position if I wanted, this div is probably an extra step but generally a good idea. Here's the most important piece, adding this at the end of your figma URL will hide everything else besides the device and your prototype: &hide-ui=1 And then you should be good to go!
Matt J.
·
So your iframe code should look like this:
Matt J.
·
the actual code embed element should look like this
Jarret
·
Wow, thanks Matt J.!