Marvel Entertainment FAQs

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

Go to Projects

ClickCreate Projectand give your project a name

Select a device

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

Step 2: Add your designs

ClickAdd Imagesand upload designs from your computer or sync from Dropbox or Box. Marvel supports PNG, JPG, GIF and PSD.

Wireframe or design in Marvel

Alternatively you can wireframe and design directly in Marvel! ClickDesignto 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.

Hover over any image in your project and click Prototype

Once the editor opens,click and draganywhere on the image to draw a Hotspot

In the image selector pop up, select the destination screen for your hotspot

ClickCloseto close the popup

Continue linking more hotspots and screens

HitDoneto close the editor

Step 4: Play your prototype

ClickPlayin your project to open the prototype .

Need to view on a mobile device? ClickShareandEmail and SMSto 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.

ClickShareand select to share either theURLor viaEmail and SMS

Want to make your prototype more realistic in just a few seconds? Fixed headers, footers and scrolling is a great way to make that happen in a couple of clicks.

How to add a fixed header or footer

Fixed (or sticky) headers and footers are areas of your screen which remain static, while you scroll the rest of your screen. They're useful forthings like tab bars or navigation headers.

Follow these simple steps:

Open Marvel Editor by clicking onany of your images

Slide the 'fixed header' and 'fixed footer' bars, located on the left hand side of the image

You can choose any length of header or footer for either one - the pixel (px) indicator on the right hand side of the image, level with the bar, shows how many pixels from the top or bottom the fixed area will be.

How to make a design scroll

Marvel automatically scrolls any long designs you upload so you don't need to do a thing

If you're importing your screens, your prototype will automatically scroll if the length of the screen is longer than the viewport of the device you're viewing it on. We have a guide to the correct screen sizes for your device here.

If you're using our Design Tool to create your screens,learn how to change your screen size here.

Note: we don't currently support horizontal scrolling but if its something you want, get voting here.

Keep scroll position

The 'keep scrollposition' feature allows you to set-up a hotspot on one screen, and have the destination screen load at the exact same scroll position as the user was on the previous screen. This is a great tool for creating chat and messaging prototypes, where the conversation often loads at the bottom of each screen.

Select any image in your project and clickedit

Once the editor opens, click and drag anywhere on the image to draw a hotspot

In the image selector pop up, select a destination screen > then select theKeep scroll position on the left

Hitcloseto save your changes

When youplay your prototype and click on the hotspot,it'll keep the same scroll position as it transitions to the next screen.

Archiving is a great way to manage projects you no longer need to access.

Once a project is archived, it becomes inactive. That means it will no longer be accessible to edit or view the project, including collaborators or people who have access to the share link.

Free plan limits

When you unarchive a project, it will count towards your your active project limit. That means you need to make sure you're not already using the maximum 1 active project on the free plan. If you are, simply archive another project or upgrade here for unlimited active projects. Archived projects do not count toward your limit.

How to archive your project:

Go to your Project list

Hover over a project to bring up Options

Select Options on the project thumbnail > Archive

Hit Yes Archive to confirm

How to find your archived projects:

Go to your Project list

Click the Menu icon (3 lines)

Select Archived by me

How to unarchive projects:

Go to your Project list

Click the Menu icon (3 lines)

Select Archived by me

Hover over a project and clickUnarchive

This project can now be found by headingdirectly to your full project list and the share link will be active again

If you have strict IT and access requirements, we have several options to lock down Marvel accounts and projects.

IP Restriction gives you the ability to limit access by specifying a range of IP addresses for the account.

Once IP addresses have been defined, login or access from other IP addresses will be denied.

Available on Marvel Enterprise Platform

Speak to the Enterprise team about getting IP restriction set up for your organisation. Click here.

We do not offer refunds when you switch to the free plan after using the paid plans.

You have full control of your plan and can switch to the free plan at any time in your account area.

If you are switching between the paid plans, any unused time will be pro-rated and applied to your new invoice.

The Handoff Tool is the ultimate bridge between your design and development teams in Marvel.

Handoff automatically turns designs and prototypes into pixel-perfect development specifications including code and assets, right next to the interactive prototype.

With Handoff, your project in Marvel isthe spec doc - No need for the time-consuming task of red-lining or creating never-ending PDFs each time your design changes. Simply share your Marvel prototype with your developer and they can get all the information they need to create the screens to your exact specification. Everything stays updated in real-time so youll always know that Marvel is the source of truth for your project.

Click here to try a demo of Handoff

How to get started

Enable and view Handoff on yourprojects

The Handoff tool is automatically enabled for images synced from Sketch or images created using our Design tool.

If you're syncing artboards from Sketch, please ensure you're using the latest version of the Sketch plugin which you can download here and also set your artboard as exportable from Sketch (select the whole artboard by clicking on its title > click the 'Make exportable' button in the right-hand Inspector panel)

Enabling/Disabling Handoff on Sketch uploads

When you sync your artboards to Marvel, after clicking the 'sync all' or 'sync selected' button, you will see this pop up:

Here's how:

The Handoff data and export controls can be found by clicking the settings icon. You can disable or enable Handoff syncing by unchecking or checking the 'Sync Handoff data' checkbox.

Is the Handoff button greyed out in Marvel?

This is likely because the image wasn't uploaded from Sketch or Marvel's built-in Design Tool.

Access Handoff:

Open your project and hit the Play button in the top right-hand corner

In the bottom left-hand corner of the screen, click on the Handoff button to access the developer specifications and assets

Note: If the designs havent been uploaded using Marvel for Sketch or our Design tool, then the button will be greyed out.

Using Handoff:

Once Handoff is open, its an absolute breeze to start getting measurements, code and assets.When you first enter Handoff without any elements selected, youll see thescreen level properties. Here youll find two sections: Artboard and Assets

Screen-level details Here you'll find information on the entire screen Document colours A list of colours defined in the Sketch file, click any to copy the value to your clipboard Fonts A list of fonts within the screen Columns Displays the grid information in the Sketch file

Downloading assets

The Asset section stores all the layers and assets for the screen which you can download individually or as one ZIP file with everything contained.

You can export the same element in multiple sizes e.g. 1x, 2x etc based on your layers.

Note: Sketch users will need to mark layers as exportable in the formats needed!

Select the element in your Sketch artboard you want to show as an asset in Handoff

Click the Make Exportable button at the bottom of the Inspector panel on the right

When a layer has been marked as exportable, a new view will appear in the place of the button. Here you can adjust and define the settings for export and these settings will be applied when the layer is exported. Youll also see a preview of the asset just above these settings.

When you upload your artboard to Marvel and view the screen's Handoff, this element should show as an asset available to download

How to download an asset:

Click on the Handoff buttonin the bottom left-hand corner of your screen

In the Handoff menu on the right, switch to the assets tab

Download any individual asset by clicking on the download button directly underneath the image of the asset

Alternatively, you can download all available assets for this screen by hitting the download all screen assets button - this will download a ZIP file with all all the assets from that screen. To access the assets, open your download folder, find and double-click on the ZIP file to unzip all the individual assets.

Element details

If you want to get more detailed information on any element within the design, click to select then view in the sidebar. Here youll find: Assets If the select element contains an image, youll see that available to download. Properties Includes width, height and X/Y coordinates of the element. Appearance The colour values for the element selected Shadows Grab the colour, opacity, X/Y coordinates, blur and spread of shadows. Fill Download any fill images or view the colour. Typography Includes typeface, size, weight, spacing and alignment Content This gives you the text inside any type layers and the ability to copy to clipboard. A huge time-saver!

