Tuesday, August 2, 2016

Is Sympli the Design Collaboration Tool That Developers Won’t Hate?

Design collaboration tools are all the rage in 2016.

In the past, most project teams have hacked together calendaring and to-do apps to fit needs, but inevitably, there comes a time when only a specialized tool will do.

But how close has anyone come to perfecting the design collaboration process? I think that's a little more tricky. Recently I looked at an interesting contender in the field - Sympli. Let me walk you through it.

Sympli Integrations

Preferences are the defining factor in choosing a design collaboration tool, but whose? Design collaboration tools tend to be aimed towards designers and managers, where developers are often left out and that results in a shaky design handoff.

Let's take a look at how collaborating with Sympli can improve the design handoff (and ultimately developer relations) without making life difficult for designers. Plus, it's free for a single project with unlimited collaborators!

Starting a Sympli Project

What really impressed me at first was how I could start collaborating right away - only the bare minimum amount of information was taken from me in the signup form and I was told I could start a "New Project" immediately. Sympli needs three tidbits of information from you to begin; Project Name, Platform and Resolution, so go ahead and offer that.

Starting a New Project

Installing the Plugins for Photoshop or Sketch

After setting up a "New Project" you'll be asked to upload designs from either the Photoshop Plugin or Sketch Plugin for Sympli. If you're not the designer you can invite them to do that, which suggested to me that it's totally okay for developers to take the wheel here (more on that shortly).

Leave this webpage for now.

Installing the Sketch Plugin

I'll be walking you through the process of importing design assets and styles from Sketch, however, you can do also do this using Photoshop where the steps are pretty much the same. Start by downloading either the Photoshop Plugin or the Sketch Plugin here; the installation itself should be relatively easy but there are detailed instructions for those that have never installed extensions before.

As you can see on the right-hand side, there's also some extensions for developers (Xcode, Android Studio) that help facilitate the extraction of design assets from Sympli.

Again, more on that shortly.

Sympli Extension Page

Importing the Designs into Sympli

I'm going to use one of my own user interface kits for the sake of this tutorial, but feel free to grab something from Sketch App Sources if you need a sample file to use.

Select a layer (or multiple layers) that you want to export, and click the "Make Exportable" button from The Inspector. So far this is rather normal and you can see all of the exportable regions via the usual keyboard command, command+shift+E.

Making Image Assets Exportable

But rather than actually exporting these layers to our local computer we'll instead use the keyboard shortcut (command+Y) to export the assets to Sympli. Sympli will export the entire selected artboard with all of its layers intact, or if none are selected, it will export all of the artboards. Log in first…

Logging-in to Sympli from Sketch

…and then choose from the "My Projects" list where you'd like to export the assets to. If you skipped that step earlier on you can "Create [a] New Project" here instead (in fact, designers barely have to use the Sympli web interface at all). Sympli will then begin to export the design, and after a few minutes (depending on the complexity of the design) you'll see it appear in the Sympli web app, so let's move back to the browser.

Exporting from Sketch to Sympli

Continue reading %Is Sympli the Design Collaboration Tool That Developers Won’t Hate?%


by Daniel Schwarz via SitePoint

No comments:

Post a Comment