Auto-mask behavior options
Auto-mask seems to take the nature of the css attributes "background-size: cover;"
It would be nice if we can choose it to have it behave more like "background-size: contain; background-position: center;"
This would help avoid unwanted cropping.
Would be nice to have:
- an ability to add images as fills - without creating any masks, so the image would fill the shape container.
- ability to adjust image placement in a container (Fill, Fit, or Tile)
This functionality exists in Sketch and Figma, and I really miss it in XD
Martin K. commented
I understand the scale function for images mimics mostly the behavior of an image in css. It would be nice to have the background-image properties of css mirrored in the image tool panel.
Size (cover, contain, etc.)
Repeat (x, y, etc.)
Atattchment (fixed, scroll, etc.)
Position (left, right, center, center center, etc.)
Mason Moriarty commented
This is one of the main reasons I haven't switched over into Adobe XD from Sketch. Not being able to switch from "fill shape" mask types to "fit shape" masks is critical in my workflow. 90% of the time I'm working with product images within larger web tiles (as OP illustrated). Yes, I could manually resize each asset, but you lose the time-saving feature of repeating grids if you have to manually edit each image to fit properly.
Starting in XD 9 (I think), you can now double-click on image fill to edit size and position. Subsequently resizing shape resizes fill proportionally, not quite "background-size:contain", but it will maintain centered images.
It's just necessary :)
Stephane Baril commented
Auto-Mask (dragging an image on an existing frame/shape) is great for rapid placement but with Fitting Options features, like in InDesign, it will add a better control and sync (cf. my screenshot).
InDesign Features list that will be great in Auto-Mask:
– Fill Frame Proportionally
– Fill Content Proportionally
– Align From (9 reference points)
– Crop Amount (positive and negative values)
Stephane Baril commented
Auto-Mask (dragging a picture in a shape) are great for rapid design but it lakes the ability to reposition the picture inside the frame.
So a feature to convert an Auto-Mask to a Mask with Shape would be great.
In addition to Solid Color & Gradient, another common web / mobile feature is Background Images.
I would like to see CSS-like background image control over block elements.
While the "Grid" feature works in a pinch, it's nearly impossible to maintain when your repeating image is very small, over a large artboard.
I agree, we need a tool like in InDesign.
to be able to switch the content from a grid to fit in the space instead of fill it.
because sometimes the content we want to use can be cropped because of that.
If you drag an image (from Finder or other app) onto a shape in XD, then resizing that shape will indeed fit to the object proportionately.
Are you creating a mask in a different way, maybe? Currently masks created manually don't resize the image to fill the mask -- maybe that's what you're seeing?
When making a mask with a image, it would be great if there was an option for auto fill the object to the frame proportionally. Like the feature in indesign. There you have different options (screenshot, its dutch hope you guys know what I mean).
The shortcut I use a lot is Fit Content Proportionally when I change the size of a shape.