Prepare Design To Get Best Results
It is important to prepare images(assets) to get the best code results on Monday Hero. To prepare assets, mark images as Exportable on Figma/Adobe XD/ Sketch app. In this way, the images will be exported in code too. Otherwise, they will be treated as empty images and they won't be downloaded.
Normally, it's necessary to prepare different sizes of images and put them in the related folder for iOS & Android. However, with Monday Hero, no need to think about these steps. Just mark images as exportable and export design to Monday Hero and, It will handle all the steps.
This writing covers some tips, do’s and, don'ts. Let’s see some use cases one by one.
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.
Check and make the icons and images exportable. Be sure that they are grouped and made exportable correctly as one image. Here are some examples:
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.
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 with 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. Please don't make other texts exportable or they will be treated as images too.
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.
That’s all for checking the design file. You are ready to continue with Step 2: Export Design to Monday Hero.
