Sketch Exports to Asset Catalogs1-click handoff for design assets

Cover Image for Sketch Exports to Asset Catalogs

Having all your assets up to date on a given project is key to provide the users with the best the design team can offer. It is really simple to make sure your new design exports are 1 click away from anyone on the team.

Let’s review how Xcode keeps the image assets organized in the project and discuss how we can provide better.

The Asset Catalog

The Xcode Asset catalog is the way to go to import image assets to iOS and configure their behavior. When creating a new Xcode project for iOS, an Assets.xcassets file will be automatically included with the project icon.

This file will contain most of the project assets throughout its lifecycle.

Asset Catalog

Asset Configuration

It is highly advised to use this format in your project for, among many, the properties you can attach to the assets directly from Xcode. If we select one of the elements you can see that the Inspector presents many useful options regarding how the asset is going to be presented on the app. In this article we will not spend time explaining these options as they are too use-case tailored.

Asset configuration

Sketch Export Structure

Before we look at the asset catalog, let’s take a look into how a regular assets export comes from Sketch.

Sketch is super neat when doing exports. It is able to parse slashes and create subfolder for names that look like folder paths. This is an example of a whole file export from Sketch neatly organized.

Asset Catalog Folder Structure

If you drag and drop this same folders into and asset catalog, they will be parsed and placed according to Xcode’s rationale. By right-clicking into the catalog file and select to reveal on Finder, you can see that the folder structure is a little different.

Each subfolder branches perfectly by the folder structure of the imported asset until it reaches the asset itself. The asset itself is enclosed into a Name.imageset folder that may hold 1 or more assets depending if you are using single or multiple scale assets.

For example, in this export I’m only using PDF exports (single scale, single file) and the configuration of this asset such as its single-scale and template rendering is held on the Contents.json file.

A Single Export Source

It’s always important to remember that the exports only serve the software developers on the project and, do not have use to the designer. An example of mapping your exports to better serve your developers is to create a new page for the exports as slices where you place neatly every single pixel or vector exported.

Naming Exports

A neat feature of Sketch is that it is not only able to map exports to folders but to override files inside folder paths. This provides a good way to use whole folder exports.

To take advantage of it, it is required to map the slice names to names that follow the Asset Catalog convention.

Path/To/File/Named ➡️ Path/To/File/Named.imageset/Named

Exporting into the Catalog

Once you have this set you may just press export and target the Assets.xcassets folder. One major caveat of this process is that it is not able to generate the Content.json file from Xcode, therefore it is advised to use this once the Asset Catalog is set and configured.

Conclusion

Handoff is a critical part of the development process and streamlining it is key in providing better service for the client and better products for the end using. It may not be the case that this will fit in your workflow perfectly but it sure does open some doors such as exporting automatically using Sketch CLI tied to CI tools.

Other blogs