A guide to getting started with Marvel for Sketch

 

Sketch is a popular design tool for the Mac used to design apps and websites. You can download Sketch here.

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

1. Make sure you have OS X 10.11 or later on your Mac
2. Close Sketch 
3. Download the Marvel plugin here
4. Unzip the file and double click the 'M' icon file to install
5. Select Open at the popup
6. Choose the option to move the download to your Applications folder
7. Open Sketch
8. 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.

1. Open your design file in Sketch
2. 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)
3. 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 also choose to update any Marvel image via the direct replace method:

1. Click on any artboard to select it
2. In the Sketch top navigation, head to Marvel > advanced > relink/replace with selected artboard
   
   
   
   
3. 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
4. Click on the image you'd like to replace
5. 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 player automatically updates each time you sync new designs.

 

1. Click the Marvel menu in the top navigation within Sketch > select on play or record last updated prototype
   
   
   
2. The player will open in a separate window, showing the last project you sent artboards to
3. Move your mouse over the window and click through the screens to 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.

1. In the player, click on the 2 chevron arrows in the top right-hand corner of the window > click on start recording
2. Use your mouse to click through your prototype as normal
3. Click on the 2 chevron arrows again and select stop recording
4. 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 Sketch
2. Select an asset you want to set a hotspot on
3. Click the 'Link' button in Sketch's toolbar
4. Connect your asset to an artboard with a simple click
5. Repeat this across your project till done
6. Sync your screens to Marvel 🤩 

 

 

Sketch FAQ

 

How do I update the Sketch plugin? 

• 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:

1. Open Sketch
2. Select Plugins from the menu
3. Select Manage Plugins
4. Highlight the Marvel file
5. Click on the settings icon below > uninstall Marvel

To uninstall the Marvel Sketch Plugin App:

1. Click the Marvel logo in your status bar
2. In the dropdown click the settings icon
3. Click Quit
4. 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. 

 

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 uploaded alphabetically:

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:

1. Click on the 'M' Marvel logo in your spotlight bar
2. Click on the settings icon at the bottom
3. Select logout 
4. Select the settings icon again and sign in on Marvel web