Sympli vs Zeplin: Which Is The Best Design Hand-Off Tool?

Handoff tools are the bridge between the designer and the developer.

In the past, the handoff process was a nightmare.

You had to export them from Photoshop or Sketch manually.

As a designer, you had to set up every single spec of every single layer in your file only for the developer to tell you that it’s not compatible, and you had to redo it.

The turmoils and frustrations that it caused between the developers and the designers were a nightmare.

And the poor manager had to act as a peacekeeper to still meet the deadlines.

Thanks to Handoff tools, those days are a thing of the past.

They allow you to easily export assets from the designer to the developer, who will then implement it into your application.

A crucial tool to have when you’re dealing with a team of these two different fields.

Especially in this day and age, with applications being made left and right.

It saves the trouble of having your designers manually adjust every layer of the Photoshop file so that the developer can use it.

Not only that, but Handoff tools make it easy for the file to be exported into code, so the developers will have a much easier time implementing the features.

With each passing day, more and more handoff tools are being made by multiple different companies, in order to make your process much easier.

This article will showcase two different Handoff tools, each with their strengths and shortcomings, so you can make an informed choice about the type of tool you want to use.

You Don’t Just Want the Best Tool. You Want the Best Tool for You!

Each Handoff tool is different, but in the end, each one will accomplish the same task.

You are exporting your designs to the developers.

It’s very important to take in mind what your product needs, and what your team is comfortable with.

Some handoff tools might be powerful, but if your team doesn’t like working with it, it can lead to some inner conflicts.

Whether it’s compatibility with your applications and code.

Or simply a personal preference for your designer.

Nobody likes to have internal conflicts in their team, and neither do you.

That being said, which one will best suit you.

Sympli or Zeplin? Which One Do You Pick?

Both are great handoff tools being used by several large companies.

Each has its strengths and shortcomings.

But, as stated before, they both accomplish the same tasks in getting the design to the development team.

That being said, let’s look at the contenders.

Zeplin – Spearheading the Revolution

Zeplin has been spearheading the design handoff movement, ever since the concept was in its early stages.

The tool is used by many big companies, including Airbnb, Dropbox, Pinterest, and Starbucks, among others.

So you can be sure that it’s a quality handoff tool.

So What Are the Strengths?

Easy to Use Easy to Export

Exporting your project through Zeplin is so simple that you only need someone to show you once, and you’ll be an expert.

Just get your more experienced friend to show you how to do it, and you’ll be teaching other rookies in no time.

Something to keep in mind.

You have to work with neatly organized symbols, proper layer, and text styles as well as group screens by flow

Making it easier for export doesn’t mean you’ll be leaning on the sofa waiting for it to export itself.

While it is definitely easier, you still have to put in the effort.

You don’t want your developer to scream at you that you nested your symbols wrong or that your naming conventions don’t make sense.

Of course, you don’t.

Still, if you follow the proper naming conventions, you’re good.

Then you simply export, by marking the artboards, or the individual images as exportable, and it’s done.

Now your devs can implement the features on your design.

Detail Focused

When Zeplin, put the sentence “It’s all about the details.” directly on their homepage, they didn’t do it just for show.

After all, design is all about the details and what kind of Design Handoff tool would you be if you didn’t understand that principle.

A very bad one, that’s for sure.

Zeplin really, sticks to their word so that you can have the most customization options possible.

When you hover over a button with your mouse, you’ll see all the little details.

Scale, size, alignment, functionality…

Make it bigger?

Align it, so it looks neet with everything else?

Connect it to other screens?

It’s all there for you to customize to your heart’s content.

Eye Candy

What kind of design handoff tool would you be if your interface looked bland and uninteresting?

No, a designer in their right mind would use it.

The Zeplin team knew this, so they designed their software to look visually pleasing for enjoyment while you work with it.

A lot of things in the software, like Colors, text copy, and illustrations are designed to please.

They went the extra mile so that you can not only export your designs easily but enjoy doing it.

It creates an atmosphere designed to please you as you work with it.

