Figma Embed Mobile Proportions & Responsive

MichGlad · June 25, 2021

Hi :)

How can I resize the embedded Figma block to have the proportions of a mobile phone?

I would like to add a Figma prototype for a mobile application to my Squarespace website. I tried adding it, but it has the wrong proportions - it is too short and too broad.

This is how it looks:

I would like the Figma prototype to look more like this and to be responsive for mobile view:

I used this code to create it:

<html>
  <head>
    <style>
      #content {
        width: 800px;
        margin: auto;
        height: 100%;
        display: flex;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FqfvtLv9FQgLOek1VqmI9OM%2FPhoneScreenTestSqurespace%3Fnode-id%3D1%253A32%26scaling%3Dmin-zoom%26page-id%3D0%253A1" allowfullscreen></iframe>
    </div>
  </body>
</html>

I found the code here: https://www.figma.com/developers/embed

Here the link to the prototype again: https://www.figma.com/proto/qfvtLv9FQgLOek1VqmI9OM/PhoneScreenTestSqurespace?node-id=1%3A32&scaling=min-zoom&page-id=0%3A1

I would be very grateful if you could help me :)
Thank you in advance!

tuanphan · June 28, 2021

Hi. Can you share link to page (on your site) where you added figma code? We can check easier

MichGlad · August 5, 2021

Thank you @tuanphan :)

I found a solution to my problem

HTML code block:

<div class="iframeContentCenter">
  <iframe style="border: 1px solid rgba(0, 0, 0, 0);" width="414" height="882" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FqfvtLv9FQgLOek1VqmI9OM%2FPhoneScreenTestSqurespace%3Fnode-id%3D1%253A32%26scaling%3Dmin-zoom%26page-id%3D0%253A1" allowfullscreen></iframe>
</div>

Custom CSS:

/*iframe position*/
.iframeContentCenter{
  width: 414px;
  margin: auto;
  border-style: none;
  height: 100%;
  display: block;
}

Edited August 5, 2021 by MichGlad

MichGlad · August 17, 2021

And if you don't want that white figma footer at the bottom of your iframe you can add %26hide-ui=1 to the end of your src url.
Otherwise just add 48px to your height so the footer does not overlap.

finooks · October 22, 2021

I have a couple questions about this too! I don't code at all, so know, I don't understand how to write CSS 😀

Is there a way to put the embed code into one of the sqsp image blocks (eg. the collage image block)?
is there a way to make the figma embed code responsive?
is there a way to make the figma embed code responsive, but constrained to aspect ratio?
I tried adding "%26hide-ui=1" to the end of the source URL but it did not work? I must not be understanding where the end of the url actually is? (I put it right after the ID% number)

This is what I have now. as you can see its centered on desktop but not on tablet or mobile. its not responding to device at all.

tuanphan · October 25, 2021

On 10/23/2021 at 1:36 AM, finooks said:

I have a couple questions about this too! I don't code at all, so know, I don't understand how to write CSS 😀

Is there a way to put the embed code into one of the sqsp image blocks (eg. the collage image block)?

is there a way to make the figma embed code responsive?

is there a way to make the figma embed code responsive, but constrained to aspect ratio?

I tried adding "%26hide-ui=1" to the end of the source URL but it did not work? I must not be understanding where the end of the url actually is? (I put it right after the ID% number)

This is what I have now. as you can see its centered on desktop but not on tablet or mobile. its not responding to device at all.

<center>
<iframe style="border: 0px solid rgba(0, 0, 0, 0.1);" width="800" height="1024
" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FcD5e93lWwLEbGNhSQte9Iv%2FPlenity_06_portfolio%3Fpage-id%3D2422%253A73083%26node-id%3D2422%253A73083%26viewport%3D241%252C48%252C0.5%26scaling%3Dmin-zoom%26starting-point-node-id%3D2422%253A74946" allowfullscreen></iframe>
<center>

#1. Use script code to move embed block into collage block

#2. #3. #1. Can you share link to page where you added figma? We can check easier

annferrera · October 6, 2022

On 8/5/2021 at 2:08 PM, MichGlad said:

Thank you @tuanphan 🙂

I found a solution to my problem

HTML code block:

