Get started with Handoff

 

 

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 is the 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 you’ll 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 your projects

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:

sync_handoff_data_OFF.png

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 haven’t been uploaded using Marvel for Sketch or our Design tool, then the button will be greyed out. 

Using Handoff:

Once Handoff is open, it’s an absolute breeze to start getting measurements, code and assets. When you first enter Handoff without any elements selected, you’ll see the screen level properties.

Here you’ll find two sections: Artboard and Assets 

aa.png

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.

assets-1.png

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! Here's how:

  • 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. You’ll 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:

  1. Click on the Handoff button in the bottom left-hand corner of your screen
  2. In the Handoff menu on the right, switch to the assets tab
  3. Download any individual asset by clicking on the download button directly underneath the image of the asset
  4. 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 you’ll find:

Assets
If the select element contains an image, you’ll 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!

Asset
Click 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.

Was this article helpful?
69 out of 109 found this helpful

Articles in this section

    Still have a question?

    Submit a help request