Skip to main content

Hi there. To create my prototype, I am cutting and pasting a lot of images into my Frames. Currently on one of my Parent Frames, I created a child Frame to import an image. I was finally able to get all the content in however, there is a big gap to the left - please see attached. I would like all content to be preserved and just expand the width. Does anyone have an idea of what I can do?

 

I will be doing a lot of cutting and pasting into frames. So If someone has a clean step by step process of how I can easily insert an image, keep all contents and expand it to the parents length that would be amazing. I am all ears. I spent a full day trying to solve this problem, which is probably a simple fix 🙂 Many Thanks, Susanne 

Hi Susanne,

I totally get how frustrating this can be! When dealing with images inside nested Frames in Figma, a common cause of unwanted gaps is the way Frames handle their resizing and constraints.

Here’s a step-by-step approach that might help:

  1. Select the child Frame with your image.

  2. Check the Constraints settings (on the right panel). Set the horizontal constraint to “Left & Right” so the Frame stretches with its parent.

  3. For the image inside the child Frame, also set its constraints to “Scale” or “Left & Right” depending on how you want it to behave.

  4. If you want the child Frame to match the parent’s width exactly, try selecting the child Frame and use the “Resize to Fit” option or manually drag the edges to snap to the parent Frame’s width.

  5. Avoid absolute positioning if you want everything to stay aligned responsively.

If you often paste images, consider creating a master Frame with the right dimensions and constraints, then always paste images inside it to maintain consistency.

Hope this helps — feel free to share screenshots if you want me to take a closer look!

Good luck!

Hi Wirkkarl, 

 

Thank you for your response. I tried to follow your instructions and still no go :(

Yes, so moving forward I should create a master Frame. Please keep in mind that I will be using several different frames in a Frame. I am working with a  Frame size of 412x917. Would you kindly let me know how to create this master frame, how to choose the right dimensions and constraints to maintain consistancy. 

Here is a Full screen shot of what I am doing. The issue is with Frame 3. 

Thanks for your help! :)

Hi Susanne 👋

I've run into similar issues when pasting images into nested Frames in Figma. Here's a step-by-step method that usually helps me maintain alignment and expand the child frame cleanly:

 How to Paste and Align an Image in a Child Frame:

  1. Paste your image into the child frame normally.

  2. Select the child Frame, then from the right-hand panel:

    • Set "Layout Mode" to horizontal (if not already).

    • In Resizing, set "Hug contents" or manually switch the width to "Fill container".

  3. For the image itself:

    • Set its alignment to “left” (if it’s floating).

    • Make sure constraints (from the right panel) are set to Left & Top.

  4. If there's still a gap, check for invisible padding or unnecessary auto layout settings.

You can also reduce image sizes before inserting them to improve performance and reduce layout glitches.

 I personally use ImgCompress.io – a free tool to compress images before uploading. It helps keep Figma smooth, especially with large files.

Reply


Terms & ConditionsCookie settings