To make life easier for the developers Sympli Handoff has a plugin for Xcode. Here's a guide on how to use it:

First, you need to install the plugin and start it. After you start the Sympli Handoff plugin you can find it in the top toolbar of the Xcode.

Collaboration in Sympli is built around projects and once your design team sends you the invitation link to the project you can either accept it in our WebApp or you can select "add project by link" in the user menu and paste the link so the project appears in your Project's list.

The Project contains the list of the designs that can be sorted and filtered, and holds a Summary of all fonts and colors used in all designs within the given project.

You need to click on one of the designs to get to the Design Browser.

Here you can click through every single element of the design and get the detailed information about it: dimensions, position, effects, fonts used, text size, alignment, etc. Pretty much everything you need to implement the design in your app.

In the Design Browser you can also measure the distance between the design elements. To do that you need to click on the element and hover over the other element you want to measure the distance to. Another option on how to measure the distance is our easy Ruler tool: you can drop it anywhere and all measurements will be shown relative to the Ruler.

At the bottom of the screen you can see the list of the assets provided with each design and if you click on any design element in it will be highlighted on the mockup, which is very handy if you see the design for the first time.

Sympli Handoff also provides assets merging into the asset catalog in your project, so you can select which catalog to use and it will visually show you what kind of images do you have in your project's catalog and how it's going to look like once you've imported your assets from the design.

Let's start with assets. In the Merge assets dialog window, you can choose which assets from the design bundle will go to your project. You can deselect some items or you can open the per dpi view to select which assets will be included into the merge. If you want to sync everything you can just click on the Select All option in the upper right corner and then click on Import Button. After you clicked Import and synchronized the drawable directory you can see that all resources were synced.

In case you need to rename the files - you can do it and the plugin will create mapping for these new names. Sympli Handoff will remember this mapping and next time you import something into this project you're not going to need this all over again, it will be picked up automatically.

Next is the Color Palette which is a list of all the colors used in the project and you can copy them into the clipboard. And you can switch between ObjectiveC and Swift in the upper toolbar.

Next tab holds a list of fonts used in that particular design. It also has the info on the font typefaces, sizes and alignment.

With Sympli Handoff Xcode plugin you can apply properties from design to views in the interface builder. This works for positions, dimensions, images and text labels. You can apply these properties to the element and you'll see the changes in the interface builder.

You can also use the Sympli Handoff plugin with your Xcode Simulator, just click on the Sympli Handoff icon to open the plugin, choose the design and it will be shown in the Simulator.

Sympli Handoff also provides code snippet generation for the styling of the layers. To access this feature you should choose a text element in the design and click "Snippet". You'll see a dialog window with code snippets for Swift and Obj-C.

This is all for the Sympli Handoff Xcode plugin. If you lack some important feature or some part of a workflow - please, submit a request on it through our Canny. This is also the place to check for all the updates our products get, so feel free to visit and comment anytime, we appreciate all your feedback.

Thank you for reading this tutorial, if you have any questions - contact us through the chat in the bottom right corner of the website.