Skip to main content
Solved

Image placeholder in component

  • April 26, 2024
  • 6 replies
  • 2768 views

Hi all~
I made a web section layout as a component with an image placeholder in it. When I used it as instance, I dropped in images to that image placeholder. But the images are not always the same size as the placeholder. It crops my image and I couldn’t rescale the placeholder. Is there any way I can make the real image drive the placeholder so my image won’t be cropped off?

Here is the demo file if needed: https://www.figma.com/file/Ctxa7gAqNpAOoknbhVlMTx/demo?type=design&node-id=1%3A52&mode=design&t=tqwBEyspj3PpUHmF-1

Best answer by Pavel_Kiselev

I made a small demo where you can find a hero section component with Hero Image property.

Figma – 28 Apr 24
View original

Pavel_Kiselev

You need to make an image component first if you want somewhat dynamic size for it. Grab an image layer, Shift+A that and make a component. Keep “hug contents” sizing, important. Place that component inside your hero section and use component properties to enable component swapping on that image.

To incorporate different image into the hero instance you’d need another image component, like the one you already created, any size, wrapped with auto layout with hug contents sizing.

I’d keep them organized under the same “folder”, like “Hero/Images/Image 1”, “Hero/Images/Image 2” etc. It will make it easier to replace images fast.

Should be lemon squeeze after that


  • April 26, 2024

Thank you so much for your replying!
I’ve created the image as a component inside the hero component and made it “hug” like you said. But I don’t really understand “use component properties to enable component swapping on that image”. And it is still not working ☹
Would you mind open up the demo file and check it out for me? Thank you 😊


Pavel_Kiselev

I made a small demo where you can find a hero section component with Hero Image property.

Figma – 28 Apr 24

  • April 29, 2024

If I understand correctly, I will need to make every different size of image a instance swap? Like you showed in your demo, these swaps are all different dimensions.


So when I have a new dimension of image, I will need to add a new instance swap? What if I just want to use a bunch of random dimensions of screenshots as the hero image, is that impossible to drive the placeholder that flexibly?


Pavel_Kiselev

Depends on what you want to do really. I am just demonstrating to you the way to enable dynamic image sizes, which was your original question as far as I got it. Now you have a template to play with. You can easily reduce all the choices down to a few options, up to you.


  • April 29, 2024

I think I know how to do it. Thank you a lot!


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings