Is it possible to have responsive Figma embeds so that they exactly fill the parent container?
I tried using 100% to replace height and width dimensions to no avail.
Have you worked this one out?
No. This forum seems pretty dead.
Hey Manuel! I also ran into this and believe I have a viable fix:
I wrapped my <iframe> that contains the Figma embed in a div, and gave that div a class called .figma-embed. It has two declarations:
.figma-embed{ height:65vh; display:flex; }
Setting the iframe’s containing div to display:flex; did the trick, and I got the idea from looking at Figma’s embed documentation for developers, I noticed this in the first code snippet and figured I’d give it a go, and it worked!
The <iframe> itself has inline styling with the height and width set boh set to 100%.
If you want to inspect around on my implementation here’s a link, you’ll find the embed about halfway down the page. Also here’s an annotated screenshot to show these declarations in action:
hope this helps you out for your use case!
4 Likes
Hey @AlicePackard this is great for the frame to become responsive but what about the contents inside? I’m trying to display a prototype that I had set to Actual Size 100% but it’s way larger than the actual frame. The frame itself flexes based on your feedback but the prototype is floating around inside cause it’s too large.
Hey @Taylor_Mitnick, as far as I’m aware there’s not a way for the contents to respond to viewport width changes in the moment. But I notice when I start at a wide breakpoint, then narrow my browser window width, and refresh, the content adjusts after refresh. So unless you expect your viewers to be adjusting their browser window width, you should be okay! Let me know if I understood the issue.
Hi @AlicePackard @Taylor_Mitnick I was reseraching for the same stated issue that @Taylor_Mitnick (possibly still is) or was facing:
Blockquote
…what about the contents inside? I’m trying to display a prototype that I had set to Actual Size 100% but it’s way larger than the actual frame. The frame itself flexes based on your feedback but the prototype is floating around inside cause it’s too large.
I mean if there’s an option to actually fit the size of the prototype’s content (screenshot attached) inside the actual iframe itself, we should be able to achieve the desired results using .css (a bit of fiddling arround), right?!
I didn’t actually, yet.
best M.
1 Like
Hi! Have you solved this is issue with css? I am trying to embed my Figma prototype as an iframe so that it sizes down in width when I make the window smaller.
I am currently using bootstrap 4 framework. I hope this helps, this is how I make the Figma prototype iframe responsive:
<div class="d-flex">
<iframe src="..."></iframe>
</div>