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 Photoshop CC.
Installing the plugin
One of the great advantages of Photoshop is that it works on both Mac and Windows, and Sympli Handoff has versions for both platforms 🙌. To open the plugin click on Window→ Extensions→ Sympli Handoff menu or click on the Sympli Handoff button in the Photoshop panel at the right.
Artboards vs groups
Photoshop CC Artboards have been around for quite a while, and we encourage you to give them a try. Read more about them here.
Sympli Handoff supports the export of both Artboard-based and group-based Photoshop mockups, but your development team will ❤️ you much more if you switch to Artboards. Developers don’t have to switch the visibility on and off from the design inspector when they use Artboards. Also, with Artboards you can select specific screens you want to export, which will make design handoff even faster.
To convert a group in your mockup into an Artboard, right-click on it and select “Artboard from Group.”
Using Smart Objects
To properly generate specs and assets out of Smart Object, please always insert them as path.
Exporting specs and assets
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.
At the moment, Sympli Handoff supports iOS, Android and Web projects (with multiplatform projects coming soon), and each type lets you select multiple resolutions.
Choosing project's resolution
Hint: If you use standard Photoshop artboard templates, always choose @2x (xhdpi 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 (or canvas) sizes:
- 375x667, which stands for @1x in Sympli;
- 750x1334, which stands for @2x in Sympli;
- and 1125x2001, which stands for @3x in Sympli.
Open the plugin via Window->Extensions->Sympli Handoff menu, check the artboards to export and select the destination project. That's it!
To turn a layer or group into an asset, switch to the “Assets Utility” tab and select the layer or group in a layers tree. Click “Mark as Asset” button.
Sympli Handoff automatically generates assets of the following formats:
- Android: svg/png
- iOS: pdf/png
- Web: svg/png
Assets with transparent padding
To add transparent padding to the asset, select asset layer or group (denoted with an “AST:” prefix) and click “Set Custom Size” button in the Asset Utility Tab. This will create an invisible shape layer that will set the bounds for exported assets—you can resize it as you wish. Turn the visibility off before the export.
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 (can use multiple addresses).
You can also manage your project's team online at Sympli Handoff web app.