A guide to getting started with Developer Handoff

 

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. 

What Handoff gives you:

• Size and position of elements and measurements between elements
• Colour values for elements and text
• Typography such as typeface, font size, spacing and alignment
• Text content
• CSS, Swift, Objective-C and Android XML code
• Exportable assets in PNG, JPG, TIFF, WEBP, PDF, EPS and SVG

 

How to enable developer Handoff on projects

Handoff is automatically enabled for designs created in Marvel using our design and wireframing tool or designs synced from Sketch (a popular design software) using our plugin.

 

Accessing Handoff

It's an absolute breeze to start getting measurements, code and assets. You'll find the button on every prototype.

1. Open your project and click the Play
2. Click the Handoff button in the bottom left corner
3. Click or hover over elements to bring up their measurements, specs or assets on the right-hand side

 

Design data available in Handoff with no element selected 

As soon as you click on the Handoff button, you'll see the top-level information for the entire screen, from every colour and font within it.

• Properties - The width and height of the artboard
• Fill - the background colour of the artboard
• 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
• Format Settings - change the units, guides and code shown in Handoff

 

Design data available in Handoff with an element selected 

Once you select any element on the screen, Handoff will switch to displaying element-specific data. 

• 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!
• Code - Grab the CSS, Swift, Objective-C and Android XML code for the element to quickly copy and paste into your code-editor

 

How to sync Developer Handoff data from Sketch

If you use Sketch, we have a handy plugin that allows you to quickly sync artboards and developer data to Marvel so you can display everything your engineers need to get started.

1. Download and install the Marvel for Sketch plugin (you can update the latest version here)
2. Click Sync all or Sync selected (they should appear on the left-hand panel after installing)
3. Select the project you would sync to 
4. Click Sync

 

How to export assets from Sketch to make available in Handoff

Handoff can provide assets to your developers so they can begin building your designs. Assets are available for specific elements that you select or you can download everything at once.

The first thing you need to do is decide on what assets you want to provide to your developers by marking them as exportable in Sketch. If you're new to Sketch, read their instructions on how to do this here.

You can export the same element in multiple sizes e.g. 1x, 2x etc, allowing your developers to have easy access to everything they need to get started.

1. Select the layer in Sketch
2. On the right panel, click Make Exportable
3. Choose the size and format setting for the export
4. Click the + to create another export or finish

Now when you next sync to Marvel, assets will be available to download.

Marvel supports PNG, JPG, TIFF, WEBP, PDF, EPS and SVG exports.

 

How to download assets from Handoff

Once you've exported your assets from Sketch, your developers have the choice of downloading them in a few ways

Download a specific asset

Sometimes you may need to download a specific asset rather than every element in the design. To do this follow these steps:

1. Play any prototype
2. Click Handoff, on the bottom left
3. Click on a specific element
4. On the right-hand side, click Download, this will generate a ZIP file containing all variants, formats and sizes of that asset. If you want a specific file format, click the down arrow to see the available options.

 

Download or view all assets on a screen

You can quickly view every exportable asset on a screen and download everything in one go if you want to save time.

1. Play any prototype
2. Click Handoff, on the bottom left
3. On the right panel, scroll down
4. Click Download assets to download everything on the screen as a ZIP or click Download on multiple items if you prefer