<div class="iframeContentCenter">
  <iframe style="border: 1px solid rgba(0, 0, 0, 0);" width="414" height="882" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FqfvtLv9FQgLOek1VqmI9OM%2FPhoneScreenTestSqurespace%3Fnode-id%3D1%253A32%26scaling%3Dmin-zoom%26page-id%3D0%253A1" allowfullscreen></iframe>
</div>

Custom CSS:

/*iframe position*/
.iframeContentCenter{
  width: 414px;
  margin: auto;
  border-style: none;
  height: 100%;
  display: block;
}

Hi! I'm having the exact same problem. I know nothing about HTML, CSS...

where can I paste this code?

thank you in advance!

tuanphan · October 8, 2022

On 10/6/2022 at 4:12 PM, annferrera said:

Hi! I'm having the exact same problem. I know nothing about HTML, CSS...

where can I paste this code?

thank you in advance!

With CSS code, add to Home > Design > Custom CSS

tomalexander96 · May 8, 2023

On 10/24/2021 at 11:31 PM, tuanphan said:

#1. Use script code to move embed block into collage block

#2. #3. #1. Can you share link to page where you added figma? We can check easier

Hey Tuan, what script code would you use to move an embeded block into a collage? Trying to embed my Figma site in a way that it'll be responsive on mobile.

BTW, just wanted to say that you're awesome. Almost every time I come to one of these forums I see you answering. Thank you so much for all you do, and all the help you've given me personally!

tomalexander96 · May 8, 2023

Here is my page, BTW!

https://www.tomalexanderart.com/web-design

tomalexander96 · May 8, 2023

Update! Just found a website that spits out responsive embed code for you. Check it out!

https://iframely.com/try

tuanphan · May 9, 2023

On 5/8/2023 at 7:45 AM, tomalexander96 said:

Here is my page, BTW!

https://www.tomalexanderart.com/web-design

Move this?

jakecakewalk · July 10, 2023

I'm also having the same issue. Although I think mine is a scaling issue vs. a dimension issue? I want the PT to fill as much of the viewport as possible, but it's either too big or too small. I've messed around with a number of code options as well as the PT setting within Figma, no dice. The device frame itself isn't showing up either. I wonder if it has to do with the overall height. I set it that way so it would at least scale up to a viewable size.

Any takers on advice?

tuanphan · July 14, 2023

On 7/10/2023 at 2:36 PM, jakecakewalk said:

I'm also having the same issue. Although I think mine is a scaling issue vs. a dimension issue? I want the PT to fill as much of the viewport as possible, but it's either too big or too small. I've messed around with a number of code options as well as the PT setting within Figma, no dice. The device frame itself isn't showing up either. I wonder if it has to do with the overall height. I set it that way so it would at least scale up to a viewable size.

Any takers on advice?

Can you share link to this page? We can check easier

dee88 · October 5

On 8/5/2021 at 9:08 PM, MichGlad said:

Thank you @tuanphan 🙂

I found a solution to my problem

HTML code block:

<div class="iframeContentCenter">
  <iframe style="border: 1px solid rgba(0, 0, 0, 0);" width="414" height="882" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FqfvtLv9FQgLOek1VqmI9OM%2FPhoneScreenTestSqurespace%3Fnode-id%3D1%253A32%26scaling%3Dmin-zoom%26page-id%3D0%253A1" allowfullscreen></iframe>
</div>

Custom CSS:

/*iframe position*/
.iframeContentCenter{
  width: 414px;
  margin: auto;
  border-style: none;
  height: 100%;
  display: block;
}

I'm using this exact same code and pasted the custom CSS, but the prototype frame still appears cut-off, not full screen 😞
Does the code above still working today? anyone could help?

Thanks

tuanphan · October 7

On 10/5/2024 at 11:52 PM, dee88 said:

I'm using this exact same code and pasted the custom CSS, but the prototype frame still appears cut-off, not full screen 😞
Does the code above still working today? anyone could help?

Thanks

Can you share link to page where you added prototype frame? We can check easier

Figma Embed Mobile Proportions & Responsive

Recommended Posts

MichGlad

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

MichGlad

Posted Images

tuanphan

MichGlad

MichGlad

finooks

tuanphan

annferrera

tuanphan

tomalexander96

tomalexander96

tomalexander96

tuanphan

jakecakewalk

tuanphan

dee88

tuanphan

Create an account or sign in to comment

News

MichGlad

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources