Mobile app version of vmapp.org
Login or Join
Welton168

: Override position of image in symbol (Sketch app) I have a common use case in Sketch where I'm designing a block with profile content, including an image. The block is a symbol and the image

@Welton168

Posted in: #SketchApp #Symbols

I have a common use case in Sketch where I'm designing a block with profile content, including an image. The block is a symbol and the image is a nested symbol inside this, with a circular mask. My problem is that when overriding the image in new instances of the main symbol, I cannot control the positioning of the image, so unless the head of the person in the new image is in exactly the same place as in the original, it will be off. Is there a way to override the position of the image?

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Welton168

2 Comments

Sorted by latest first Latest Oldest Best

 

@Gretchen549

You cannot override but I found a different solution.

Inside the symbol, instead of using one shape to place the image create another one and use the first one as a mask.

Position and scale the new shape where and how do you think the crop would be better. Then use this one to place the image.

I hope it was easy to understand what I did.

10% popularity Vote Up Vote Down


 

@Si6392903

You cannot override the position of nested elements in Sketch. You can adjust the position of an image in a mask for a regular mask, but not within symbol instances like you have created.

You can try experimenting by applying the image as a fill to the shape. It will scale the image down so that the image covers the shape. You still won't have control of the positioning, but it will dynamically scale the image based on its size to fit as much of it as possible.

The InVision Craft plugin applies image overrides like this. You just map image data (from a directory, or online source such as a json feed or unsplash), and it gets applied as a fill to your shape. When you use the repeat grid feature, it will automatically apply a different image for each instance. It is a great way to speed up populating rows like that with varied content.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme