You can watch a tutorial on cropping images here. The image properties panel also allows you to crop or mask images to only show a selected portion of them. Just type the first few letters of the image name and it will appear in the list.

This also means that you can add your images to your wireframes from the Quick Add box. The 'Assets' category will show all of the images that you've added to your project. Once an image has been added to your project it will show up in the UI Library so that you can easily add it to any wireframe in your project. You can later replace it with an image using the image properties described above. If you don't yet have an image ready or want to use a placeholder image to keep your wireframe low-fidelity, you can add an Image control from the UI Library and it will show up as a box with an 'X' through it.

The 'Sketch it!' checkbox will convert your image to a black and white line drawing version.

Clicking the square with an 'x' inside it will revert the image to the default placeholder image.

Click the rotate icon below the image drop-down to rotate your image in 90-degree increments.

Files downloaded from the web will be copied to your project.

Wireframes supports GIF, JPG/JPEG, and PNG image file formats.

Clicking the cloud opens a dialog to add image from the web by entering a URL directly or by searching Flickr.This is the same as dragging and dropping an image file. The '+' icon next to the drop-down box allows you to add an image from your computer.Opening it allows you to select a different image from the images you've already imported to your Assets. The drop-down box shows you the name of the current image.The properties specific to images are as follows: You can modify the image properties in the Property Inspector, similar to other UI controls. Doing this will place the image into the selected wireframe and copy the image file to your Assets so that you can easily reuse it in other wireframes. Adding Images in Wireframes ViewĪs mentioned above, dragging an image from your computer to the editor will add it to the canvas. Read on to learn more about adding and using images, icons, and other assets to your projects. Note: The image file formats supported are PNG, JPG/JPEG and GIF.

Google drive logo icon