How to customize the size of Figma embed iframes

By default Figma's embed <span class="inline-code">iframes</span> come with a fixed height of 450px and height of 800px. In my experience (and other folks') customizing the width is easy enough, but when you want to set the height to another value, it doesn't seem to behave as well.

I found that I needed to do the following to successfully manipulate the height:

  1. Wrap the Figma <span class="inline-code">iframe</span> in a <span class="inline-code">div</span>
  2. Use either inline styling or a class to give the <span class="inline-code">div</span> a set width and height.
  3. Set both the <span class="inline-code">iframe's</span> inline width and height to 100%.
  4. ⚠️ If you're still having issues with the height, add a declaration to the <span class="inline-code">div</span>'s class: <span class="inline-code">display: flex;</span>

That's it! Below you can see this exact implementation in a Codepen I created to demo this set up:

GIF showing how adjusting the iframe-container's height and width to affect the iframe within

Depending on where you're embedding these Figma files, you might need to use that fourth step. You can see in the GIF above I didn't have to. But in order to get this to work on my website (I design and publish my site via Webflow), I had to use that <span class="inline-code">display: flex;</span> trick. Something else to consider, especially if you find you're embedding lots of Figma files, you could create a class in all the <span class="inline-code">iframe</span> tags for consistency. Check it out:

Annotations showing the two different classes on the iframe and its containing div

Not being an engineer myself, I'll admit this was a bit of a head-scratcher for me. It took me longer than I'd like to realize the solution was, "wrap it in a div" 😅 but I was so excited that I figured it was worth a blogpost. Hopefully it helps you out too!

<a href="" class="button secondary" style="padding:16px,0px; margin:auto;">See the Codepen</a>