Prepare Design to Get the Best Code Results

Use this guide to check whether your Figma, Adobe XD, or Sketch design file is ready for handoff to the developer on Monday Hero.

It is crucial to properly prepare your designs in Figma, Adobe XD, or Sketch to ensure the best code outcomes in Monday Hero. The preparation process is straightforward and takes only a few minutes. It involves steps such as removing duplicate and unnecessary layers or objects, grouping images, and setting them to be exportable so that Monday Hero can upload image assets.

You can either watch the video below or continue reading to learn how to prepare your design for optimal results in Monday Hero.

Design Handoff Essentials

When handing off designs to developers using other hand-off tools, it's important to make images exportable so they can be downloaded as complete images or icons. The same rule applies here: if you don't make images exportable, they will be treated as empty and won't be uploaded as needed to Monday Hero.

This document covers tips, do's, and don'ts. Let's examine some use cases one by one.

It's essential to make only images (or any elements you want the Monday Hero app to treat as images in the code) exportable. There is no need to make texts, rectangles, or ovals exportable. When you set images as exportable, they will be added to the assets folder in your code as images.

1. Make icons/images exportable

Locate all the images and icons on the page and set them to be exportable so they can be imported into Monday Hero as images. Before setting them as exportable, ensure they are either a single layer or are correctly grouped as one image. In the case of groups, ensure that the parent group layer is exportable.

How to make exportable:

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

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

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

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 consist of multiple layers, not just one. Therefore, you need to group all paths, lines, and texts in the logo together and make the entire group exportable. This prevents each component from being treated and placed as a separate image, which could result in an incorrect appearance. Grouping and marking them as exportable ensures that all paths and lines are combined and exported as a single, seamless image.

Sketch

Example of a design with many pathes.

Adobe XD

Example of a design with many pathes.

• Icon: Icons typically consist of paths and lines, but they should be treated as a single image in the code. Therefore, please group all components of the icon and make the entire group exportable.

Sketch

Grouped and exportable paths in Sketch.

Adobe XD

Grouped and exportable paths in Adobe XD.

• Background Image: Sometimes, the background image of the screens is sliced, as shown below. In such cases, group the image slices and mark the entire group as exportable. By making the background exportable, it should appear as a single, cohesive image.

Sketch

How to make a group exportable in Sketch.

Select the background items, right-click to choose 'Group Selection' from the menu, and then 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: Typically, the background should consist of a single image or a grouped exportable image. However, additional layers might be added on top of the background to enhance its appearance. To prepare this type of background for development, depending on your specific case, you should group, merge, or mask these layers, and then mark them as exportable. This will ensure the background is ready to be used as one cohesive image.

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

2. Remove Mockups

Adding mockups (such as device curves) to your designs means that Monday Hero will also generate code for these mockups. However, including mockup images in the code is not advisable. Therefore, please remove any mockups and retain only the elements that are essential for the app.

Mockup rectangle/designs should be removed.

3. Remove the guiding objects

Designers often use various techniques to achieve pixel-perfect designs, including using rectangles, vectors, lines, or other shapes for alignment and measurement purposes. Before exporting the screens, ensure that these guiding objects or layers are removed from the design.

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 commonly used as backgrounds or containers in the code. While the path and pencil tools can also draw rectangles, it's important to use the Rectangle tool for consistency. The outcome may appear the same in the design, but using the Rectangle tool ensures proper code generation in Monday Hero.

When you draw a rectangle using the Rectangle tool, Monday Hero interprets it as a view/background/container code. However, if you use the path/pencil tool, the same rectangle will result in an image code instead.

It's acceptable to use the path and pencil tools for drawing icons and other images.

Drawing a rectangle

That's it! You're all set. Now you can import your design to Monday Hero!