Workflow Basics

Design to Code Workflow for Developers and Designers
Most users & teams follow this workflow while they are working with Monday Hero. Please note that this is not a mandatory workflow, but if you are searching for a smoother way to use Monday Hero, you are in the right place.

This workflow includes 3 phases:
1.The first phase covers the design, and the user-interface needs to be prepared in either Sketch or Adobe XD. 
2.The second phase is about how you develop your project. In this phase, you can edit the generated code by defining the interactions (like buttons, text views, and lists...) of the layers/views.  
3.Then, you can export your project and pass on the last phase, the Edit & Review. In this phase, you will have your ready-to-run project UI. You can do your edits and continue to develop your project in your favorite IDE. 
It is always possible to have some changes in UI while working with designers/customers. When you got reviews and changes, it is possible to keep up with them easily by following the flow from Phase 1: Design till Phase 3: Edit & Review again. You can generate and add changes to your existing project.
 
A designated workflow in Monday Hero
Phase 1: Design 
As we mentioned above, the design file needs to be prepared in either Sketch or Adobe XD. After you finish your design, you should check whether your design file is ready to share with a developer. This is one of the key points to get the most accurate export from Monday Hero.
In the design phase, you have two steps to follow after you complete your design:
Step 1: Check The Design File 
In the design file, all icons, background images, and logos that will be used in the artboards must be exportable and grouped, so that they can be used easily. Also, mockup rectangles or designs should be removed from the design file. 
You can read more about how to check the design file and avoid possible mistakes here.​
A Common Mistake Example
Step 2: Import Designs into Monday Hero
After reviewing the design file and making the final touches, you are ready to export via plugins. Select the artboard/s that you want to work on, and export it/them by using Monday Hero Plugin in your current design tool. 

Learn more about how to import a design file into Monday Hero.​
Export Designs to Monday Hero
Phase 2: Develop
Step 1: Converting Layers / Views Into Components 
When you import a design, Monday Hero automatically understands images, texts, and views in the design. In this step, it expects you to define the interactions of the layers/views. You can select the layers and define them as buttons, text inputs, lists, or any other components that you want to use, in that particular scenario.
You can create the components with a couple of clicks, and you will see the generated code immediately.
Learn more about how to convert layers to components here.​
Converting Layers into Components
Step 2: Export Code as Swift/ Kotlin & XML Code
There are two ways to get ready-to-run code out of Monday Hero: exporting a single screen or whole project. You can export them as a new project, or you can export your changes into your existing project.
Exporting Screen: If you want to export just a single screen, it will give you all the required code and assets to add to your existing project. It helps you to handle last-minute changes. 

Exporting Project: If you are working on a new app and didn't export before, this is the best to export the entire project. You will get a ready-to-run project code with all screens that you prepared.
Depends on the project that Read and learn more about how to export code here.​
Exporting Code in Mac Desktop App
Phase 3: Edit & Review 
This phase takes place out of Monday Hero. You already exported your project UI source-code and assets as an Xcode project or Android Studio project, and it is ready for development. You can build your project, work on the backend services and configurations as you wish.
When you have some changes in UI, it is possible to keep up with them easily by following the flow from Phase 1: Design till Phase 3: Edit & Review again. You can generate and add changes to your existing project. Then, you can work in your development environment.
What's Next?
Let's get to work! You can download and create your first project on Monday Hero.

Overview

Next - Getting Started

Installing the Desktop App

Last modified 11mo ago

Copy link

Outline

Design to Code Workflow for Developers and Designers

Phase 1: Design

Phase 2: Develop

Phase 3: Edit & Review