By using our website you agree with ourPrivacy Policy.

Post Details

How To Prepare Design Files For Better Handoff?

N
Nazli Temurtas

25 Feb 2021

cover

You can use this guide and check whether your design file is ready to share with a developer on Monday Hero.


In this article, you will find the steps to be sure that your Sketch file is ready, and it covers some tips and doā€™s to get the most accurate export. In this way, you can share well-prepared assets and avoid possible mistakes.

In your design, all icons, background images, and logos that will be used in the mobile application must be exportable. So that they can be used easily, and help you to deal with an increased number of devices and resolutions.

Letā€™s check them one by one.

Step 1: Check the icons šŸ”

Checking the icons is important because if you forget to make them exportable, they can look like a background or be missing. Also, a simulator can scale it in a way that you donā€™t want at all since it is not defined as an icon or an exportable image.

You can see some icon examples below.

How to make an icon exportable in Sketch

How to make an icon exportable in Sketch.

The preview of another icon that made exportable

The preview of another icon that made exportable.

After you click the Make Exportable, Sketch will create the default export preset that you need to use in your app. After that, when you export the design to Monday Hero, it will handle the different sizes of presets, grouping, naming, and file management for you.ā€šŸ¤“

But the Multiple Screen Sizes? Here is the Magical Touch of Monday Hero šŸ§™ā€ā™€ļø

Normally, you should create different sizes of presets for iOS & Android. You should put them to the related folder, one by one for every image and icon that you need. Again and again.. For example, in Android, you should create 5 different presets. And for iOS, you should create 3 different presets to support multiple screen sizes. Android Studio and Xcode automatically decide which size is for what device based on the prefixes/suffixes. This is necessary when the same app can run on a variety of devices.

The presets that should be prepared normally for every item

The presets that should be prepared normally for every item.

But with Monday Hero, you donā€™t need to think about the steps that we mentioned above. Just click to Make Exportable and export to Monday Hero when all are done. It will handle all the steps that you should consider about the assets and their management. šŸ¤“

Step 2: Check the background šŸŒ‡

If you have a background image that consists of more than one part, they should be grouped and then should be marked as exportable, as shown below.

Grouping the elements that are the background when they come together

Grouping the elements that are the background when they come together.

Select blue items and Group them by selecting Group Selection in the right-click menu. Then, you should make the group exportable. You can find how to make them exportable below. It is like other elements, but be sure that you clicked the group first not a single element.

How to make a group exportable in Sketch

How to make a group exportable in Sketch.

When you make the background exportable, you should see the image as a whole. This is a usual handover process for delivering developer to the background image.

The expected result from grouping and making the group exportable

The expected result from grouping and making the group exportable.

Thatā€™s all, the background is ready to go! āœŒšŸ»

Step 3: Check the logo šŸ‘€

Donā€™t forget to make exportable other icons, such as the logo. You can leave other layers as they are. When you make exportable an item, be sure that you check the preview on the below right.

Preview of an exportable icon

Preview of an exportable icon.

Step 4: Use only the design šŸ‘©ā€šŸŽØ

Mockup (Device curves, etc.) should not be in the Artboard design. Mockup rectangle or designs should be removed. Only keep the things that essential for the app.

Mockup rectangle/designs should be removed

Mockup rectangle/designs should be removed.

Also, we are aware that designers do lots of tricks to have a perfect design. Like the rectangles that you see below. You may use vectors, lines, or some shapes. Before exporting the screens, please be sure that you removed these handy objects/layers.

The lines or shapes that used for perfect design should be removed

The lines or shapes that used for perfect design should be removed.

The lines or shapes that used for perfect design should be removed

The lines or shapes that used for perfect design should be removed.

And as the last one of this step, check your text boxes. If you leave the textBox larger than you need while designing, it may cause some errors related to constraints and unwanted results in the export.

Textboxes

Thatā€™s all for checking the Sketch file. Letā€™s see what may happen if you didnā€™t fulfill these steps.

1- No exportable dialog in the Adobe XD.

This happens when you try to export a screen/artboard that has no exportable images. Donā€™t worry, it is only a warning. If you donā€™t have exportable images in the artboard, you can click Continue and keep importing your designs.

Solution: If you have an artboard that you want to export some elements, click Cancel. Check the previous steps, and be sure that you click the ā€˜Make Exportableā€™ button.

No Exportable Image Dialog

No Exportable Image Dialog.

2- You may see transparency/transparent areas instead of the expected icon/logo/background. The reason is some images didnā€™t group and made exportable properly.

The result of a bad export/handover

The result of a bad export/handover.

Solution: Check the previous steps and be sure that they are visible, grouped, and exportable.

Thatā€™s all šŸ¤“ If you have any difficulty or questions, please feel free to reach us via Slack.

Enjoy your day!