How can I display the full height of a Figma case study embedded in Webflow without it being cut off halfway through the page?

To display the full height of a Figma case study embedded in Webflow without it being cut off, you can follow these steps:

1. Retrieve the embed code from Figma: First, make sure you have the embed code of your Figma case study. In Figma, go to the prototype view, click on the "Share" button, and then select the "Embed" option. Copy the provided embed code.

2. Create an embed element in Webflow: In your Webflow project, navigate to the page where you want to display the Figma case study. Drag and drop an embed element onto the page.

3. Paste the embed code: Double-click the embed element to open its settings panel. Then, paste the Figma embed code into the field provided.

4. Adjust the height of the embed element: By default, the embed element may have a fixed height. To allow the Figma case study to display at its full height, you need to adjust the height of the embed element. There are several ways to do this:

a. Use percentage value: Set the height of the embed element to a percentage value, such as `100%`. This will make the embed element take up the entire height of its parent container, allowing the Figma case study to expand and display fully.

b. Utilize custom code or interactions: If you want more control over the height behavior, you can use custom code or interactions. With custom code, you could target the embed element and dynamically adjust its height based on the height of the embedded Figma case study. With interactions, you can animate the height of the embed element to expand or contract as needed.

5. Test and iterate: After adjusting the height of the embed element, preview the page to see if the Figma case study now displays at its full height without being cut off. If necessary, iterate and fine-tune the height settings until you achieve the desired outcome.

Remember to consider the overall design and layout of your page when implementing the Figma case study. Ensure that it seamlessly integrates with the surrounding content and maintains a cohesive user experience.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

How can I make a section scroll horizontally while scrolling vertically in Webflow?

How can I create a sticky menu bar in Webflow?

How can I make my Webflow site responsive and suitable for mobile and tablet devices without affecting the desktop version? I've tried making changes, but they seem to impact both the desktop and mobile versions. Can someone explain how to modify the mobile site specifically?

Where can I modify the settings in Webflow to display my desired content instead of showing the template or Webflow name (as seen in the attached screenshot)?

How can I fix the issue with my Webflow site's footer floating above the bottom of the page on the third page, even though it has the same settings as the other pages?

What font should I use in Webflow for maximum accessibility across different devices and operating systems? Is there a section in the forum dedicated to accessibility?

How do I transfer my domain to a new website/template on Webflow?

How do I host a main domain and add a second domain as a sub-domain in Webflow for a website that features multiple products?

How can a CMS site in Webflow be exported as a static site?

Can the section in my Webflow Home page, where a CMS collection of events is displayed, be automatically hidden when there are no events?

How do I fix the "403 restricted error" with the "openresty" message when trying to visit a friends' site on a custom domain linked through Webflow?

Is there a way to update the image names on my Webflow website for SEO optimization, even if they have already been uploaded without renaming them? Are there any plugins available to help with this task?

Will the application that pulls data from Webflow CMS and is used in a React application be publicly listed by Webflow if we have to register it?

How can I create a map on a website using Webflow, JavaScript, Collection Lists, and Google Maps API?

What is preventing the "Current" text from changing color on the mobile version of my Webflow site when clicked?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

Can the Webflow YouTube component recognize channel IDs instead of video IDs for embedding a Live Stream?

How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?

How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?

How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?

How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?

How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?

How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?

How can I whitelist the IP or user agent of a third-party vendor to crawl my Webflow site for legal compliance archiving purposes?

How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?

How can I dynamically redirect to a CMS created after form submission in Webflow?

How can I make the menu close when a link is clicked in Webflow?

How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?

How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?

How can I add user input to the end of the redirect URL in Webflow?