Consistent Export Order

Don’t you hate it when a design tool exports your assets in a seemingly random fashion?

You’re artboards get all over the place, becoming a nuisance to work with.

Fortunately, Zeplin has you covered.

They present you with two options two export them.

Either by list, where they’re exported by their order in the layer list in Sketch.

The alternative is exporting them by their Artboard position.

You can pick whichever option suits you better.

Great for Teamwork

 Zeplin was designed to be used by a team.

They even go so far as to insist you invite your team members to collaborate, stating it’s a collaboration tool.

You can also transfer ownership of the said project to another member of your team if the need arises.

Say, you have to move on to a new project, but you can only manage so many at once.

Not a problem, just transfer your current one to Jonny over there, and he’ll take over.

Not only that, but Zeplin has excellent Slack and Trello integration, so you don’t have to manually notify your team of the new button you just uploaded.

Zeplin will do it for you if you tell it to.

Say goodbye to those annoying, time-wasting, manual notifications with Zeplin.

User-Made Extensions

 In the first months of 2019, the Platform has had 1.5 million users.

Many of them have grown attached to the app so much that, if they can’t find a solution for a problem, they make it.

This resulted in many open-source, user-made extensions.

And that number just keeps growing.

So if you have a problem that you’re struggling to solve, that’s not in the application.

The chances are high that you’ll find someone else with the same problem that already made a plugin for it.

If not, then maybe your developers will make one.

Or if you’re a developer, maybe you can make one.

Not just for yourself, but for others.

You could indirectly help out others struggling with the same problems you did, so they don’t have to.

Version Tracker

 Designers are constantly at each other’s throats in every single software industry.

From the gaming industry to the app developers, these two groups have always had issues with updates and vision, which brews into hot conflicts and misses deadlines.

Thankfully with Zeplin, these issues are a thing of the past.

The team has developed a built-in version tracker, which will remember your older updates.

So even if you’re chasing a deadline and suddenly your colleague Gary comes in with a new “awesome design” that’s sadly not compatible with the code and has to be remade.

You can switch to the older working version that works.

Maybe your Gary will get his breakthrough design in the next patch, so he won’t be so pouty.

It’s still there in the version tracker.

Flow-Through the Screens

If you’ve used Sketch, you’re most likely aware of the links to your artboards.

Zeplin has you covered.

The team at Zeplin have developed a feature called flow.

With this feature, Zeplin will remember the links that you set up in Sketch and its functionality.

You can click through your links in Zeplin as if you’re clicking them through in Sketch.

You won’t have to rewire them twice.

Saves time and nerves.

Compatibility and Pricing of Zeplin

For Designers: You can use Zeplin along with Sketch, Photoshop, Adobe XD, and Figma.

For Developers: You can translate the synched designs into either CSS, Android, Objective-C, or React Native code.

Which includes the styles of the layers and any asset marked as exportable.

The platforms you can use Zeplin on are Web, macOS, and Windows.

Finally, the pricetag.

Finally, the Pricetag

Zeplin offers 4 plans ranging from: Free – $17/month – $26/month – $129/month

For more information, you can go to https://zeplin.io/.

Sympli – The Efficiency Maniac

Sympli is a unique contender among handoff tools.

The team worked on bringing a more efficient handoff tool to the market.

Something that you can use to get your design handoffs with minimal effort and minimal interruption.

How exactly?

Let’s take a look at some of their strengths.

Quick Start

Starting a project is both fast and efficient.

They take the bare minimum of your information in the sign-up form, and you can start collaborating right away.

Along with that, the program only asks for three bits of information when you start a Project.

Your Project Name, the Platform you’ll be exporting to, and the Resolution.

It’s as simple as 1, 2, 3.

Plugins for Different Platforms

 Sympli’s compatibility with other platforms is based on plugins.

They have a plugin for Photoshop, Sketch, Adobe XD, and, more recently, Figma.

For developers, they have Xcode, Android Studio, and HTML5 for web-based applications.