AssetClick on any image within the design to download that asset CSS, Swift and Android Grab the CSS, Swift and Android code for the element to quickly copy and paste into your code-editor

CSS - (web projects) measurements are displayed in pixels

Android (XML)- measurements are displayed in dp

SWIFT- (iOS) measurements are displayed in points

Distances between elements

To see distances between elements, simply hover your mouse over to highlight the layer and display values.

Switching units and code

We now have a toggle that allows you to switch measurement units and code language in Handoff!

If you have a specific element selected in Handoff, go back to the main Handoff view in the panel and you'll see under the 'format settings' section you can toggle the units and the code.

.

Student and Teacher DiscountMarvel for Education offers 70% off all our yearly pro plans. The cost for 1 year is $48.

How to apply

Please follow this link to apply

Note - currently, our educational discount is only available on yearly plans, they are not available for monthly plans.

Can I play my project offline?

Ever had a meeting or presentation where the WIFI lets you down? We've added offline playback to our Android app to make your life easier.

Once you play a prototype on the app, it will be stored in memory so if you play it again, it will load instantly without the need to download images.

Note - some content such as maps and other embeds will still need internet connection to play

Does my app sync my work to my web account?

Yes, all projects you create in your account within our app, will also appear in the web version of your account and vice versa :)

For content to appear, please refresh the web page or if you're in the app - you can pull to refresh.

Why can't I edit my design screens?

Currently, only screens which were created using the app can be edited on the app.

If you created your screen using Marvel on web browser, you'll need to head back to web browser to edit your screen. You can get help with this here.

We're working on creating cross-platformcompatibility which means in the future, you'll be able to edit screens anywhere regardless of where they were created.

Why won't my GIF play on the Android app?

Unfortunately, the Marvel Android app doesn't support GIFs at this time due to the limitations of the Android platform.

For now, if you open Chrome mobile browser on your Android, your GIF will play in there.

How can I view someone else's project via the Android app?

To view someone else's project in the Android app, the project owner will need to add you as a collaborator.

Ifyou're creatingyour screens outside Marvel and importing them in, the correct screen sizes are as follows:

iOS-based devices

iPhone 4, 4s - 640960

iPhone 5, 5c,5s - 6401136

iPhone 6 - 7501334

iPhone 6 Plus - 12422208

iPhone 7 - 750 x 1334

iPhone 8 -750 x 1334

iPhone X -1125 x 2436

iPad Air - 7681024 or @2x

iPad Pro (12.9 inch) - 2732 x 2048

iPad Pro (9.7 inch) - 2048x1536

Apple Watch - 312x390

Apple TV-based devices

Apple TV 4K - 1920x1080 (more information here)

Apple Watch-based devices

Apple Watch 38mm- 272x340

Apple Watch 42mm- 312x390

Android-based devices

Nexus 5, Galaxy S5, HTC One - 10801920

Best sizes for web-based designs

When using a website prototype type, you're free to use any resolution. We recommend picking the resolution of the device you're prototyping for:

4:3 resolution -1024768

Common notebook, netbook or laptop resolution -1368768

5:4resolution - 12801024

Full HD resolution -19201080

MacBooks

MacBook Air (Non Retina) (11 Inch) - 1366x768

MacBook with Retina display (12 Inch) - 2304x1440

MacBook Air (Non Retina) (13.3 Inch) - 1440x900

MacBook Pro (Non Retina) (13.3 Inch) - 1280x800

MacBook Pro with Retina display (13.3 Inch) - 2560x1600

MacBook Pro with Retina display (15.4 Inch) -2880x1800

iMac's

iMac (21.5 Inch) - 1920x1080

iMac with Retina 4K Display (21.5 inch) - 4096x2304

iMac with Retina 5K Display (27 inch) - 5120x2880

Apple Displays

Apple Thunderbolt Display (27 inch) -2560x1440

To check your display's resolution, use this tool. For more information about screen sizes of different devices, check out Paintcodeapp's Ultimate Guide to iPhone Resolutions or screensiz.es.

Note- if you're creating your screens with our Design tool, the correct screen size will automatically be created for you when you select the device type as you're creating the project.

Introducing our newest feature - Team Libraries - which enables teams to collaborate on designs by sharing assets and components; there is no need to create them from scratch every time.

The Team Library will provide an alphabetised list of components created by yourself and your colleagues which can be inserted into any design, any time.

Get started

Adding a new asset to the library:

Group your elements together to create your asset

Click 'add to library'

Give your component a name

Click 'add to library'

Thats it This asset can be accessed by yourself or your team members any time.

How to add a shared asset to your designs:

Click the bucket icon in the left hand menu

Hover over the asset you would like to use

Click 'add'

This asset will now be available to use within your design - feel free to edit it by double clicking the individual elements. These changes will not change the original component in the library.

To delete a component:

Click the bucket icon in the left hand menu

Hover over the asset you would like to remove

Select the checkbox in the top-right

Check that, and confirm in the modal

Who can use Team Libraries?

Team Libraries are available on our Team Plans. Team members who have editor, admin or owner status will have full access to the Team's Library

Layers allowyou to add elements over the top of your screens as hotspot destinations. It's perfect for adding realisticoverlays such as:

Action sheets

Sidebar menus

Modals

Popovers

All you need to do is upload the layer(s) directly to Marvel, as you would any other screen.

How toadd a Layer:

Select any image in your project and clickview

Once the Editor opens, click and drag anywhere on the image to draw a hotspot

In the image selector pop up, selectthe destination for your hotspot

The layer an image option on the left will become available, click the button

Position your layer by dragging the image in the editor, you can also change the opacity and background colour

Click save layer

You can see an example of layers in action in this prototype:

Layer to layer:

Now you've got the basics, lets take it a step further by using our layer to layer feature:

To addthe layer-to-layer feature to your own prototype:

Open any screen in the Editor

Click and drag to draw a hotspot

Select the layer image from the menu at the bottom > click on the 'layer' button towards the left of the menu

Open the layer image itself within the editor > click and drag to draw a hotspot on the image

Select another layer image from the menu at the bottom >click on the 'layer' button again

You can see an example of the layer-to-layerfeature in action below. Please note that the layer to layer feature only allows one layer to be open at any time.

Introducing Scrollable Layers

We have recently released the latest update to layers; scrollable layers! You can add another dimension of sophistication to your prototype by using long menu panels or modals which you can scroll to see the full content.

To create the effect of a scrolling element within your design:

Select any image in your project and clickview

Once the Editor opens, click and drag anywhere on the image to draw a hotspot

In the image selector pop up, selectthe destination for your hotspot

The 'layer an image' option on the left will become available, click the button

Position your layer by dragging the image in the editor, you can also change the opacity and background colour

Click allow layer to scroll

Click save layer

We know how important it is to present your work without a hitch. That's why Marvel has some great features for showcasing your prototypes without aninternet connection.

This works particularly well with larger prototypes containing 50+ screens and allows your clients and team mates will get the best possible experience each and every time.

There are several download options available for your projects, click the 'Download' button in the project dashboard.

Note: Downloads are part of our paid plans

Offline downloads are one of the many awesome features on our paid plans. Upgrade here.

Download your prototype to your desktop (ZIP)

If you need to play your prototype offline on your desktop, select the option to download a ZIP file containing everything you need to run your prototype.

Unzip the file and double click on index.html to play

You can also upload the contents of the ZIP file to your server if you wish to run it on your own domain.

Download your prototypes as PDF

If you want to print or share your prototype as a document, our PDF feature allows you to turn each design into a separate page of the doc.

Download your prototype to your Android mobile device

