Learn how to prototype web and mobile apps

How to create interactive wireframes from images

Create interactive wireframes from image files and screenshots in no time, using hotspots and transparent input elements.

First, you need to add images to your wireframe. You have several ways to do this:

  • You can start a wireframe from image files. Just create a new prototype and choose to start it ‘from images’. If you select the option “Include images in prototype”, Justinmind will create a screen for each of the images you’ll upload.

Create interactive wireframes from image files

The “Link to image files” option is very useful if you want to build your prototype whilst also working on it in another design tool such as Adobe Photoshop or Illustrator.
It will give you the freedom to reload images in your prototype when you make changes in your editor. The images will be updated whenever the remote files are modified. You can embed them manually later on by choosing the option “embed in prototype”.

You can choose to link images when you start a new prototype with images or afterwards, when you add an image in your prototype.


  • You can drag an Image widget onto the canvas, and then double-click on it to select the image file you want.

Image widget in your interactive wireframes

    • You can drag the image files directly from your file system to the canvas.
    • You can click the Browse option under the “Edit -> Image” menu in the main application toolbar when the image widget is selected.
    • You can click the Add Image or the dotted square option in the properties panel.

Image actions

When you have an image in your prototype, you can perform multiple actions with it. If you view the context menu from an image component, you can find some image-only commands. Those commands are also available in the image toolbar and the image menu bar:

  • Browse: it will let you explore your file system to select an image file that will be displayed on the image component;
  • Open: opens the image with your default editor
  • Open container folder: opens the folder that contains the image file
  • Crop: adjusts the bounds of the image file
  • Flip horizontal/vertical: invert the image across the x- or y- axis
  • Set original size: changes the size of the image component restoring the size of the image file
  • Embed in prototype: embeds your linked image in he prototype file
  • Clear: clears the image file displayed. An image placeholder is displayed when no file is set on the image component.

Note: When using the crop or flip commands, the image will lose the “link” status and will be embedded without warning

Losing the link relationships

If you have a linked image from an external device and you lose the connection, or if you delete the image file from your file system, Justinmind is not able to continue refreshing your image, but you will not lose the last available image or the link status. The image is stored inside the working folders of your prototype, so if anything happens, there is a copy of the last change you made. You will know that the link is broken if there is a warning symbol in the top left-hand corner of your image.

Once the connection is restored or the image has been put back into its original folder, the icon will disappear and the images will be updated when you modify them.

Interactive images

Once you have your image files inside Justinmind, it’s time to make them interactive. For that, we will use the Hotspot widget.

  • Drag the Hotspot widget over the sections of the image you want to make interactive, such as buttons and menu items.
  • Drag the Hotspots from the canvas to the relevant screen in the Screens tab in order to create navigation links.

You can also turn the input sections you have in your images into real ones, thanks to transparent input elements. For instance, if you have an input field in your image and you want to make it interactive, follow the instructions below:

  • Drag the Input Text Field widget over the place of your image where there is an input field.
  • Select the widget, go to the Properties tab and customize its size.
  • Set the background to transparent and remove the border.

Interactive wireframes transparent input element

The same steps can be followed for other input elements, such as buttons.

Special note for retina displays: When an image is inserted in Justinmind, it doesn’t lose any quality even if it is resized. Therefore, if you use a retina image (coming from a design of an iPhone app, for instance), and you resize it inside Justinmind, the image will keep the retina quality when you will visualize it on a retina display. 

You can also save any image placed in Justinmind to your local folders. This comes in handy when you want to save an SVG vector file with the precise color you’ve been using, for instance.

Tip: save SVG files as PNG if you want the image to retain its color properties.

Next tutorial >  Your interactive wireframes: Embed videos and html content


  1. Ivan

    September 16, 2014 at 5:38 am

    Once you batch import your images to set up a new project. Is there a way to change the device template type or orientation? At the moment I’m importing landscape iphone layouts but it defaults to a portrait iphone layout in the workspace…even though I chose landscape in the beginning for a new project….

    • admin

      September 16, 2014 at 7:41 am

      Yes, you can change the layout of the pages in the properties menu. Just click on the background of the page or the page in the list of screens and change the orientation in properties. You can set the default orientation of the device when simulating through the ‘gear’ icon next to the simulate button.

    • Smaranda

      June 26, 2015 at 11:20 am

      But you can’t change the size of the screen. it’s a bit stupid actually. so great to import images directly, but it only takes this default screen size that is not connected to the image size at all. i am trying to use this feature for a web prototype and it’s just picked a random screen size that i can’t change and therefore my prototype is all leaning to the left. kind of makes the feature useless…

      • Lidia Rodriguez

        July 3, 2015 at 7:49 am

        Hi, You can change the size of the screen by clicking on the screen on the outline tab, and then change its size properties.

        • Smaranda

          July 3, 2015 at 9:40 am

          Thanks a lot. That did it! 🙂 Oh, that’s such a relief that I dont have to find another prototyping tool. Any thoughts on why Justinmind uses Safari as the browser for simulations and not chrome which is my default browser set for the whole system?

          • Lidia Rodriguez

            July 3, 2015 at 9:43 am

            You can choose the default browser by navigating to Menu -> File -> Preferences -> General

  2. Jay

    November 18, 2014 at 4:05 pm

    I need to be able to copy Adobe Illustrator vector images directly from AI and pasting them into JIM. I can in other tools: Balsamiq, Axure, Omnigraffle. But, as I am doing a trial of JIM for our company, before we buy multiple licenses, this is an important feature. I have been searching for over an hour trying to find the way.

    I saw that I should be able to drag and drop, but that isn’t working from the latest AI to the latest JIM.