How to customize the size of Figma embed iframes

<div class="blog-post-update-to-come">⚠️ Heads up! This blog post needs a refresh after everything that was announced at Config 2023. The information in this post is still good, but I am re-writing it to include the latest feature announcements. I've published a separate blog post covering the general changes I need to make to this post and some others. If you'd like to be notified when I publish a new version of this post you can sign up for updates by joining my newsletter.</div>

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:

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:

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="https://codepen.io/Alpackah/pen/XWqPqmG?editors=1100" class="button secondary" style="padding:16px,0px; margin:auto;">See the Codepen</a>