Checklist for Design Element Review and Code Generation
Design Element Review and Checklist
Last updated
Design Element Review and Checklist
Last updated
If the code you downloaded from Monday Hero doesn't match your expectations, it might be due to issues with the design files. Follow these steps to troubleshoot and resolve any problems:
Review Design Elements: Before anything else, examine all the design elements listed in the left menu. While Monday Hero typically removes unnecessary layers, you might need to manually remove some to ensure accurate code generation. Refer to the checklist below for reviewing design elements.
Checklist: Let's use a real-life example from the Sage AI app to guide us through a checklist for your design.
Start by clicking on elements in the widget tree. Each click will highlight the corresponding layer on the screen image. Remember, every layer in the widget tree generates code.
Start the checklist by clicking on elements on the widget tree. Once you click on the layer, it will be highlighted on the screen image. Every layer in the widget tree will generate a code for the layer. While Monday Hero typically removes unnecessary layers, you might need to manually remove some to ensure accurate code generation while checking the checklist.
Problem: In the example below, the cat image consists of too many layers, as seen in the gif below. Having too many layers means Monday Hero will generate separate code for each layer in the widget. Since we only want one image code for one image, we need to group the layers to treat them as a single image.
Solution:
To resolve this issue, you need to group all the layers of the image using your design tool. Once you've grouped them, ensure the group is exportable as a single layer instead of multiple layers. Don't forget to upload the same design to Monday Hero for updating. For detailed instructions, read the information here:
Prepare Design to Get the Best Code Results
Once you've addressed this layering problem, the image will appear as a single entity, eliminating unnecessary code.
Problem: When you're inspecting the layers, you might notice some that aren't visible on the image but are still highlighted. This occurs because the layer exists in your design for some reason, such as being hidden behind another layer or forgotten there. Including unnecessary layers can clutter the code and affect performance.
Solution: To address this issue, ensure to remove any unnecessary layers from your design. You can do this by directly deleting them or by selecting 'do not include' from the code generation options. This step ensures that only essential layers are included in the code generation process, resulting in cleaner and more efficient code.
Problem: While inspecting layers, you may notice that they do not have the correct component name. For example, in the image below, there is a container named 'buttonView' and it contains a text. However, it is preferable to consolidate them into a single button component in the code, rather than having them as separate layers.
Solution: Ensure that the layers have the correct component type. If you haven't created components yet, select the layers and create the appropriate components, such as buttons. For detailed instructions on creating components, refer to the documentation available how to create components here.
Problem: Once you're sure you've completed the first 3 elements on the checklist, you're ready to inspect the layout. Monday Hero automatically creates the layout elements once the 'Make Layout Component' button is clicked. Then, it will automatically create rows, columns, and stacks. Once you preview the code result if the layout doesn't become responsive the way you'd like, then the layout problem should be fixed. If they are not grouped correctly, the responsive layout won't work as expected.
Solution: Once you preview the code result and the layout doesn't become responsive the way you'd like, please right-click and edit the rows, columns, and stacks to achieve the desired result. For more information on Monday Hero how to create and edit them, please refer to our documentation.
The layout elements work in the same way as they normally do in the code. So if you're unsure how they function, please refer to the Flutter official website.
Problem: After completing the first 4 checklist elements, if you still haven't achieved the desired code result, it may be due to encountering an overflow bug or missing a layout element.
Solution: Click the AI Assistant button in the code section. You can then choose from pre-written prompts or write your own. Select "Overflow bug fix" for overflow bugs, or describe your bug and begin fixing it with the Hero AI Assistant. If you require new prompts, you can request them via the suggest a new feature link.
Congratulations on being a bug hunter! We hope you've achieved the desired code results with Monday Hero. If you still encounter issues or simply want to chat with us, please feel free to reach out. We look forward to hearing from you!