Our offline download feature for Android wraps your prototype in a native Android app, then generate a download URL which anyone can usetoinstall directly to the device.

To get started, select the Android option in the download menu.

Note- currently, offline downloads are not supported on Android tablets. They can only be used on Android mobile phones.

When using Android download, make sure your OS is up to date and be sure to authorise Marvel:

Authorise Marvel to install and run the app on your phone:

If you areseeing this message onyour phone:

You need to authorise Marvelon yourphone by heading to your deviceSettings>General>Profiles & Device Management > trust Marvel Prototyping

Download screens from the Design Tool

Need to download your newly created design? You can now do this in the Design Tool with one quick click!

Your download will save straight to your desktop as a PNG, simply select the arrow next to 'Close' on your art board options panel.

Note: iOS downloads are no longer supported.

For different ways to display your iOS project, contact [email protected]

If you need to change your credit/debit card details, follow these steps:

Login to your Marvel account

Head tomy account

Select thebillingtab

Scroll down tocredit card>update card details

Enter your new card informationand hit the blueupdate card detailsbutton

Click on the close button in the top right-hand corner to return to your account

Users can be given different levels of access to a workspace and its projects depending on their user type and permissions. The two types of users you can add to your workspace are Team MemberorGuest.

A Team Member is a user that can access all team projects on your workspace. Depending on their permissions, members can be given the ability to edit projects and make changes to account settings.

Guests do not take up any of the seat allocations on a workspace. Guests will only be able to view projects that they have been invited to and won't have access to the user directory, invites or settings.

Each Marvel plan has an allocated number of Team Member seats per workspace up to a maximum of 6. Enterprise workspaces have the ability to include a higher number of seats and great security controls such as SSO.

Niice is a brilliant moodboard creation tool that lets you collaborate with clients and teams, visually.

This integration enables you to create beautiful moodboards using Marvel prototypes with sketches, videos, animations and more

Check out this example https://niice.co/m/5856d020ed90c918a775ad0dcf46e422

How to get started

Go to Niice.co and set up your free account

Click 'Create new board'

Select a template

Click the + button in the bottom right corner

Click and drag the Embed Media button to where you want it on the board

Paste in your Marvel Prototypes Share URL

Here's a quick guide to the options available in your prototype settings menu.

Type

Change your project setup to a different device

Select from desktop, mobile, TV and watch devices.

To find out more about screen sizes and what size your designs need to be, click here

Switch between portrait and landscape

If you need to display your prototype in landscape mode, you can do that here

here

General settings

Screen background colour

This is where you can change the background colour of the prototype. This is useful if your designs don't fill the screen.

Hide prototype navigation

This removes the controls on the bottom left of your prototype play mode, including the ability to comment, Handoff and also removes the 'Open in app' option when playing your prototype in a mobile browser.

Hide hotspot hints

If you are conducting user tests, you may need to remove the hints for hotspots so that participants aren't guided through your designs

Trim status bar

When prototyping for iOS devices, Apple disables the ability to remove the native status bar (which shows the time and battery power etc) when you view the prototype on a mobile browser.

This can be a pain ifyou add the status bar in your designs as you'll see double bars in the prototype.

To get around this, Marvel has a feature to 'trim' the status bar from your designs by cropping the exact amount of pixels from the image so the status bar only appears once.

Disable resizing images

Marvel automatically scales images down when the browser resizes. You can disable this and display your designs at full pixel size.

Scale down retina images

If you use retina images, some browsers will display them at double the size. This setting scales down the images by half.

Enable comments

Allow people to add feedback and annotations on screens

Comment notifications

This setting switches off email notifications when new comments are added to your prototype

Status bar colour

If you are viewing your prototype on iOS devices, you can select from two different styles of status bar (where the time and battery life are displayed)

Security

Add password protection to your prototype

If you want to add another layer of security then password protection is a great feature that prompts users to enter a password before viewing your prototype.

Upgrade to get this feature. Click here to view details.

Integrations

Connect Marvel to other tools and services

You can find out more about the integrations available .

The Marvel iOS app allows you to create prototypes offline, manage your account, turn hand-drawn sketches and drawings into interactive prototypes, and create high-quality, high-fidelity prototypes on-the-go wherever you are!

Download the app

You can download theMarvel app for iOS from the iTunes App Store.

Download the app here.

To create a new project:

Tap Create a project or the '+' buttonto create a new project

Give your project a name and select the screen type

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 toyour prototype:

Add wireframes and designs

Tap+ to add screens

Select Design

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.

When you've finished creating your screen, hit the done button in the top right-hand corner

Add sketches by camera

Click + to add screens

Select camera

Agree to give Marvel access to your camera

Take a picture and crop to adjust size

If you prefer to sketchby hand, you can download and print off our templates here and take pictures of them on your phone.

Add photos from your album

Click + to add screens

Select photos

You can upload 10 photos at a time but this can be repeated multiple times

Hit done in the top right-hand corner to confirm

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.

To get started, you'll need to have at least 2 screens in your project

Tapon any of thescreens in your project to open the editor

Tap the 'add link' button in the top right hand corner

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)

Whenyou're happy with the position of the Hotspot, tap the 'link to image' icon directly over the Hotspot

Choose the target (this is the image you want to link to) in the bottom navigation

Tap on the transition tab (next to target) - add a transition such as slide left, fade, etc

Hit the green 'done' button at the bottom to save the Hotspot

Tap on your next image to open the Editor again. Repeat the same steps to add another Hotspot

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:

Head to your project list (the first tab in the app)

Tap on any project to open it

Tap and hold an image

Drag it to its new position

Repeat for each image you want to reposition

Playing your project

To play your project using the iOS app:

Long press (tap and hold) is a function used to start a project. It is also used to exit a project.

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

When you're finished playing your prototype, tap and hold again to exit

https://testflight.apple.com/join/iThEULJ3

Delete a project

Head to your project list

Swipe left on the project you wish to delete

Tap on the trash can icon

You'll be asked to confirm you'd like to delete the project > tap delete

Share your project

You need to be logged in to your account on the app

Tap on theproject thumbnail to open it

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

Join Marvel iOS Beta

You can now join our iOS betastraight from the app! Please make sure you have the latest version or at least v6.10.2 - head to the Settings icon > scroll down to 'Join our iOS Beta' > join by downloading the Testflight app

Or join by using this link:

If you use Sketch to do your design work then you'll love our plugin which allows you to quickly sync your designs to your Marvel projects in just a few clicks (or keyboard shortcut!). We've also added the ability to play prototypes directly in Sketch and record your flow as an exportable video!

You can download the Marvel plugin for Sketch here.

Installing the plugin

Follow this link to download the latest version of the plugin.

Make sure you haveOS X 10.11 or later on your Mac

Close Sketch

Download the Marvel plugin here

Unzip the file and double click the 'M'iconfile to install

Select Open at the popup

Choose the option to move the download to your Applications folder

Open Sketch

The Marvel menu will now be available on the left-hand panel

Please make sure you delete any existing Marvel plugin's from your applications and downloads folder before installing a newer version.

If you see any error messages such as, "This plugin is incompatible with Sketch" please make sure you have the most up to date version of the Plugin. You can download the latest Plugin version by clicking here.

Add or sync images from Sketch to your project

Keep prototypes up-to-date with your latest design changes at the click of a button.

Open your design file in Sketch

Select the artboards you would like to sync with your Marvel project, then click the Sync Selected button (alternatively you can click Sync All to send everything)

The export settings menu will appear, select the project you want to sync to and the image size

Note: Each artboard is unique, even if they have the same name. If you create another artboard, it won't sync with the original even if it has the same name. You'll need to edit the original artboard to sync the changes.

