How to create your first prototype

 

 

Welcome to Marvel! In just a few minutes you'll be up and running with your first prototype.

Let's get started!

Step 1: Create a project

  1. Go to Projects
  2. Click Create Project and give your project a name
  3. Select a device

Now your project is set up, it's time to start adding designs!

Step 2: Add your designs

  1. Click Add Images and upload designs from your computer or sync from Dropbox, Google Drive or Box. Marvel supports PNG, JPG, GIF and PSD.

Wireframe or design in Marvel

Alternatively you can wireframe and design directly in Marvel! Click Design to get started.

Use 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 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.

Step 3: Link your screens together

      You can create interactive areas on your designs to link them together. We call these areas 'Hotspots'.

Whenever a user clicks or taps on that area, it will link to the screen or content you have selected. Marvel has a number of popular ways to move between screens including Anchors, hovers and more.

  1. Hover over any image in your project and click Edit
  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 Close to close the popup
  5. Continue linking more hotspots and screens
  6. Hit Done to close the editor

Step 4: Play your prototype

  1. Click Play in your project to open the prototype .

Need to view on a mobile device? Click Share and Email and SMS to send yourself the link to view. You can also use our iOS and Android apps.

Step 5: Share your prototype

Once your happy with your prototype, you can share it with others in just a few clicks.

  1. Click Share and select to share either the URL or via Email and SMS
Was this article helpful?
94 out of 118 found this helpful

Articles in this section

See more

    Still have a question?

    Submit a help request