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.

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.

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.

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.

Grouped and exportable paths in Sketch.
  • 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.

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.

  • 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!

Last updated

Was this helpful?