Collaborating with your team on building a digital product doesn’t need to be a hassle. Sympli Handoff turns making of the visual specs and assets for handoff into one-click action, and here is how to use it with Sketch.
Watch the tutorial below, or scroll down for a text walkthrough.
Setting Up
First, download & install the latest version of the plugin here. After you restart Sketch, you can open Sympli Handoff in Menu->Plugins->Sympli Handoff->Export to Sympli Handoff, or by just pressing Control + Y.
Exporting Mockups
For design handoff and collaboration in Sympli Handoff, you will first need to create a project. The project stores metadata like the resolution and platform you’re exporting the design for, and can contain multiple screens.
Projects
At the moment, Sympli Handoff supports iOS, Android and Web projects (with more coming soon), and each type lets you select multiple resolutions.
Choosing project's resolution
Hint: If you use standard artboard templates, always choose @1x (mdpi for Android projects). And you can skip right to the next section :)
Resolution of the project in Sympli Handoff is based on the size of your mockup and means the baseline you created the mockup in. Let’s look at an example:
If you’re working on an iOS app for the iPhone 6, you have the following options for artboard sizes:
375x667, which stands for @1x in Sympli;
750x1334, which stands for @2x in Sympli;
and 1125x2001, which stands for @3x in Sympli.
Exporting artboards
Select any element within the artboard you want to export on the canvas or in the layers tree, press Control + Y and select the project. If you don't have any selection, all artboards in the current page will be exported.
Exporting assets
It’s as simple as selecting the layers or layer groups and clicking “Make Exportable” in the bottom right corner. Alternatively, you can make a Slice.
You don't have to configure the scales and formats, any scale and format will be enough. Sympli Handoff will generate assets of all sizes automatically.
Sympli Handoff automatically generates assets of the following formats:
Android: svg/png
iOS: pdf/png
Web: svg/png
Asset with transparent padding
To create an asset with transparent padding, place a Slice into the group and check “Export Group Contents Only” checkbox on it. This will tell Sketch to ignore all layers but those in the group.
Tagging Screens in Sketch
Group screens by flows or states with tags, right from Sketch! Activate tags view via Plugins -> Sympli Handoff -> Show Tags and add/remove tags.
Adding your team to the project
After you export the designs, you'll get a shareable link which you can send to your team's group chat. Or, you can invite teammates by email (you can add multiple addresses).
You can also manage your project's team online at Sympli Handoff web app.