You can alsochoose to update any Marvel image via the direct replace method:

Click on any artboard to select it

In the Sketch top navigation, head to Marvel > advanced > relink/replace with selected artboard

Click on the projects selector, this will show a drop-down of all your Marvel projects > select the project you'd like to sync to

Click on the image you'd like to replace

Hit the replace button

Play your prototype in Sketch

The latest version of the plugin comes with a prototype player, so now you can play your prototypes without leaving Sketch! The playerautomatically updates each time you sync new designs.

Click the Marvel menu in the top navigation within Sketch > selecton play or record last updated prototype

The player will open in a separate window, showing the last project you sent artboards to

Move your mouse over the window and click through the screensto move through your prototype

Record your flow as a video

If you want to quickly share a video of your prototype flow with your team or clients, you can now record your interactions within Sketch.

In the player, click on the 2 chevron arrows in the top right-hand corner of the window > click on start recording

Use your mouse to click through your prototype as normal

Click on the 2 chevron arrows again and select stop recording

Give your recording a name and click save in the pop-up dialogue

Send your hotspots to Marvel

Linking your screens has never been easier with Marvel's Sketch Plugin! Have a go at linking between screens by following the steps below.

1. Open your project in Sketch2. Select an asset you want to set a hotspot on3. Click the 'Link' button in Sketch's toolbar4. Connect your asset to an artboard with a simple click5. Repeat this across your project till done6. Sync your screens to Marvel

Want to learn more about links in Sketch? Here's how

Sketch FAQ

What is Sketch?

Sketch is design software for the Macby Bohemian Coding. You can download Sketch here.

The Marvel plugin for Sketch allows you to send and update your artboards directly from Sketch to Marvel.

How do I update the Sketch plugin?

If you're looking to update your plugin and haveMarvel Plugin v3.3 installed or later

The plugin will prompt you to install the update each time there's a newer version of the plugin.

You can check for updates by clicking on the 'M' Marvel logo in your Spotlight bar > check for updates

You'll need to restart Sketch after you've updated the plugin

How do I uninstall the Sketch plugin?

To uninstall the Marvel Sketch Plugin:

Open Sketch

Select Plugins from the menu

Select Manage Plugins

Highlight the Marvel file

Click on the settings icon below > uninstall Marvel

To uninstall the Marvel Sketch Plugin App:

Click the Marvel logo in your status bar

In the dropdown click the settings icon

Click Quit

Drag the Marvel app from your applications folder to the trash

If you now search in your spotlight search-bar for 'Marvel' - if it returns no results, this means it has been removed from all your computer folders.

If you're using a plugin version older than v3.3:

Uninstall the current version of your plugin.

Install the latest version:

My Sketch artboards are creating duplicates when uploaded to MarvelOur plugin for Sketch allows you to sync your artboards directly betweenSketch and Marvel, saving you time.

If your artboards are being duplicated when sent to Marvel, there are a few things you can check:

Which version of Sketch are you using?

Previous releases of Sketch had a bug which meant artboards which were copied were given the same project ID, creating duplicates when uploaded to Marvel. Check your Sketch app to make sure you're on the latest release.

Have you created multiple versions of the same project within Marvel?

If you've copied a project within Marvel and are trying to sync your artboards to the copied version, this will break the sync. It's best to sync to the same original project.]

How do I exclude Artboards from syncing when I sync all?

The Sync All button is a great way to bulk upload every artboard, but there might be a few artboards that are still in draft or not suitable for upload. In those cases, simply add a '_' as a prefix If you've copied a project within Marvel and are trying to sync your artboards to the copied version, this will break the sync. It's best to sync to the same original project.

In what order are the artboards uploaded to Marvel?

Marvel doesn't use the order of artboards inside Sketch, artboards are uploadedalphabetically:

The first time you upload your artboards:

Artboards will be added in alphabetical order. If you name your artboards a1, a2, b1, etc. the artboards will keep this order.

Adding more artboards later:

Artboards will be added in alphabetical order after your existing artboards. If you then add a3, b2, etc. the new order will be a1, a2, b1, a3, b2. This is to avoid overwriting any reordering you did within Marvel.

How can I change the Marvel account associated with Sketch?

To change the Marvel account connected to the Sketch plugin:

Click on the 'M' Marvel logo in your spotlight bar

Click on the settings icon at the bottom

Select logout

Select the settings icon again and sign in on Marvel web

Now that you've got the basics of Design-tool, it's time to start using a few of our advanced features.

Adding Lines

To use the line tool:

Open any new or existing Design screen

Click on the pinkline icon towards the top left-hand corner

Click and drag your mouse across your screen to create a new line

You can rotate and reposition the line by dragging its edge or you can use the controls on the right-hand panel to change its dimensions

You can also use the right-hand panel to change the colour, thickness, opacity and style of the line (dashed, solid or dotted)

Using Groups

Grouping elements take a bunch of separate elements and makes them one. It is a efficient way to change sizing, colours & alignment of several elements at once.

To group elements:

Open any new or existing Design screen

Select multiple elements by click and drag over the elements you would like to select.

Select group on the right-hand menu

If you move the grouped items, they should behave as if they're one single element

Image Masking

Simply paste your image into the shape you want. There are two ways you can do this:Drop an image from your computer directly on top of the shape

Or by using CMD/CTRL X to cut the image before clicking the shape and hitting CMD/CTRL V to paste the image directly into the shape

Rotating Elements

You can now rotate elements usingthe Design tool to give you even greater control over the layout of your designs.

Rotating is currently supported for rectangles/squares, circles/ovals, images, icons and groups. We're working on adding support for rotating text!

To rotate an element:

Open a new or existing Design screen

Click on any element to select it

Use the up and down arrows on the right-hand menu to change the rotation

/ol>

Pro tip: Have you got a computer with a lower resolution?

Computer's with an older resolution may not see opacity or radius until you click 'Tab' and 'shift' on your keyboard.

Help organise your projects clearly in order to tell the story of your work. Group images into sections based on sign up, onboarding, checkout and much more.

Open your project

Hover over the image(s) that you'd like to add to a section and click on the checkbox on the top left-hand corner

You can also mass-select a series of images to add to a section by clicking on the white space near the images, and dragging the mouse over them

On the bottom of the page, you should see a grey bar with 'Add to Section' as an option

Select 'Add to Section'

Choose to either add to an existing section or 'Add new'

Recommended Articles

Marvel 3: How to add designs to your project

Marvel 3: How to copy images

Marvel now lets you view your prototypes on the Apple Watch.

To do this, you'll need

To have iPhone 5, 5s, 5c orabove

Be running iOS 9 and above

Have the Watch app installed on your iPhone

Have the Marvel iOS app installed on your phone. You can download this here.

Your watch and iPhone need to be paired

You also need to have Marvel app installed on your watch. You can do this by opening up the watch app > Marvel > show app on apple watch

Simply open the app on your phone and then open tap the Marvel icon on your watch. You'll then be able to viewyour projects on the Apple Watch.

Prototypes which have been set to Apple watch device type will appear in Apple Watch project lists only, they will also be set with swipe through function,

One of the most popular features of Marvel is the ability to launch your prototype directly from the homescreen using an app icon.

Once the app icon is installed to a homescreen, it can launch the prototype with one tap, just like an app.

This works great for user testing or sharing your prototyp with stakeholders and clients.

How to add your app icon

Select any mobile or tablet project

Click on the project settings

Navigate toGeneraltab

Click on the app icon '+' thumbnail

Add your app icon design

How to install your app icon to your homescreen

