Creating your prototype

Get started with Prototyping by creating your first Marvel project 🤓

 


Its super easy to do:

  • click 'create project' 
  • give your project a title and choose a project type
  • click 'create project'
  • start adding screens :🎉

Marvel supports screens in a PSD, PNG, JPG or GIFs format & you can add these in three ways:

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

Marvel Plugin for Sketch 
Our free plugin for Sketch allows you to send your artboards from Sketch directly to Marvel and quickly sync your changes. Find out more about the plugin

Import your screens 
Click Add images to upload designs from your computer, Google Drive, Dropbox or Box. You can also drag and drop your screens directly into Marvel.

Now you have your screens in place, its time to bring your project to life by linking them together using hotspots: 

How to link screens together:

  1. Hover over any image in your project and click view
  2. Once the editor opens, click and drag anywhere on the image to draw a Hotspot
  3. In the image selector pop up, select the destination screen for your hotspot
  4. Click the X to close the popup
  5. Continue linking more hotspots and screens
  6. Hit done or play in the top right-hand corner to finish or play your prototype

Your prototype is looking pretty good but lets make it look really realistic using transitions:

How to add a transition:

  1. Select any image in your project and click view
  2. Once the editor opens, click and drag anywhere on the image to draw a Hotspot
  3. In the Edit menu which pops up, select the destination screen for your Hotspot
  4. Click the Screen Transitions tab
  5. Select a transition and close.

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