Putting assets in order used to be a lengthy process—however, we’ve since sped things up for you.

To make things even quicker for you and your team, below you’ll find everything you need to know about managing assets in Sympli—all in three simple steps.

To start, make sure you’ve installed your Sympli Handoff plugin. Then we’ll begin the first crucial step, marking design elements as assets in Adobe XD, Photoshop, Figma, or Sketch:

First, to generate downloadable assets, designers need to mark them up within their preferred platform. In Photoshop, you should switch to the “Assets Utility” tab and select the desired layer or group in a layers tree, then click the "Mark as Asset" button.

Marking one or more layers as assets in Photoshop

Going further: To add transparent padding to the asset, select the asset layer or group (denoted with an “AST:” prefix) and click the “Set Custom Size” button in the Asset Utility Tab. This will create an invisible shape layer that sets the bounds for exported assets—you can resize it as you wish. Remember to turn the visibility off before the export!

In Sketch or Figma, designers simply need to select the layer or layer groups and make them exportable by clicking “Make Exportable” in the bottom right corner. Alternatively, you can also make a slice. In addition, when exporting from Sketch or Figma, designers don’t have to configure all the required export formats and scales—any option is enough since Sympli Handoff handles scaling and exporting into different formats automatically.

Pro tip: If you want to create an asset with transparent padding in Sketch, place the slice into the group and make sure the “Export Group Contents Only” checkbox is checked on the slice. This way, background layers and other design elements outside of the group are ignored.

“When exporting from Sketch or Figma, designers don’t have to configure all the required export formats and scales—any option is enough since Sympli Handoff automatically handles scaling and exporting into different formats.”

To open the Sympli plugin in Photoshop, go to the menu and click on Windows → Extensions → Sympli Handoff. To open the Sympli plugin in Sketch, go to the menu and click on Plugins → Sympli Handoff → Export to Sympli Handoff. Alternatively, you can access the Sympli Handoff plugin for Sketch using the keyboard shortcut, ⌘ + Y.

When exporting to Sympli Handoff, you can choose to select one or multiple artboards; if you don’t make a selection, all the artboards will be exported. You also have the option to either upload to an existing project or to a new project. Should you choose to create a new project, you’ll see a pop-up asking you to name your project and select the appropriate platform and resolution. You can read more about selecting the right platform and resolution for Photoshop and Sketch in our “How to chose proper project resolution” article.

Creating a new project in the Sympli Handoff plugins for Photoshop and Sketch

Once the desired artboards have been uploaded, there will be a pop-up prompting designers to invite developers either through a sharing link or through email:

After exporting your artboards, you can invite collaborators directly from your design tool.

Sympli Handoff provides designers and developers with an impressive toolkit for improving cross-team collaboration, so make sure to take advantage — at the same time, Sympli Handoff is also committed to protecting your privacy and security, so we’ve come up with measures to make sure uninvited guests don’t take advantage of your team’s work. For example, project owners can disable an active sharing link and regenerate a new one.

“Sympli Handoff automatically generates assets in both bitmap and vector formats, and provides developers with the option to either download assets individually or all at once.”

Developers can access the uploaded designs either in the Sympli Handoff web app or through the Sympli Handoff extensions for Android Studio and Xcode. First, let’s walk through how developers can inspect designs and download assets in the web app.

Web App: After logging in, developers can interactively inspect designs by clicking on any design element and viewing its specifications, which Sympli Handoff automatically generates in platform-specific units. They can then download assets directly from the web app.

Sympli Handoff automatically generates assets in both bitmap and vector formats, and provides developers with the option to either download assets individually or all at once

Android Studio: As soon as they're marked properly as assets in either Photoshop or Sketch before export (see Step 1), all the necessary design elements should appear automatically in the “Assets” tab. There, you can click on the button with the arrow to bring up the assets sync dialog.

There are two main differences between the Sympli Handoff web app and extension for Android Studio: first, the plugin works offline, and second, the plugin integrates more tightly when working with Android projects compared to the web app. For example, the plugin provides a visual Merge Assets feature as well as options to merge colors and fonts. Another handy feature that highlights the deeper integration when working with the Android Studio plugin is the code auto-completion feature: when you select a design element, Sympli will automatically generate code for width, height, margins, etc.

Did you know? Sympli Handoff automatically detects asset naming errors for Android Studio projects, which means no more broken builds for Android devs!

Xcode: As long as they have been properly marked in the design tool (see Step 1), all assets should appear in the assets section of Xcode. If you click on an asset from the list in this section, Sympli Handoff will not only automatically generate specs in platform-specific units, but also automatically highlight for you the corresponding asset on the design mockup—a helpful feature, especially when you’re viewing the design for the first time.

Did you know? Similar to the Sympli Handoff extension for Android Studio, Sympli supports assets merging for Xcode as well.

To recap, it just takes three simple steps for designers and developers to work seamlessly with assets in Sympli:

Our team hopes to help bring order to your world so you can spend more of your time creating awesome stuff. Please don’t hesitate to contact us with any questions, feedback or feature requests you might have.