The first time a prototype is viewed on mobile or tablet devices they'll be prompted with instructions on how to install the prototype to the homescreen.

How to view your app icon on your Android device:

Open your prototype URL on your Android device

Tap the menu icon in Chrome

Select Add to home screen

How to view your app icon on your iOSdevice:

Open your prototype URL on your iOSdevice

Tap themenu iconinSafari

SelectAdd to home screen

Remove the 'add to home screen' prompt

You can remove the 'Add to homescreen' pop-up message on mobile and tablet devices by adding?iosapp=true at the end of the share URL.

For example:

https://marvelapp.com/123j56 would be https://marvelapp.com/123j56?iosapp=true

Correct sizes for app icons

Here are the most common sizes:

iOS

iPhone 6 Plus -180x180px

iPhone 6 and 5 - 120x120px

iPad and iPad mini - 152x152px

iPad 2 and iPad mini 76x76px

Android

192px (xxxhdpi)

144px (xxhdpi)

96px (xhdpi)

72px (hdpi)

48px (mdpi)

36px (ldpi)

Our mission is to become a platform that democratises design and makes it accessible to everyone.

Now we want to open up the power of Marvel to everyone and take design to the next level.

The Marvel API gives you the power and flexibility you need to customise Marvel for your own workflow and go beyond the integrations we provide out of the box.

We've worked with some of the best agencies and tech companies in the world to create an API that's highly configurable and built on the latest GraphQL technology.

What you get access to:

Project data

Prototypes and share links

Interactions

Content and designs

Teams

Collaborators

Comments

The types of things you could build:

Automate your workflow between separate tools and services

Build internal, business critical integrations for your business

Extract rich data of your Marvel usage and productivity

Create your own moodboard, user testing, design bot or review tools

We can't wait to see what you come up with! Start here:

https://marvelapp.com/developers

Building something special? We want to hear from you!

Our goal is to bring the best integrations to our users with partners who believe in the power of design.

Platform partners get their integration listed on our website and in our application, enabling discovery and distribution.

We also work with partners on marketing and educational content, as well as events for the community.

Interested? Apply here.

Will my iOS projects appear in the web version of my account?

Yes, all projects you create in your account within our app, will also appear in the web version of your account and vice versa :)

For content to appear, please refresh the web page or if you're in the app - you can pull to refresh.

How do I play a project without an internet connection?

Ever had a meeting or presentation where the WIFI lets you down? We've added offline playback to our iOS app to make your life easier.

Once you play a prototype on the app, it will be stored in memory so if you play it again, it will load instantly without the need to download images.

Why do GIFs play slowly in the iOS app?

As Marvel is a native app, the GIF doesnt play like it does on the web. It has to be split into multiple frames and then pieced back together again. The slowness is due to how iOS plays GIFs.

Safari on iOS devices hasa limit on image size, at a certain point it will start to degrade the image so it can still be displayed without running out of memory.

The bestsolution to prevent blur is to keep your images under the limit, usually around 7000+ pixels long. Here is a great calculator for finding the image size limits on iOS.

Can I publish my prototype to the App Store?

Unfortunately it is not possible to submit your Marvel prototype to the App Store as Marvel prototypes are not supported with code.

If you'd like to publish your Android project to the Play store, click here to find out more.

Can I remove the 'add to homescreen' prompt?

You can remove the 'Add to homescreen' pop-up message on mobile devices by adding?iosapp=true at the end of the share URL.

For example:https://marvelapp.com/123j56 would be https://marvelapp.com/123j56?iosapp=true

Does the iOS app work with 1Password?

We support sign-in with 1Password on the Marvel iOS app.

Toset it up:

Sign-up to 1Password - you'll need to have a family or team account

Install the 1Password app on your phone and verify your details

Add your Marvel sign-in details to 1Password onthe 1Password app

You'll then be able to sign-in to the app with 1Password every time after that

Unfortunately, it's not possible to save your Marvel password with 1Password if you're creating a new account via the Marvel iOS app. You'll need to head over to the 1Password appto save your password - you'll then be able to use it to login to the Marvel app each time after that.

If you decide that you no longer need a project, and don't want to keep it in your archives, then you can delete it by following these steps.

Hover over the project that you'd like to delete

Check the box on the top left-hand corner of its thumbnail

Click on the red 'Delete' at the bottom right-hand of the page

Confirm that you'd like to delete the project

Once your project is deleted,all of its images, hotspots and access to feedback will be gone too.

Recommended Articles

Marvel 3: How to create a prototype

Use design-tool to create beautiful designs and turn them into prototypes.

You can design directly in your browser without needing to download any software.

The tutorial shows you all the steps to create your first Canvas including:

Creating your project

Adding a Canvas to it

How to add text, shapes and images to your Canvas

How to save your Canvas

How to share your project.

To edit a design-screen or an imported screen

Hover over the Designimage

Click on the Edit Design link at the bottom left-hand corner of the image

Make your changes

Hit the 'close' button in the top right-hand corner

here.

Note: You can add elements over imported screens but you can't edit the intricate detail of the screen within Marvel.

Adding text to your designsYou can easily add text to your designs to better communicate your ideas and connect with your audience.

How to add text:

Open any new or existing Design screen

Click on the blue text icon towards the top left-hand corner

Double click on the sample text which appears and start typing

You can also change the font type, size, colour and other attributes using the settings on the right

Note: Design Tool currently supports characters from Chinese, Japanese & Thai. Let us know if you would like to see other characters supported

Adding Shapes

Inside your design screen, you will see a tool-bar along the right hand side. Here, you can add squares and circles at the click of a button. Once added, you can change the dimensions of these shapes by clicking and dragging the sides of the element.

Adding Images

With Design tool, you can either import your own images or you can choose an image from our royalty-free stock image library.

To import an image in to a Designscreen:

Open your project

Hit the Design button to create a new canvas screen

Click on the orange image icon in the left navigation

Select the image you want to import

Hit'choose' and the image will be added directly toyour canvas

To search and add an image:

Open any new or existing screen in the Design tool

Click on the purple assets icon towards the top left-hand side of the screen

Select stock-photos

You can either scroll through to find an image you like or use the search bar at the top to search for a specific type of image

Click add to add theimage to your own design

You can click and drag the corner of the image to resize it to your preferred dimensions

Adding Icons

Icons are a great way of helping users navigate your prototype to let them know the function of different buttons.

To search and add an icon:

Open any new or existing screen in the Design tool

Click on the purple assets icon towards the top left-hand side of the screen

Select icons

You can either scroll through to find an iconyou like or use the search bar at the top to search for a specific type oficon

Clickaddto add the iconto your own design

You can click and drag the corner of the iconto resize it to your preferred dimensions

You can also double-click it to select it, then use the settings on the right to change the colour and other attributes

Changing the background colour of your screen

Adding a background colour is a great way of adding an extra layer of depth to your prototypes.

To change the background colour:

Open your Design screen

Click on the settings icon, next to the screen name (in the top left-hand corner of your Design screen)

This will open the settings menu on the right-hand panel of the screen

Click on background colour

This will open the colour picker for you to change the background colour for theentire screen

Shortcuts; copy, paste, undo, zoom

To speed up the design-process, you can use our handy shortcuts.The 'cmd + c' and 'cmd + v' shortcuts will allow you to copy and paste elements in the Design screen.

You can also copy and paste elements between different screens either within the same project or between screens in different projects using the same'cmd + c'and'cmd + v'shortcuts.

If you make a change to your design which you want to revert, it's easy to undo this.There are two ways of doing this:

Use the 'cmd + z' shortcut to undo and the'cmd + y' shortcut to redo

