Get Started with Design-Tool

Use Marvel to design your screens

If you don't have any design software, try our very own Design tool - it allows you to quickly create screens in Marvel directly in your browser (and now in our iOS and Android apps too!)

Get Started:

  1. Click on the project you want to add a screen too
  2. Click on the Design button
  3. You can edit your screen by adding text, images, icons and wireframe elements
  4. Hit close in the top right-hand corner to save and publish your changes

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 design tool.

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.


Duplicate your design screen
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. To create a copy:

  1. Hover over the image you want to copy
  2. Click on the options icon in the top right hand corner
  3. Click "Make a copy"
  4. The new copy can be edited and saved as an entirely separate screen


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

To change the name of your screen:

  1. Open your project
  2. Hover over the screen you want to edit > Edit Design
  3. In the Design screen, click settings in the top left-hand of the design image  
  4. Enter a unique name for your screen in the top right-hand corner 
  5. Hit update and close when 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 dimensions of your design screen
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:

  1. Open your project
  2. Hover over the screen you want to edit > Edit Design
  3. In the Design screen, click on the settings icon in the top left-hand corner of the canvas screen
  4. Manually enter the width and height. Alternatively, you can click and drag the corners of the canvas screen to resize it
  5. Hit close when finished 

Note - it's not currently possible to resize screens imported into Marvel but you can add the image to a new Design screen and resize it there. 

You can also edit the screen size by dragging the edges of the Design screen to create any size you want.

Save your work

The Design tool now has an auto-save feature, which automatically saves your work. If you leave a Design screen accidentally, no need to worry - all your hard work has automatically been saved!

How often is my work saved?

It auto-saves every 5 minutes if there are any unsaved changes but you can force save it sooner if you like.


What if I'm working with a collaborator on my project?

If you're working on a project with another collaborator, auto-save will be running on both your screens. This means you'll over-write each other's work if you work on the same design screen at the same time. You'll need to ensure you're not both working on the same screen at the same time.  

Download your design screens

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.

Whatever it is you're working on right now - be it email banners, web pages, flyers - you can now save it in seconds.



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