How to Hand-off Photoshop and Sketch Designs With Sympli_part1

Let’s take a look at Sympli; a collaboration platform for designers and developers. It works with Xcode, Android Studio, Sketch and Photoshop–in this tutorial we’ll cover the designer’s perspective, then in a follow-up post we’ll see how Sympli works from a developer’s viewpoint.

Familiar Pain Points

When you have a team working on an app UI, (be it for an Android, iOS or HTML5 project), the transition phase from design to code often becomes rocky, inefficient, and sometimes a little bit painful.

Once a Photoshop or Sketch-based design is finished it’s typically forwarded, as is, to the dev team. From there the dev team are left to extract image assets, measure up dimensions and manually figure out the colors, font settings and text content that needs to be translated into code. If alterations are made to the original design files, transferring updated documents via Dropbox (or email) is slow, clunky and difficult to keep track of.

All these steps add significant time to the development process, and on top of that, require coders to access and learn design apps they would otherwise have no need for. This means extra money spent on software licenses, and on paying for the time spent manually handling tasks that fall into the “no man’s land” in between designing and coding.

This is where Sympli steps in to propose a solution. Rather than having developers handle these “in between” steps manually, Sympli aims to automate the whole transition process. Once a designer has completed their UI they export it to Sympli, which then automatically handles asset preparation, layout dimension measuring, color palette generation, font setting extraction and more.

Devs can then forget Photoshop or Sketch even exist, and instead view designs via Sympli where everything they require to get straight into the business of coding is available for them.

Designers need only install the Sympli plugin for Photoshop or Sketch, both of which are available as free downloads:

Coders have the option of using the plugin for Android Studio, the plugin for Xcode, or Sympli’s web app for HTML5 & CSS based projects. These three are all free to use for a single project, so if you’d like to follow along as we walk through this tutorial head to sympli.io and grab yourself an account.

This article is the first in a two part series. We’ll start by looking at the design side of the equation, covering how best to setup your design documents and export them to Sympli. We’ll also keep a focus on web oriented coding, looking at how the Sympli web app works. In the tutorial subsequent to this one, we’ll step into using Sympli with Android Studio and Xcode.

Let’s start at the very beginning: getting the Sympli plugin installed into your preferred design software.

Sympli Plugin Setup

The first thing you’ll need to do is head to the downloads page, then grab and install the Sympli plugin for your preferred design app; either Sketch or Photoshop.

After installation, in Sketch you can access the plugin under Plugins > Sympli > Export to Sympli. In Photoshop you’ll find it under Window > Extensions > Sympli.

Note that when you run the plugin the first time you’ll need to sign in to enable communication with your Sympli account.

Sympli Projects

“Projects” are the core of working with Sympli. Each project can contain a number of “Designs”, or screens, and you can have multiple source PSD or Sketch files feeding into a single project if you choose.

Projects can be created for Web, iOS or Android with 1×, 2× and 3× resolutions supported for each. As mentioned earlier, in this tutorial we’ll be focusing on web, and there will be another tutorial coming soon to focus on iOS and Android projects.

You can create a new project online via the Sympli “Projects” interface:

Alternatively, you can do so from the Projects tab in Photoshop plugin:

Or in the Sketch plugin, by clicking Create New Project then choosing your preferred options:

Using Artboards

Whether you’re working with Sketch or Photoshop, the best way to prepare designs for syncing with Sympli is through using artboards. Each distinct UI mockup should be in its own artboard, for example:

The reason for this is that after exporting to Sympli, (which we’ll cover later), each artboard will be picked up and processed separately. You’ll then be able to access them individually in order to grab their assets and code related information. Each artboard will be visible as a “Design” in the Sympli web interface, like so:

Design Resolution

Sympli is built to be aware of scaling requirements for 1×, 2×, and 3× resolution. It will do things like dividing layout dimensions by two or three where appropriate, so it’s important to know beforehand what scaling factor you need so you get the right results.

For example, if you are designing a 2× resolution UI for the iPhone 6, which has a display size of 375px by 667px, you’ll need to ensure your artboards are each twice that size at 750px by 1134px.

When you export a 2× web project to Sympli it will halve all the dimensions in your layout, including those output in generated CSS code, (we’ll talk more about CSS later). Your 750px by 1134px artboards will be recognized as 375px by 667px Sympli designs with 2× resolution, as pictured in the bottom left corner of the screenshot below.

Preparing Assets for Export

Sympli will automatically extract assets for you at all the required resolutions, but you’ll first need to tell it which parts of the design should be converted into images. The process to do this is a little different between Sketch and Photoshop.

In Sketch, select the layer or group for the element you want to have exported as an image then click the Make Exportable + button at the bottom of the right column.

The first time you click the button it will prepare a 1× resolution image for export, so you’ll need to click it additional times for extra resolutions such as 2×, as seen below.

If you’re working with Photoshop, select the item’s layer or group, then in the Sympli plugin panel’s Assets Utility tab click Mark as Asset. It will add the prefix “AST:” to the layer, hence marking it as an asset. You can also manually rename layers to add this prefix instead if you prefer.

Exporting to Sympli

When your UI design is ready, select the artboard(s) you wish to export. If you don’t already have a project setup you can do so now via the Sympli plugin for your design software. As part of this process you’ll be given the option to sync / export your design right away.

If you already have a project setup, be sure you identify the correct one in the Photoshop / Sketch plugin then press the corresponding Sync or Sync Now button.

Sympli will spend a moment exporting images and uploading your designs. Once your project is exported you can view it from Sympli’s “Projects” page. From here you can select any design / artboard and go into it via the Web App for closer inspection.

Written by Kezz Bracey
If you found this post interesting, please follow and support us.
Suggest for you:

Build Apps with React Native

The Complete Android Developer Course - Build 14 Apps

The Complete Android & Java Course - Build 21 Android Apps

Android Application Programming - Build 20+ Android Apps