Using Sympli with Sketch

Sympli
Sympli
Feb 18, 2016 · 3 min read
Image for post
Image for post

Collaborating with developers doesn’t need to be a hassle. Today we will walk-through an example Sketch workflow, demonstrating how thousands of developers and designers improve cross-team communication and drastically reduce iteration time.

Projects and resolutions in Sympli explained

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.

At the moment, Sympli supports iOS, Android and Web platforms (with more coming soon), and each platform lets you select multiple resolutions.

Image for post
Image for post
Sympli supports iOS, Android and Web projects

But what does resolution mean? 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: 375x667, which stands for @1x; 750x1334, which stands for @2x; and 1125x2001, which stands for @3x resolution.

The best practice is to always design in @1x (mdpi for Android), and all of the artboard templates shipped with Sketch represent @1x resolution.

Still curious about the details? Here’s a great article by Brad Wrage on designing in @1x, and why he finds it ideal for his workflow.

Export artboards to Sympli

Go to or press to open Sympli plugin. To export only particular artboards, select them(or their elements) in a layers tree or on canvas. Or skip selection entirely, and all of the artboards within the current page will be exported.

Select a project from the list or create a new one, and Sympli will automatically generate specs, style guides and assets.

: arrange artboards in rows, and Sympli will display them sorted in so called “Natural order”.

Image for post
Image for post
How artboards arranged in rows are sorted in Sympli

: after the first export, the Sympli plugin will remember the project linked to this .sketch file, so next time you don’t have to look it up in the list, and subsequent exports can be done as quick as pressing and hitting

Export assets

It’s as simple as selecting the layers or layer groups and making them and clicking “Make Exportable” in the bottom right corner. Alternatively, you can make a Slice.

: If you are trying to create an asset with transparent padding, the Slice is placed into the group and “Export Group Contents Only” checkbox is checked on the Slice, so background layers and other out of the group design elements are ignored.

The major difference with the native export feature of Sketch is that you don’t have to configure all the required export formats and scales; literally any option is enough, as Sympli plugin handles scaling and exporting into different formats on it’s own.

Collaborate with the team

Once the designs are uploaded, grab a shareable link or send it directly to your teammates inboxes!

In case you are updating an existing project that has already been shared, the team will be notified about the updates.

Please note that your teammates also can upload designs into the shared projects.

Image for post
Image for post
Invite collaborators without leaving Sketch

Next steps

Open the project in Sympli web app to inspect the designs and comment on particular areas with the annotation tool.

In Sympli web app you can also invite more collaborators, manage Brandbooks, explore layers and colors, share fonts, download assets in bitmap or vector format; even integrate with your Slack channel to keep your team updated on project activity!

Learn more about Sympli at https://sympli.io and sign up to give it a try! We would love to hear your feedback — help us build a better tool for you. You can reach out to us via email or find us on Twitter and Facebook.

Design + Sketch

The best collection of articles, tips, tutorials, and…

Sympli

Written by

Sympli

DesignOps tools to build digital products faster and easier from design in Sketch, Photoshop, & XD to dev in Android Studio and Xcode faster. https://sympli.io

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Sympli

Written by

Sympli

DesignOps tools to build digital products faster and easier from design in Sketch, Photoshop, & XD to dev in Android Studio and Xcode faster. https://sympli.io

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store