Prototyping using the iOS app

Need to present your project offline? Or fancy killing a long train journey? Prototype offline and on-the-go with our iOS app ūüėé



Get Started with Mobile Prototyping
You can download the Marvel app for iOS from the iTunes App Store.

Download the app here.

To create a new project:

  1. Tap Create a project or the '+' button to create a new project
  2. Give your project a name and select the screen type
  3. Hit done in the top right hand corner

When you've created your new project and given it a name, the next step is to add some screens. There are 5 ways of adding screens to your prototype:

Add screens to your project using the App's design tool

  1. Tap + to add screens
  2. Select Design 
  3. Use the icons in the bottom menu to add text, shapes or upload images from your phone. Scroll along the bottom navigation to see more options to the right. You can upload from our library of icons, stock images and avatars by clicking on the search icon. 
  4. When you've finished creating your screen, hit the done button in the top right-hand corner

Add screens to your project by taking pictures on your camera:

  1. Click + to add screens
  2. Select camera
  3. Agree to give Marvel access to your camera 
  4. Take a picture and crop to adjust size
  5. If you prefer to sketch by hand, you can download and print off our templates here and take pictures of them on your phone.

Add screens to your project by uploading from your photo album 

  1. Click + to add screens
  2. Select photos 
  3. You can upload 10 photos at a time but this can be repeated multiple times 
  4. Hit done in the top right-hand corner to confirm 
  5. Crop your image to size

Adding links and transitions to your project

The penultimate step in creating your project is to link your screens together and add transitions to turn your project into a fully interactive prototype. 

  1. To get started, you'll need to have at least 2 screens in your project 
  2. Tap on any of the screens in your project to open the editor
  3. Tap the 'add link' button in the top right hand corner
  4. The red square which pops up is the Hotspot. You can move this and resize this over any area on the image (when the user taps one this Hotspot, it will link to another screen)
  5. When you're happy with the position of the Hotspot, tap the 'link to image' icon directly over the Hotspot
  6. Choose the target (this is the image you want to link to) in the bottom navigation
  7. Tap on the transition tab (next to target) - add a transition such as slide left, fade, etc
  8. Hit the green 'done' button at the bottom to save the Hotspot
  9. Tap on your next image to open the Editor again. Repeat the same steps to add another Hotspot
  10. When you've finished adding your links and transitions, hit the green play button in the bottom right-hand corner to play your prototype!

Rearranging your screens within your project

To rearrange the order of your screens using the iOS app:

  1. Head to your project list (the first tab in the app)
  2. Tap on any project to open it
  3. Tap and hold an image
  4. Drag it to its new position 
  5. Repeat for each image you want to reposition 

Playing your project
To play your project using the iOS app: 

  1. Long press (tap and hold) is a function used to start a project. It is also used to exit a project.
  2. If you're trying to start your prototype and see this image, tap the screen with one finger and hold for a second - this will start your prototype
  3. When you're finished playing your prototype, tap and hold again to exit



To delete a project using the Marvel iOS app:

  1. Head to your project list
  2. Swipe left on the project you wish to delete 
  3. Tap on the trash can icon
  4. You'll be asked to confirm you'd like to delete the project > tap delete 

To share your project using the app:

  1. You need to be logged in to your account on the app
  2. Tap on the project thumbnail to open it 
  3. Hit save/share in the top right-hand corner

You can send the message by typing in an email address or a mobile number to share by SMS. You can also copy and paste the url or open in Safari or share on social media by tweeting/posting on Facebook

Note - whilst you're playing your project, you can exit any time using long press (tap your screen and hold for 2 seconds). When hit the play button to play your prototype, the app will ask you to long press to start and finish playing your prototype 

Interested in our premium features? Check out our plans page.