Get started with design and wireframing

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

1. Create or view a Project
2. Click on the Design button on the left
3. Use the tools on the left to create your design
4. 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: 

1. Open your project and hit the Design button to create a new canvas > click on the purple Assets icon 
2. Find the element you need and click Add

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:

1. 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.
2. 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 >
3. 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 Upload from 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.

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

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 the image name with the gear icon located just above the top left-hand corner of the design image
4. Enter a unique name for your screen in the top right-hand corner
5. Hit the Close button or the Save link 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 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:

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.
5. Hit close when 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.