Adding, replacing and managing screens

Adding your screen to projects

Marvel prototypes are made up of screens which you can upload in a number of different ways:

Upload from your computer

  1. Open any project
  2. Click Add images to upload designs from Dropbox, Google Drive, Box or upload directly from your computer.
  3. Or drag and drop them from your desktop


Wireframe and Design in Marvel

Use our Design tool to create your screens from scratch within Marvel. Learn how to use this here


Upload from Sketch

Our Sketch plugin allows you to send your artboards from Sketch directly to Marvel and quickly sync your changes.

Download the plugin here or read help article.


Upload from Photoshop

You can drag and drop Photoshop files (PSD) into Marvel and they will be automatically converted into PNGs. 

PSDs can also be added from Dropbox, Box and Google Drive.


Upload photos and sketches using our iOS/Android app

If you start ideas on paper, you can upload your sketches using our Android and iOS apps. Download from the Apple App Store or Google Play Store


Replacing screens

There are three ways to replace your screen:

Replace a specific screen

  1. Select any image in your project and click view
  2. In the top left-hand corner select replace
  3. Choose a screen to replace the existing screen


Replace using drag and drop or Add Images

  1. Select any project
  2. Drag and drop images from your computer into the project or click Add Images from computer
  3. Any images that have the same file name as ones already in your project will replace automatically.


Replace using Dropbox, Google Drive or Box

If you have added files from Dropbox, Box or Google Drive, they will automatically sync whenever the file updates.

You can force a sync to happen by clicking Add Images and then select the file again from the cloud service you originally selected.


How to replace screens with the Marvel plugin for Sketch

If the screen was uploaded with Sketch, you can use the Sync or Sync all buttons in the plugin to replace.

If you would like to replace a different screen than the original, click on Marvel in the Sketch menu and then Relink/Replace from the Advanced menu


Reordering screens

You can change the sequence of images by clicking and dragging any thumbnail in your project.


Renaming screens

You can change the display name of any screen by clicking the name on any thumbnail in your project.


Make a copy of a screen

  1. Hover over any image in your project
  2. Click on the Options button
  3. Select Make a copy


Delete a screen

You can delete any screen from your project in just a couple of clicks. 

  1. Hover over any image in your project
  2. Click on the Options button
  3. Select Delete 

You can delete multiple screens at the same time by selecting the checkbox on the left of the thumbnail.

Was this article helpful?
15 out of 82 found this helpful

Articles in this section

See more

    Still have a question?

    Submit a help request