Prepare Design To Get Best Results
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.
Making images exportable 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.
It's critical to make only images(or anything you want the Monday Hero app to treat as an image in the code) exportable, no need to make texts, rectangles, ovals exportable. When you make the images exportable, they will be added to the assets folder as images in your code.
When you forget to make images exportable or have grouping problems, they will be exported in an incorrect/unwanted way as you can see below.
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. Let’s see some use cases one by one.
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.
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.
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.
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.
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.
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.
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.
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.
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.
You can group and mark them exportable so that the paths and lines can come together and get export in one image seamlessly.
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.
Mockup (Device curves, etc.) should not be in the Artboard design. Only keep the things that essential for the app.
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.
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.
That’s all for checking the design file. You are ready to continue with Step 2: Export Design to Monday Hero.
