Workflow Basics

Workflow basics that most developers and designers use while converting the Sketch / Adobe XD design to iOS / Android native code with Monday Hero.

Design to Code Workflow for Developers and Designers

Most users & teams follow this workflow while they are working with Monday Hero. 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

Optional Step: Customize The Code Before Export

You can change the code preferences and maintain your/team's code standards. It allows you to export the code as you prefer and helps you to get the best fit for your already agreed/existing codebase.

Read about how to configure your code preferences here.

Code Preferences

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 it 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

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.