Alternatively, you can use the back and forwards arrow buttons in the bottom right-hand corner of the Design tool to undo/redo any action

To center the design on the screen - 'ctrl + 1'

To zoom out - 'ctrl + -' and tozoom in - 'ctrl + +'

Marvel has built-in design and wireframing modes meaning you can quickly add screens to your project without any additional software.

Designs are automatically enabled with Handoff code, specs and assets too!

Open the Design Tool

Create or view aProject

Click on the Design button on the left

Use the tools on the left to create your design

Hit close in the top right-hand corner to save and publish your changes

Add wireframes

The built-in page switcher gives you the ability to add new designs and change between your existing ones without ever having to leave the design tool.

To add a wireframe element to your screen:

Open your project and hit the Design button to create a new canvas > click on the purple Assetsicon

Find the element you need and clickAdd

The great thing about our assets is that they're fully customisable, meaning you can change an asset to suit the look and feel of your project.

To customise a wireframe asset:

Once the asset has been added to your Design screen, double click on it > you'll be able to double click on each element within an asset to individually change each item.

You'll now be able to edit the individual components. Click on the component you want to edit > use the customisation settings on the right-hand side to edit it >

Changes to the asset are automatically saved when you click outside the asset group

Design your screen

If you want to create designs using your own elements, the toolbar on the left has square, circle, type and line available.

Each element you add can be edited using the inspector on the right hand size, including size and colour.

Adding images, stock photos and icons

Our tool has over 1 million stock photos and icons (from Unsplash and Iconfinder) available for you to use and quickly create your designs.

Click the add images button to open the menu and select Stock Photos or Icons.

If you would like to add images from your computer, click Uploadfrom your computer or drag and drop them onto the canvas.

Switching between screens

The built-in page switcher gives you the ability to add new designs and change between your existing ones without ever having to leave the design tool.

The page switcher can be found in the bottom left corner of the screen.

Switch between your screens by pressing the left or right arrow.

Add new screens

Click the "Add design" button to add a new design. The new screen will be placed after the last design in your project.

Make a copy of your design

If you're creating a project with only slight differences between some of the screens, you can quickly create copies of existing Design screens to save you time.

Hover over the image you want to copy

Click on the options icon in the top right hand corner

Click "Make a copy"

The new copy can be edited and saved as an entirely separate screen

Rename your design

Adding names to your Design screen is a great way of keeping your project organised.

To change the nameof your screen:

Open your project

Hover over the screen you want to edit >Edit Design

In the Design screen, clickthe image name with the gear icon located just above the top left-hand corner of the design image

Enter a unique name for your screen in the top right-hand corner

Hit theClose button or theSave linkwhen finished

You can also rename any screens that have been imported into Marvel by clicking the image name from within the project and editing the text. Please see example:

Change the size of your design

When you create a new Design screen, it will automatically be created at the correct size to fit the device type chosen under your project settings.

To change the dimensions of your screen:

Open your project

Hover over the screen you want to edit > Edit Design

In the Design screen, click on the settings iconin the top left-hand corner of the canvas screen

Manually enter thewidth and height.

Hitclosewhen finished

You can also edit the screen size by clicking Edit Design > click the screen name > drag the edges of the Design screen to create any size you want!

Download your design

Customers on any of our paid plans can now download their designs straight from our Design Tool!

Your download will save straight to your desktop as a PNG, simply select the popover next to 'Close' to do so.

If you're designing a single page site or want to scroll to an another area on the same page, our anchors feature makes that happen in just a few clicks.

How to create an anchor:

Hover over any image in your project and clickedit

Once the editor opens, click and drag anywhere on the image to draw a hotspot

In the Edit menu at the bottom, click scroll to anchor

Using the target, select the area you would like the Hotspot to jump to when it's clicked on

You can also toggle the 'smooth scroll' option to add a smooth transition to thescroll

One of the lesser known features of Marvel, but one that saves minutes and hours of manual work is our support for hotspot templates by using Symbols in Sketch when syncing your prototypes. Here's a typical use case - you are working on an iPhone prototype which has 3 buttons in the Tab Bar which appears in the footer on most of designs in your prototype. You have everything linked up and working in Marvel, however it's decided that the tab bar needs one more button, plus it all needs to change order. In the past that would require you to change the link on every single hotpot and move it all around to make way for the changes. If you have more than a dozen screens that is a lot of manual work, but no more! We now have a great solution. Heres a quick video to show you how:

It works by allowing you to add hotspots to symbols within your Sketch files, essentially creating a hotspot template that you can add to any artboard, only needing to update it once to replace across every screen in your prototype. Here's how: 1) Download and install Marvel for Sketch 2) Create a symbol in Sketch 3) Attach prototype links to buttons in your symbol, selecting the target artboard 4) You can now reuse your symbol throughout your artboard as a hotspot template

The goal of Marvel is to make your prototypes get as close to the real thing as possible. Whether you're creating apps or websites, it's the small details which really make the difference.

How to add a transition:

Screen transitions are a great way to replicate the interactions of real apps and sites. It allows you to see animations between screens.Everything from sliding left and right, to fades, pops and flips.

Select any image in your project and click edit

Once the editor opens, click and drag anywhere on the image to draw a Hotspot

In the Edit menu which pops up, select the destination screen for your Hotspot

Clickthe ScreenTransitions tab

Select a transition and close

How to add a gesture or action

Actions enable you to use swipes, taps or pinches to interact with your prototype, adding realism to your app. They also go perfectly with transitions.

Select any image in your project and clickedit

Once the editor opens, click and drag anywhere on the image to draw a Hotspot

In the Edit menu which pops up, select the destination screen for your Hotspot

Clickthe Actionstab

Select a gesture or action and close

Pro tip: Combine with animated GIFs

Combine transitions and gestures with animated GIFs to create an extra level of realism.

Our Microsoft Teams integration allows you to add and share interactive wireframes, designs and prototypes to channels inside in Teams in a few easy clicks.

If you are a Microsoft Office 365 user it's a great way to share your work with your design and development team right where you work.

Our Teams add-on allows you or another team to quickly add prototypes to your Channel and allow your team members to give feedback within your Teams application and easily find projects you are currently working on.

When you add your project or prototype you will be able to access it as a tab within a channel.

The interactive prototype will be available for all other users in that channel so your team can quickly find and access work and move projects forward together.

You will also be able to use our Handoff feature giving your developers access toautomatically create design specs for developers and save your team hours of manual work

How to Install on Microsoft teams

1. Login to your Microsoft Teams account2. Navigate to the Store using the icon on the bottom left3. Search for Marvel and click the card to Install4. Choose a team to add it to using the 'Add to a team' dropdown5. Click install6. Once you install you have the option to pin a project in a subsequent screen

How to pin a project to a channel

1. Once you have installed teams you can add your first project to a channel using the + icon at the top of your chat window2. Choose the Marvel tab icon on the "Add a tab" modal that appears3. In the configuration window you should see a list of projects appear in a drop down list.4. Choose a project from this dropdown list and click the "Save" button.5. Once you have added a tab you will see the project play and give you the option to interact and navigate your prototype and designs.

How to access your personal projects

You can also view your own projects within teams by accessing your Personal tab.

1. To do this use the search bar at the top of Teams and search for Marvel. Alternatively in the side menuuse the three dots (...) to open up all of your installed applications and choose Marvel.2. Once you've clicked the Marvel icon you should see a tab load listing all of your projects. You can view prototypes from here, copy links, or administrate your pinned tabs by accessing all your recent or all tabs.

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

Open any project

