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.
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:
Select the icon/image/group from the left side (layers menu),
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.
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.
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.
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.
Select the background items, right-click to choose 'Group Selection' from the menu, and then make 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.
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.
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.
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.
That's it! You're all set. Now you can import your design to Monday Hero!
Last updated
