Prepare Design To Get Best Results

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

It is important to prepare designs on Figma/Adobe XD/ Sketch app to get the best code results on Monday Hero. It's easy to prepare them before importing - takes only a few minutes. It includes steps such as removing duplicate and unnecessary layers/objects, grouping images, and making them exportable for Monday Hero to upload image assets.

You can either watch the video below or continue to read to learn how to prepare the design to get the best results in Monday Hero.

Design Handoff Essentials

While handing off designs to a developer in other hand-off tools, it's important to make images exportable for them to be able to download images, otherwise, developers won't be able to download it as a whole image/icon. The same applies here, if you don't make images exportable, they will be treated as empty images and they won't be uploaded to Monday Hero.

This writing covers 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

Find all the images and icons on the page, and make them exportable so they can be imported to Monday Hero as images. Before making them exportable, please make sure they are either one piece/layer or grouped correctly as one image.

How to make exportable:

1. Select the icon/image/group on the left side(layers menu),

2. Click the make exportable button on the right side.

Once you click the make exportable button, you can see how it will be exported in Monday Hero too.

Sketch

The preview of another icon that made exportable.

Adobe XD

The preview of another icon that made exportable.

Here are some use cases:

• Logo: Generally logos doesn't consist of one layer, that's why you need to group the path/lines/texts in the logo as a whole and make it exportable. Otherwise, they can look improperly because every path will be defined and placed as a single image. Group and mark them exportable so that the paths and lines can come together and get exported as one image seamlessly.

Sketch

Example of a design with many pathes.

Adobe XD

Example of a design with many pathes.

• Icon: Icons generally consist of paths and lines, however they should be treated as one image in the code, that's why please group and make them exportable.

Sketch

Grouped and exportable paths in Sketch.

Adobe XD

Grouped and exportable paths in Adobe XD.

• Background Image: Sometimes background image of the screens are sliced like below. In this case, group the image, and mark as exportable. When you make the background exportable, you should see the image as a whole.

Sketch

How to make a group exportable in Sketch.

Select the background items and Group them by selecting Group Selection in the right-click menu and make the group exportable.

The expected result from grouping and making the group exportable.

Adobe XD

Grouping the background items

Select the background items and Group them by selecting Group Selection in the right-click menu and make the group exportable.

How to make a group exportable in Adobe XD.

• Background Image with a colored layer: The background image should include only one/grouped exportable image. However, sometimes layers are added to the top of the background in order to make it look better. 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 one image.

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

2. Remove Mockups

Once you add mockups(device curves, etc.) to your designs, you will get the code of the mockups in Monday Hero too. However, it's not good to include a mockup image in the code, that's why please remove mockups and keep the things that are essential for the app.

Mockup rectangle/designs should be removed.

3. Remove the guiding objects

Designers do lots of tricks to have the design pixel-perfect. 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.

4. Use the Rectangle tool to draw Rectangles, not the Path/Pencil tool

Rectangles are generally used as backgrounds or containers in the code. However, the path and pencil tools can be used to draw the same rectangles too, and it's impossible to see the difference in the outcome.

When drawing a rectangle, you should use the Rectangle tool, otherwise, it leads to problems in the generated code. The reason behind this is, when you use the rectangle tool, Monday Hero will turn this rectangle into a view/background/container code, however, when using the path/pencil tool, the same rectangle will result in an image code instead of a background/view/container code.

It's okay to use a pen and pencil tool for the icons and other images.

Drawing a rectangle

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