Click Add images to upload designs from Dropbox, Boxor upload directly from your computer.

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 and Box.

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

Select any image in your project and clickview

In the top left-hand corner selectreplace

Choose a screen to replace the existing screen

Replace using drag and drop or Add Images

Select any project

Drag and drop images from your computer into the project or click Add Images from computer

Any images that have the same file name as ones already in your project will replace automatically.

Replace using Dropbox or Box

If you have added files from Dropbox or Box, 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

Hover over any image in your project

Click on the Options button

Select Make a copy

Delete a screen

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

Hover over any image in your project

Click on the Options button

Select Delete

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

Although our Sketch plugin is compatible with Anima, when syncing to Marvel the expected behaviour is for Sketch to freeze temporarily while Anima works in the background

The freezing happens when Anima creates a new Sketch file which detaches all your symbols and simplifies all layers (read more about this in Anima's help center article on working with Anima and other tools)

We recommend turning off your Anima plugin to make your sync to Marvel as smooth and quick as possible!

Downgrading to the free plan removes premium features such as password protection, downloads and collaboration.

Note: Any clients or coworkers who are collaborating with you on projects or using the prototypes will no longer have access.

If you're looking for help or features, please contact our Customer Support team prior to downgrading who will be happy to help with any issues you're having.

How to downgrade to the free plan:

Sign in to your Marvel Account

Click on your avatar in the top right corner and click My Account

Click Plans

Click Downgrade on the free plan

This will immediately downgrade your plan and remove all premium features from projects and people on your plan.

Deleting your Account

To delete your account:

Sign in to your Marvel Account

Click on your avatar in the top right corner and click My Account

Scroll down to the bottom of the page

Click theDelete Accountbutton

Type the word delete into the text field in the warning modal

Clickyes, delete my account

Note: Please only delete your account after you have already cancelled your subscription by downgrading to the free plan. If you do not do this first you risk continued subscription charges being incurred.

Enterprise customers

If you are on the Enterprise plan, please contact us to discuss your account.

Marvel has a number of time-saving keyboard shortcuts in different areas throughout the siteto make your life easier.

Design Screen

CMD and + Zoom in

CMD and - Zoom out

CTRL + 1 Center screen

Project screen

- and + Make thumbnails larger or smaller

Editor view

Esc Exit any panel including the screen selector, comment sidebar and modals.

Shift + click Jump to a hotspot destination

Arrow keys Navigate left and right through screens

- and + Zoom in and out of screens

CMD+C Copy a hotspot or an element on the Design screen

CMD+V Paste a hotspotor an element on the Design screen

A Annotate the design

Play Mode

H Go to the first screen

S Show hotspots

G Show grid view

Arrow keys to navigate left and right

Note - these shortcuts are for Mac computers, if you're on Windows you may need to substitute the CMD key for control.

Your invoices/receipts are stored in your billing section.

Here's how to find it:

Click here to go to Billing

Scroll down to view your Invoices section

Click PDF to download any invoice

Adding Team Details to InvoicesTo add your team details to your account and invoices:

Head to my account > billing > scroll down to company details

Enter your team information andhit the save button

All of your invoices will have the new team details displayed

Switch to yearly billing or bank transfer

Need to switch your plan to yearly billing or bank transfer payment (6 users and above)? Contact us at [email protected] to get started.

There are several ways that you can add designs to your project making it easy for anyone to jump in and collaborate on designs. Choose to upload images from your computer, or sync your designs straight from Sketch and Figma!

Upload from your Computer

ClickAdd Imagesand upload designs from your computer! Marvel supports PNG, JPG, GIF and PSD. You can also drag-and-drop your images

Sync from Sketch

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

Sync from Figma

You can also use Figma to sync your artboards from Figma too! Download the plugin!

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.

Recommended Articles

Marvel 3: How to create a user test

Adding Video

Videos are a great way to add rich and dynamic content to your prototypes. Marvel lets you embed videos directly from YouTube or Vimeo to bring your prototypes to life.

How to embed a video:

Hover over any image in your project and click edit

Once the Editor opens, click and drag anywhere on the image to draw a hotspot. The video will fit the size of your hotspot.

In the image selector pop up, selectLink to URL or embed

Clickthe drop down and select Embed

Paste your embed code from YouTube or Vimeo and hitsave

Close the pop up and click Play to see your video

Where to find the embed code on YouTube:

Go to any video on YouTube

Click Share

Click Embed

Copy the embed code

You can click Show More to access additional options such as removing the player controls.

Where to find the embed code on Vimeo:

Go to any video onVimeo

Click Share

Copy the embed code

You can click Show Options to access additional options such as looping the video and labels.

Note - when copying from YouTube and Vimeo, the entire embed code should be copied, so it should look like this when it's pasted into Marvel:

Survey Monkey

Adding Audio

Audio embedsare a great way to add rich and dynamic sound and music to your prototypes. Marvel lets you embed videos directly from Soundcloudor Spotifyto bring your prototypes to life.

How to embed audio:

Hover overany image in your project and click edit

Once the editor opens, click and drag anywhere on the image to draw a hotspot.

In the image selector pop up, selectLink to URL or embed

Clickthe drop down and select Embed

Paste your embed code fromSpotifyorSoundcloud and hit save

Close the pop up and click Play tohear your audio

Need some help with finding the embed code on Soundcloudor Spotify?

How to find the your embed code on Soundcloud

Select any song

Click the share icon

Select Embed

Copy the embed code

You can access additional features by clicking More options

How to find the your embed code on Spotify

Select any song

Right click on any song

Click Copy Embed Code

Note- when copying from Soundcloud and Spotify, the entire embed code should be copied, so it should look like this when it's pasted into Marvel:

Adding Maps

How to embed a Google Map:

Select any image in your project and clickedit

Once the editor opens, click and drag anywhere on the image to draw a hotspot. The mapwill fit the size of your hotspot.

In the image selector pop up, selectLink to URL or embed

Clickthe drop down and select Embed

Paste your embed code fromGoogle Maps and hit save

Close the pop up and click Play to see yourmap

How to find your embed code on Google Maps

Type in a location and hit enter

Once located, click Share on the left panel

Click Embed map

Note- when copying from Google maps, the entire embed code should be copied, so it should look like this when it's pasted into Marvel:

Note: embeds that require an internet source will not work when used within an offline download.

Linking to email addresses

You can trigger a new email to open by linking your hotspot to an email address. It's a great way to get feedback or create a realistic contact interaction.

How to link a hotspot to an email address:

Select any image in your project and click edit

Once the editor opens, click and drag anywhere on the image to draw a hotspot

In the Edit menu which pops up at the bottom,select Link to URL or Embed

Select Email from the drop down menu

Enter the email address and click Save

Hit the play button to see this in action

Linking to external sites, surveys and content

Marvel has a great feature which enables you to link a Hotspot to any external website. This can be used to link to your own website or portfolio for a user to find out more about your project or even as a way for your client to view their real website in progress.

To create an external hotspot:

Hover over any thumbnail in your project and click edit

Drag your mouse to draw a Hotspot on your image

Select the Link to URL or embedoption in the pop-up and enter the URL, then hit save. That's it!

This opens up some interesting possibilities. Here's a few examples for inspiration:

Gather feedback at the end of your prototype by linking to a questionnaire on Typeform or. Great for remote user testing or validating ideas.

Open a file such as a PDF, video or MP3 on your own server or somewhere on the web

Link to YouTube, App Store, SoundCloud, Amazon itemsor any piece of online content

Open another Marvel prototype you've made!

Connect your Marvel prototypes to Lookback! Not only can you see a person's screen, taps, and gestures as they play your prototype, but also their reactions using the camera and microphone on the device.

You'll get a beautiful timeline of exactly what happened in the prototype PLUS you see each of your screen designs segmented and timestamped.

How to get started with Lookback

Head to Lookback.io and sign up for a trial account.

Create a new Lookback project.

Make the landing page of the project your Marvel project's share URL

Invite people to play your project. You can do this by using the"In-person", "Live" or "Self-Test" options.

You can then see all your results in your Lookback account!

You can quickly restrict access to projects by forcing viewers to enter a password whenever they try to view a prototype.

Its a fast and easy way to add an extra layer of security and can easily be switched on or off.

Go to any project

Click on Settings

Go to the Security tab

Add your password and click Set Password

Now when the share link is accessed, a password will be requested before being able to interact with the prototype.

Available on all paid plans

Upgrade to any of our paid plans to access password protection. Click here to view plans.

The Marvel app for Android helpsyou to quickly create awesome designs on the go

Add images, text, icons and create customised elements to capture your design ideas in a few easy steps.

Check out how to do this here:

To edit a Design screen created using the android app: Tap on your project thumbnail to open it Tap on any design screen to open it Select the vertical ellipsis at the top > edit Design Make your changes and hit the tick in the top right-hand corner to save

More questions? Head to the Android app FAQ

Were working on a new version of Marvel that will bring a whole host of new improvements and features to Marvel, with the goal of helping you and your team design, prototype, user test, and handoff to developers in one place. The rollout will take place gradually over the coming months as we gather feedback and measure performance.

Get your invite link

If youdon'thave an invite link, reach out to Support by emailing [email protected], and well get you sorted.

Sign in!

here

Once you follow your invite link, youll need to Sign in with Marvel to confirm that youd like to see the new version of the platform.

Have a look at the new design

Weve redesigned the Project Dashboard with you in mind - and you should be able to find your way quite easily with our brand new navigation bar on the left-hand side!

Weve given the entire interface a new look and consolidated a number of features so they are easier to find and use.

Marvel 2 Dashboard

Marvel 3 Dashboard

Intuitively switch between your teams projects, personal projects, and projects that were shared with you.

Bulk Actions

You can now click and drag to select multiple projects or designs, then apply bulk actions such as copying, deleting or moving. A huge time saver.

User Testing

Get video, voice and analytical feedback on designs and prototypes in just a few clicks.

Folders

Its now super easy to bunch together related prototypes and user tests - so you can share a single URL with your team, developers or wider stakeholders.

The new version is 2x faster when loading projects.

Tell us what you think!

At the top of the navigation sidebar, you should be able to see an option to give us feedback about Marvel 3. You can also submit your thoughts !

Were always listening as we get to work, and really want to know how we can improve your design workflow and experience with Marvel, so however big or small your feedback is, don't hold back!

Switching back to Marvel 2

As much as we hope you love Marvel 3, switching back to Marvel 2 is really easy.

At the bottom of the navigation bar, click on your Profile icon. From here, youll be able to switch back to Marvel 2.

Ifyou'vegone back to Marvel 2, and would like to try out Marvel 3 again, you can go back to your invite link and use it again!

If you have any questions about switching back and forth between platforms, or need help with anything, Support is here for you. Let us know how we can help by emailing [email protected] and well be back to you as soon as possible.

Open your project

Hover over the image(s) that you'd like to add to a section and click on the checkbox on the top left-hand corner of the image

You can also mass-select a series of images to add to a section by clicking on the white space near the images, and dragging the mouse over the images

On the bottom of the page, you should see a grey bar with the 'Copy' button

Click the 'Copy' button

Recommended Articles

Marvel 3: How to add designs to your project

Marvel 3: How to move images into a section

Marvel 3: How to create a prototype

The Free plan:

Unlimited Projects (1 active project at a time)

Unlimited commenting

Handoff - Automatically turn designs into code, specs and assets for developers (previously only available on Team plans, now coming to you for free!)

Youll still be able to create all the projects you need, butonly one can be active at a time with the rest being stored in your Archive folder.

What happens if I have reached my project limit?

You can choose to store your projects in your Archive section where they'll stay safe and sound! Whenever you need to use the project again, you can unarchive it. You can find out more information about archiving projects here.

Where do I find my archive?

Click on the icon next to All Projects on the projects page.

message here.

Then click 'Archived by Me' on the left hand side. Hover over any project and click 'Unarchive' if you wish to start using it again,

Questions? Lets chat!

When we started Marvel it was people like you who got the word out and advocated for us, so your feedback means everything.

Wed love to hear about how Marvel has helped you or your business. Our goal is to add even more ways for you to get amazing work done so hearing from you would be a big step in making that happen.

If you have any questions, feedback or stories, send us a

How to make a copy of a project

Copyinga prototype is a great way to experiment without affecting the original.You can duplicatea project as many times as you like.

Click on Projects

Hover over a project and select Options

Click Make a copy

How to delete a project

Click on Projects

Hover over a project and select Options

Click Delete

The Marvel for iOS and Android apps allow you to create prototypes offline, manage your account, turn hand-drawn sketches and drawings into interactive prototypes, and create high-quality, high-fidelity prototypes on-the-go wherever you are!

Download Marvel for iOS from the Apple App Store

Download Marvel for Android from the Google Play Store

Marvel makes it easy to test and share your prototype.

Every prototype is hosted on a unique URL which you can quickly send to any person or device. That means any browser can open your prototype, whether it's a desktop or mobile device.

PS: Want to view it full screen like a real app without the browser getting in the way? Check out our iOS and Android apps.

How to share

Share using your project Share URL

Select any project

Click Share

Click the URL tab

Enter the mobile number or email address in the field

Click Send

Send via Email and SMS

You can easily send your prototype via email and SMS directly from Marvel. We'll send a link to your prototype which can be opened on any desktop, laptop, tablet or mobile device.

Select any project

Click Share

Click the Email & SMStab

Enter the mobile number or email address in the field

Click Send

Embed in any blog, website or portfolio

Marvel embeds are a great way to showcase your prototypes on your blog, portfolio or case study. A simple snippet of code allows you to embed your prototype anywhere.

How to embed your prototype into any website

How to embed your prototype into JIRA and Confluence

How to embed your prototype into Dropbox Paper

How to embed your prototype into moodboards on Niice

Validate and ship products faster with video, voice and analytical feedback on designs and prototypes in just a few clicks.

From your projects dashboard, click the green 'Create Project' button in the top right

Select 'User Test'

Enter the name of your user test and select a prototype

Select either 'Free Roam' or 'Goal' as your type of test

Free Roam will allow the user to decide when to end a test, while a Goal test will end on a specific screen in the prototype.

If you choose 'Goal', select your final screen

Select 'Create User Test'

Recommended Articles

Marvel 3: How to invite people to take a user test

Marvel 3: How to view a user test result Marvel 3: How to invite users to your plan

Hovers are a great way to add interactivity to your web app and makes your prototype even more realistic.

To add a hover:

Open your project

You'll need to have multiple designs of the screen you want to add the hover to for example, one screen would be the normal screen and the next screen would be the same but with a hover design added

Place your mouseover the screen you want to add the hover to and click view

Click and drag your mouse to draw a hotspot

Select the destination screen at the bottom (this is the screen you want to be displayed when a user hovers over a certain part of your page)

On the actions tab, select hover

You can also combine hover with the keep scroll position feature on theleft to make sure the user's screen doesn't flicker if they scroll before clicking on the hover button

Check-out an example of the hover feature in the Richardson & Co prototype below: