Sympli is a web- and plugin- based app that streamlines and accelerates digital product development by expediting sharing and collaboration between designers, developers and product managers on web and mobile app projects.

Sympli - Streamlining Designer - Developer Collaboration

Anyone who works on a web or mobile app development project has experienced it — the seemingly endless back and forth between developer and designer for all things related to the design. Developers asking for fonts, sizes, positioning, and colors. Designers sending the latest updates of images and assets. Files sent via email, Dropbox, Google drive, Slack — you name it. It’s a messy and time consuming process and, inevitably, things are lost in the shuffle. Well, we’ve seen it too. So, we decided to do something about it with Sympli, the simplest way to connect designers and developers so that specifications, assets, notes, and information are easily and automatically shared and project collaboration is optimized and streamlined.

Today, we’re going to show you how to connect your design and development teams quickly and easily using a new project in Sympli, Sketch, and Xcode. First, we’ll walk through the process from the design team perspective and then, we’ll go through the steps after handoff to the development team. NOTE: We don’t go into creating an account or setting up the plugins, but you can find more information about how to start at https://sympli.io. While this example uses Sketch and Xcode, Sympli also works with Photoshop and Android Studio, so no matter your environment, we’ve got you covered!

Step 1: Design Complete

You’ve finished your awesome new app design and are ready to hand the baton off to your development team to implement it. Don’t worry, you don’t need to manually create specifications documents, share assets, provide fonts, and other steps — Sympli automates these tedious manual tasks and makes it easy! So, get your design loaded up in Sketch and make sure you have the Sympli plugin for Sketch installed and working.

Step 2: Mark Assets Exportable

Before exporting your design, make sure that your visual assets are marked as exportable so that Sympli will automatically generate both vector and bitmap assets at the correct scale for your design. Select the object in your design and click Make Exportable in the bottom right corner of Sketch.

Sympli - Streamlining Designer - Developer Collaboration
Marking an image exportable – 1
Sympli - Streamlining Designer - Developer Collaboration
Marking an image exportable – 2

Step 3: Export Design

Now that the design assets are all properly configured as exportable, you need to export your design to Sympli. With the Sympli plugin for Sketch installed, go to Plugins → Sympli → Export to Sympli or pressing ⌘+Y. Select the specific artboards (or elements) you want to export within the layers tree or on the canvas itself. If you don’t select any artboards or elements, all the artboards within the current page are exported.

Sympli - Streamlining Designer - Developer Collaboration
Exporting the design to Sympli

Step 4: Login

When exporting, if you are prompted to login, enter the email and password for your Sympli account.

Step 5: Create Project

Now, you need to create a new project in Sympli to which your new design will be uploaded and be shared with your development team. Click the Create New Project button.

Step 6: Add Project Settings

Enter a name for your project, select your platform, and choose your resolution. If you are using standard artboard templates from Sketch, always select @1x for iOS or web projects or mdpi for Android projects. Hit Create and Sympli will automatically generate the specifications as well as the vector and bitmap assets in the design and upload it to our secure cloud.

Sympli - Streamlining Designer - Developer Collaboration
Creating a Sympli project

Step 7: Invite Your Digital Product Team

Once uploaded, share your design with the team by typing in their email addresses (either comma or space between each email address) and clicking the Share button. Alternatively, you can send the project sharing link to your team through your team’s group chat or via email.

Sympli - Streamlining Designer - Developer Collaboration
Inviting your team

Step 8: Make Changes

Need to update the design? It’s simple. Just make the changes to your design in Sketch and export the design again. Sympli automatically creates a new version of your design and stores it in our secure cloud. Not only that, we track the changes in the specifications to easily identify what changed and when and view differences between design versions.

Step 9: Organize

You can also organize your designs by tagging screens with additional information that will help you and your team. To add a tag to a screen through Sketch, first you need to show the tags in Sympli by going to Plugins → Sympli → Show Tags or clicking Control (^) + T. You can enter anything you’d like as a tag and can add multiple tags by separating them with commas. The Sympli web app also lets you tag designs — even allowing tagging of multiple designs at the same time by holding shift and clicking on the design card and then adding the tag.

Sympli - Streamlining Designer - Developer Collaboration
Adding tags to designs to better organize them

Step 10: Collaborate

Need to share information with the team about specific design elements? Add a comment to the design and / or element and let the team know what you are thinking. To add a comment, you must be using the Sympli web app. So, login at app.sympli.io, choose your project and design. Then, click the add comment button in the left-hand tool bar. Move your mouse to where you want to add your comment on the design and click. Type in your comment and hit enter to send it. You can even mention people specifically in your comment by typing @ and their user name. As you type, Sympli will auto-show matching team members from which to select. When you mention someone in a comment, Sympli sends a notification email to them indicating the project, design and location of your comment as well as the text of your comment. Collaboration done Sympli.

Sympli - Streamlining Designer - Developer Collaboration
Adding comments and annotations to streamline collaboration and discussion

Step 11: Accept Invitation

As a developer, you just were told that your designers have wrapped up the design for your company’s new iOS app. Don’t worry about going through endless design documents and searching for the specifications and assets associated with the design and manually adding them to your Xcode project — Sympli has you covered. After receiving the invitation email, click the Accept Invitation button to gain access to the project. You must accept the invitation before you can see the project in Xcode.

Step 12: Open Xcode

Launch Xcode and open the app project that corresponds to the design or create a new project.

Step 13: Open Sympli Plugin

Open Sympli from within Xcode by clicking the Sympli icon at the top right of the main Xcode window. A panel of Sympli projects will open.

Sympli - Streamlining Designer - Developer Collaboration
Sympli plugin in the Xcode main window

Step 14: Select Project

Select your project from the list of projects in the Sympli panel to view the project. By clicking the project thumbnail image, the project resources will be loaded.

Sympli - Streamlining Designer - Developer Collaboration
Project selection within the Sympli Xcode plugin

Step 15: Import Assets & Fonts

Now that your project is loaded, you can load project assets by expanding the menu in the Sympli icon in the top right of the main Xcode window and choosing Import Assets. The Merge Assets dialog will appear through which you can select the assets that you’d like to import into the project. Any assets already in the project are displayed and all assets that were marked exportable in the design are displayed. You can choose to import as PNG or PDF by choosing the appropriate button at the top of the dialog.

Then, simply check the assets to import and click Import. You can also edit asset names by clicking the pencil icon. Click Import to complete the import process. Through the import menu you can also import the fonts from the design through the Import Fonts options. Sympli also lets you export multiple assets at a time by selecting one or more shape layers in the mockup (click on several elements while holding down the Shift key) and then clicking Export in the details panel on the right. Sympli will then automatically generate vector PDF assets from the selected layers.

Sympli - Streamlining Designer - Developer Collaboration
Import menu and the import / merge assets dialog

Step 16: Inspect the Design

To see the properties and styles in the design, you can select the component directly through the layout view in the Sympli plugin, or you can click the layers option in the inspector and expand the layers to select the component.

Sympli - Streamlining Designer - Developer Collaboration
Inspect the design, assets, styles, and specifications

Step 17: Import Elements, Styles, Colors, & Values

Now comes the cool part — you can simply drag and drop elements from the design into your Xcode app project and the assets, styles, colors, positioning and other attributes are automatically added. Click the asset in the Sympli design layout and drag and drop to the Xcode project window and Sympli takes care of the rest. Sympli also lets you easily apply styles to a view by selecting element in the mockup and holding the Control key down while dragging to the app’s screen.

Step 18: Compare Versions

Did the design team change something? No worries. Sympli’s plugin tracks design versions and lets you compare versions to see the differences. If your design has multiple versions, you’ll see a button labeled # versions where the # is the number of versions. Click that button to view and compare design versions. Using the arrow buttons below the version preview, you can move between versions. Not enough detail? Open the Sympli web app version diff tool and see versions side by side with the differences highlighted. Clicking the highlighted differences allows you to view the exact changes that were made.

Sympli - Streamlining Designer - Developer Collaboration
Browse versions within Sympli
Sympli - Streamlining Designer - Developer Collaboration
Version visual difference tool with change highlighting

Sharing designs and collaborating is simple when using Sympli to connect designers and developers. Many of our customers save upwards of 20% on design-development cycles by letting Sympli automate repetitive tasks, track and compare versions, capture comments, and much more. Try Sympli on your next project by creating a free account at https://app.sympli.io/signup.


Expert Tips


Expert Tip 1:

Comments & Collaboration. Sometimes you need to share additional information about the design with your development team. In Sympli’s web interface, click the annotations icon on the left to add information and context for your team. When adding a comment, type @ and select a team member to notify them directly. It’s also a great way for developers to quickly ask designers questions and get rapid feedback.

Expert Tip 2:

Inspect Version Differences. What changed? How often has a developer asked that question of a designer. Through Sympli’s web app, team members can visually compare design versions and immediately see the changes between the versions. Simply select the design in the web app and click the “Browse Changes” link at the top to see designs side by side with changes highlighted. Explaining each design change is now a thing of the past!

Expert Tip 3:

Team Management. Starting a new project with the same team as a previous project? Quickly add all your previous team members through the project sharing dialog. Simply click the “Add Teammates” tab and click the previous project in the list to automatically select all the team members that had access to that project. Then, adjust the permissions / roles for each team member and click “Update Access” to quickly add these users to your new project.


Keyboard Shortcut Tips


Expert Tip 4:

Use the keyboard shortcuts built into Sympli’s Sketch plugin help you save time.

⌘ + Y = Export to Sympli
^ + T = Show Tags
^ + ⌘ + T = Hide Tags

Expert Tip 5:

Use the keyboard shortcuts built into Sympli’s Xcode plugin help you save time.
Esc = Exit Ruler Mode or Remove Layer Selection or Cancel Drag/Style Drag

⇧ or ⌘ + ← = Open Previous Design
⇧ or ⌘ + → = Open Next Design
+/- = change zoom level
* or ⇧ + 0 = Restore Zoom to Normal
⇧ + Click Layers = Select Multiple Layers

Expert Tip 6:

Use the keyboard shortcuts built into Sympli’s web app help you save time.

⇧ + Click = Select more than one design within a project
⇧ + → = Open Next Design