You can drag bitmap images from Finder (macOS) or from Explorer (Windows 10) directly into shapes in XD. They then become the fill of the shape. The fill image never gets distorted as the shape changes in size. To edit the position, just double-click and edit the bitmap position or size.
- In order to mask images, remember you can go to file, import, bring the image, then add a shape on top of and then you can go object and mask with shape, but that process, takes a set of steps, right? Remember the very beginning, when we mentioned the principles of XD? One of them was, remove friction. So, how cool would it be if I could go to finder on the MAC, or Windows Explorer. On Windows, select an image and drag on top of a shape.
This shape now, has an image fill and I resize the shape, the fill never gets distorted and if for some reason I need to Reposition this, I can double click and this acts as a mask but again, this is now the fill of the shape. Pretty cool, huh? So I don't have to spend all that time and you just removed a lot of friction from your design process. Another way of bringing images is from, let's say, Google Chrome.
Here I'm using Adobe Stock, an amazing resource of images, videos, vectors, and here I'll search for surf, You will do that search, and here I have a couple of results. I can then click and drag that image from the browser, directly into the shape and its the same process. I can reposition, I can resize the shape and as you can see, I'm removing a lot of friction from that image and process.
A real used case for that, could be creating a mood board for ideas, right? Here I have a bunch of shapes and a bunch of images that can now define my mood board. Now I'm just dragging that, from Finder, directly into XD. Let's get a couple more, and one more. Well do this one.
Nice! If I happen to need to say, adjust the position, again, just double click to get a better result there. Everything else looks pretty okay, Lets show the hand and this can be more centered. So this is how you can Bitmaps from Finder or Windows Explorer directly into shapes in XD, and you can double click to edit and you can even bring images from browsers like Google Chrome.
- Understanding all tools in Design mode
- Bringing files for Photoshop, Illustrator, and Sketch
- Working with text, vectors, image fills, and masks
- Repeating elements with the powerful Repeat Grid tool
- Resizing multiple elements with responsive resize
- Using the new Assets panel to manage symbols, colors, and character styles
- Sharing symbols across files, with text and image overrides
- Creating and consuming bitmaps and vectors from CC Libraries
- Extending the power of XD using great plugins