Prepare Design To Get Best Results

You can use this guide and check whether your Adobe XD / Sketch design file is ready to handoff to the developer on Monday Hero.

Best Ways to Handoff a Design to Developer

You will find the steps to be sure that your Sketch/Adobe XD 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.

As the most important point, all icons, background images, and logos that will be used in the mobile application must be grouped with the related items if they include more than one item, and made exportable in both cases. When you forget to make them exportable or have grouping problems, they will be exported in an incorrect/unwanted way as you can see below.

Exportable Image vs non-exportable Image

Making images exportable for handover is critical for mobile app development, therefore exportable images can be used easily, and help you to deal with an increased number of devices and resolutions.

Let’s make the final touches one by one.

🔍 Make the icons and images exportable

Check and make the icons and images exportable. Be sure that they are grouped with the items that they consisted of. You can see some making exportable examples related to your design tool below.

Sketch

How to make an icon exportable in Sketch.

The preview of another icon that made exportable.

Adobe XD

After you make them exportable, you can export the design to Monday Hero. It will handle the different sizes of presets, grouping, naming, and file management for you.‍

Additional Info: Supporting Multiple Screen Sizes while Converting Design to Code

Normally, you should create different sizes of images for iOS & Android. Developers put them to the related folder, one by one for every image and icon that you need.

For example, in Android, you should create images at 5 different pixel densities. And for iOS, you should create images at 3 different pixel densities to support multiple screen sizes. So, they can be used according to device sizes by getting the best fit.

But with Monday Hero, you don’t need to think about the steps that we mentioned above. Just make them exportable and export design to Monday Hero when all are done. It will handle all the steps that you should consider about the assets and their management.

The pixel densities that should be prepared normally for every item.

🌇 Check the background and make exportable

If you have a background image that consists of more than one item, group, and mark as exportable, as shown below. 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.

Sketch

Grouping the background items

Select the background 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.

The expected result from grouping and making the group exportable.

Adobe XD

The background should include only one/grouped exportable image. You can find another example below that developers mostly face and have trouble in the design.

Example of using gradient in a rectangle to make the design look better.

In this example, the designer put a rectangle over the background and added a gradient to it to make it look better. Now, the background image has 2 layers and looks as imagined. To make this background ready for development, it should be grouped/merged/masked depends on your case, and mark exportable. Then, the background will be ready to use as an image.

🖌 Group the paths and lines and make exportable

If your design includes more than one paths/lines you should group and make them exportable to have the complete look. Otherwise, they can look improperly because every path will be defined and placed as a single image. Let's see some examples.

Sketch

Example of a design with many pathes.

Grouped and exportable paths in Sketch.

Adobe XD

You can group and mark them exportable so that the paths and lines can come together and get export in one image seamlessly.

👀 Check the logo and make exportable

Don’t forget to make other icons exportable, 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.

Sketch

Preview of an exportable icon.

Adobe XD

👩‍🎨 Use only the design

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

Mockup rectangle/designs should be removed.

📐 Remove the guiding objects

We are aware that designers do lots of tricks to have a perfect design. To align/measure the objects, it's possible to use the rectangles like below, or vectors, lines, or some shapes. Before exporting the screens, please be sure to remove these handy objects/layers.

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

📝 Check the texts

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

The text area shouldn't be larger than you need.

That’s all for checking the design file. You are ready to continue with Step 2: Export Design to Monday Hero.