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 have a different navigation bar on page 2 and page 3 in Webflow without affecting the navigation bar on page 1?

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

Why can't we have captions under the 25 images in Webflow CMS for the artist websites I'm creating? Can someone assist me with this?

How can I create a GA4 Event to track form conversions using Webflow, Google Tag Manager, and Google Analytics 4?

Can websites created in Webflow be transferred to other hosting platforms like cPanel or Plesk, or are there alternative solutions?

Can Webflow's Interactions feature move a specific element to the top left of a scrollable page and scale it to a specific size when tapped?

Can Webflow integrate with Square for e-commerce, since Webflow e-commerce only supports Stripe?

Are there any online resources that can help me build a custom donation form in Webflow that can connect to a payment partner allowing for iDEAL payments in the Netherlands?

What is the purpose of changing the form method from GET to POST in Webflow and how can it be utilized?

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

Can Webflow implement page redirects?

How can I make the Webflow navbar component transparent by setting the opacity to 0? I've tried various methods, but it still appears as a light gray color. The same issue occurs with form fields element, where opacity changes don't seem to have any effect. Is this a bug or am I missing something? I've seen similar posts about this, but haven't found a proper solution.

How can I enable a dark mode option using Webflow in 2020? I've heard it involves triggers and there might be some discussions on the Webflow forums about it. Can you provide a detailed explanation? Thank you!

What could be the reason for the layout issues and text display problems on Mac and iOS devices when my website, designed using Webflow, is working properly on Windows and Android?

What are the top features of Byteline's data sync tool, including its handling of field types and custom error notifications?

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?