Handoff 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.
Handoff is currently only available on the Enterprise plan. The feature will be rolled out to the Company plan in the coming months.
Note: If you’re a developer/stakeholder, pass these instructions on to the creator of the project
How to get started
How to enable and view Handoff on your projects
If you're syncing artboards from Sketch, please ensure you're using the latest version of the Sketch plugin which you can download here.
How to 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.
How to use the Handoff tool
Once the Handoff sidebar 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
Here you'll find information on the entire screen.
Displays with width and height of the dartboard
A list of colours defined in the Sketch file, click any to copy the value to your clipboard
A list of fonts within the screen
Displays the grid information in the Sketch file
This section stores all the layers and assets for the screen which you can download individually or as one ZIP file with everything contained.
Note: Sketch users will need to mark layers as exportable in the formats needed. Here's how.
Either select an individual asset to download from the sidebar or click the download all screen assets button. This will create a zip file containing all images on the screen.
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:
If the select element contains an image, you’ll see that available to download.
Includes width, height and X/Y coordinates of the element.
The colour values for the element selected
Grab the colour, opacity, X/Y coordinates, blur and spread of shadows.
Download any fill images or view the colour.
Includes typeface, size, weight, spacing and alignment
This gives you the text inside any type layers and the ability to copy to clipboard. A huge time-saver!
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
Get more information on element details here.
To see distances between elements, simply hover your mouse over to highlight the layer and display values.