Workflow Basics

Design to Code Workflow for Developers and Designers

Most users and teams follow this workflow while using Monday Hero. Although not mandatory, this guide provides a smoother approach to leveraging Monday Hero effectively.

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.

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.

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.

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.

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.

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.

What's Next?

Let's get to work! You can download and create your first project on Monday Hero.