Collaborating with your team on building a digital product doesn’t need to be a hassle. Sympli turns making of the visual specs and assets for handoff into one-click action, and here is how to use it with Sketch.

Setting Up

First, download & install the latest version of the plugin here. After you restart Sketch, you can open Sympli in Menu->Plugins->Sympli->Export to Sympli, or by just pressing ⌘+Y.

Exporting Mockups

For design handoff and collaboration in Sympli, 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 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 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: 

  1. 375x667, which stands for @1x in Sympli
  2. 750x1334, which stands for @2x in Sympli
  3. 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 ⌘+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 will generate assets of all sizes automatically.

Sympli automatically generates assets of the following formats: 

  1. Android: svg/png
  2. iOS: pdf/png
  3. 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->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(can user multiple addresses). 

You can also manage your project's team online at Sympli web app


Did this answer your question?