For project management, there’s Slack and Jira Software.

So why plugins and not direct integration.

One of the main reasons is so they can update it faster and bring you the new clean version of Sympli.

What’s also cool about this is that they can develop Plugins on the side, so they integrate indirectly with the main tool.

It’s not mixed in with the tool so, it’s a lot cleaner.

What’s great for you is that you can only implement the plugins that you need.

No need for features that you don’t need.

It’s simple for them and simple for you.

Truly a win, win situation.

Great Developer Interface

 Sympli has a great interface for developers.

Not only is every image easily exportable, but clicking on it, you can see it’s dimensions, so your devs can fine-tune and adjust it.

The text layers, on the other hand, arrive with a much larger list of data.

From colors to fonts, font size, text alignment, text value, the list goes on.

All the information that developers need to implement the features.

And this information can be copied to the clipboard and added directly into a CSS or Xcode file, depending on which one you’re using.

 Ideal for developers.

Color and Font List

Another awesome feature of this program is that all of the fonts and colors that you used throughout your project are shown on a list in the right-side panel.

These can also be easily copied and pasted into code by your developers.

The less you’re developers bug you to give them the exact color specs, the less time wasted and less inner turmoil.

They can directly copy them from the app.

For designers, this is also incredibly useful because as a designer, you’ll be able to see all the colors and fonts you used.

You are getting a feel for your app.

Maybe you’ll need to adjust the colors because your current pallet sucks.

Or one font just doesn’t sit well with the others, but it was on a different layer so you couldn’t compare.

Sympli useful on both ends.

A Slack for Large Teams

Not only does it allow for very easy team integration, but Sympi also offers an automatic notification, using Slack.

It automatically notifies you when someone from your team has made an update to the project.

This way you won’t have to manually update the Slack, whenever you finish a new design asset.

Perfect for easy collaboration.

Especially for large teams where the most annoying thing would be going through each member to see what they did.

Web-based

They developed their app solely for web-based, offering you a stable work environment.

When it’s just one platform, it makes it easier for you to update to a new version.

Practically instant.

Which is also great because you won’t have to go through compatibility issues with other platforms.

And the Plugins?

You guessed it.

Also web-based.

They’re practically web extensions.

Ideal for the web developer and designer.

The upside is that you just need an internet connection, and you can work on it.

The downside is that you need an internet connection to work on it.

There’s no offline mode.

Git Support

 Another great perk for developers.

 Sympli has a Git-based app called Versions.

And since pretty much every developer uses a Git-based system for their work, it’s pretty convenient to have.

Along with Git’s already established version control system, you can be sure your developers will have an easy time integrating with this app. 

Automatic Scaling for Mobile

Gone are the days where you had to adjust your assets for 10 hours so it will fit inside the Resolution of your Smartphone

Sympli will automatically scale your assets to the appropriate Resolution of your Android or iOS device.

Not only that, but Sympli helps designers stay within Android’s naming requirements.

No more broken Android builds, folks!

Compatibility and Pricing of Sympli

Plugins for Designers: Sketch, Figma, Photoshop and Adobe XD

Plugins for Developers: Xcode, Android Studio and HTML5

Last but not least, the price tag.

Sympli offers 4 plans ranging from: Free – $4.5/month – $9/month

The 4th one is an enterprise plan that needs to be discussed with the Sympli team.

For more information go to https://sympli.io/

Conclusion

Sympli and Zeplin, each have a different approach towards being handoff tools.

Neither one is better or worse than the other; it all comes down to preferences and which tool will serve you best.

All it comes down is preferences.

Whether you’re more comfortable with working on a web browser or your desktop.

Or it could be which application just feels more comfortable.

You’re invited to try them out.

They both have a pretty good free version.

If it comes to your budget.

Sympli is generally cheaper, but still quite powerful and gets the job done.

Zeplin, while more expensive, has a long-standing history as well as brand loyalty.

In the end, which one you choose is up to you.

I hope this article helped you in making an informed choice on the matter of choosing your handoff tool.