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.
1. Make icons/images exportable  
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:
Sketch
Adobe XD
How to make an icon exportable in Sketch.
The preview of another icon that made exportable.
How to make an icon exportable in Adobe XD.
The preview of another icon that made exportable.
2. Group 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.
Sketch
Adobe XD
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.
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 Adobe XD.
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.

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.
 3. Group the paths/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
Adobe XD
Example of a design with many pathes.
Grouped and exportable paths in Sketch.
Example of a design with many pathes.
Grouped and exportable paths in 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. 
 4. Group 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. Please don't make other texts exportable or they will be treated as images too. 
Sketch
Adobe XD
Preview of an exportable icon.
Preview of an exportable icon.
5. Remove Mockups 
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.
6. 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.
That’s all for checking the design file. You are ready to continue with Step 2: Export Design to Monday Hero.

Import Sketch Design Files Into Monday Hero

Next - WORKING WITH MONDAY HERO

Components

Last modified 3mo ago

Copy link

Contents

1. Make icons/images exportable

2. Group the background and make exportable

3. Group the paths/lines and make exportable

4. Group the logo and make exportable

5. Remove Mockups

6. Remove the guiding objects