Use shapes, images, text and more

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:

  1. Creating your project
  2. Adding a Canvas to it
  3. How to add text, shapes and images to your Canvas
  4. How to save your Canvas
  5. How to share your project. 

To edit a design-screen or an imported screen

  1. Hover over the Design image
  2. Click on the Edit Design link at the bottom left-hand corner of the image
  3. Make your changes
  4. Hit the 'close' button in the top right-hand corner

Pasted_image_at_2017_10_31_02_29_PM.png

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 designs
You can easily add text to your designs to better communicate your ideas and connect with your audience.

How to add text:

  1. Open any new or existing Design screen
  2. Click on the blue text icon towards the top left-hand corner
  3. Double click on the sample text which appears and start typing
  4. You can also change the font type, size, colour and other attributes using the settings on the right

text.png

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

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.


Screen_Shot_2018-01-29_at_16.12.36.png

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 Design screen:

  1. Open your project  
  2. Hit the Design button to create a new canvas screen 
  3. Click on the orange image icon in the left navigation
  4. Select the image you want to import
  5. Hit 'choose' and the image will be added directly to your canvas

To search and add an image:

  1. Open any new or existing screen in the Design tool
  2. Click on the purple assets icon towards the top left-hand side of the screen
  3. Select stock-photos
  4. 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
  5. Click add to add the image to your own design 
  6. You can click and drag the corner of the image to resize it to your preferred dimensions 

photos.png

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:

  1. Open any new or existing screen in the Design tool
  2. Click on the purple assets icon towards the top left-hand side of the screen
  3. Select icons
  4. You can either scroll through to find an icon you like or use the search bar at the top to search for a specific type of icon
  5. Click add to add the icon to your own design 
  6. You can click and drag the corner of the icon to resize it to your preferred dimensions 
  7. You can also double-click it to select it, then use the settings on the right to change the colour and other attributes

icon.png

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:

  1. Open your Design screen 
  2. Click on the settings icon, next to the screen name (in the top left-hand corner of your Design screen)
  3. This will open the settings menu on the right-hand panel of the screen  
  4. Click on background colour 
  5. This will open the colour picker for you to change the background colour for the entire screen 

background.png

Shortcuts; copy, paste & undo

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 
Was this article helpful?
2 out of 14 found this helpful

Articles in this section

    Still have a question?

    Submit a help request