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 you maximize your Webflow site performance and improve speed and load times?

How can I retain the styling and spacing (such as bold lettering) when pasting text from a Word document into Webflow?

What is the Webflow hosting CSS file and why is it large and causing a slow loading time?

Where can I give my client designer rights in Webflow to allow them to implement smaller changes without needing to involve me?

How do I rename text span blocks in the Webflow panel?

How can the appearance of the play button in the Webflow video module be customized to have a circle background instead of the default Vimeo rectangle shape?

How can I create a Collection List in Webflow that pulls in content from different Collections? We're rebuilding our eCommerce stores and need to display products from multiple categories in one list. For example, the 'View All Products' page should show all products from all Collections, and the 'Products under £100' page should display products from multiple Collections filtered by price. Is there a way to achieve this? Here is my public share link: <LINK>

Why do all my Webflow site pages have a horizontal overlay, even after trying to hide overflowing content and using elements with 100vh?

What is causing my CSS Grid elements to display incorrectly in Safari and how can I fix it for both Safari on desktop and Safari on iPad?

Can I add specific email addresses for recruiters to receive job applications in Webflow? If so, what integrations or tools are recommended for sending automated email responses to applicants?

How can I adjust the left margin of a header container in Webflow when the container margins are locked to keep it responsive?

How can I fix the required slug field issue when integrating Webflow with Zapier for sending form data into CMS?

How can I ensure that a div element in Webflow has the same height as the entire HTML document, even after exporting the code?

How can I disable the hover effect when the state is on current in Webflow?

How can I connect to the Vimeo API in my Webflow CMS template to display embedded videos?

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?