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:
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>
If you'd like to be notified of when I publish a new blog post, joining my newsletter is a great way to keep up. My readers enjoy bonus behind-the-scenes insights on every post!
