What is Monday Hero?

Monday Hero converts designs into iOS and Android code for developers and designers. It doesn't mean that you won't code, it means that Monday Hero will understand and generate layout code, assets, fonts, colors.. for you. With Monday Hero, you don't need to code the UI design details again that are already well-prepared by a designer. You can save time by removing repetitive manual work in the UI and focus on the functionality/creativity more.

Monday Hero supports Sketch App and Adobe XD designs now, you can export design via a plugin. Figma will be supported soon.

In Monday Hero, you also improve the team's handoff process between designers and developers.

You can also see how to use Monday Hero's Mac App in the 6-minutes-video below. In this tutorial, you can learn:

1. How to upload designs to Monday Hero,

2. Monday Hero platform,

3. How to create components like buttons, text fields, and lists,

4. Exporting code and launching on a mobile device.

The Adobe XD design file is here: ​http://bit.ly/MondayHeroTravelApp​

When you watch the video, you'll see that Monday Hero automatically understands the images, texts, and views in the design. Therefore, it expects you to define which layers will be converted to components/widgets like buttons, text boxes, lists, or grids that you may need in almost every app. You can generate the component's code dynamically.

At the last step, you can export the latest version of your project UI with one click as an Xcode project or Android Studio project, and it is ready for development. You can start with the Workflow Basics to see the way we recommended for getting the smoothest experience.

What are the key benefits?

Speed up your workflow ⚡️

Save time in the UI part that already well-prepared by a designer up to 30 percent in total project time.

Bring your designs into life 🎨

It's so easy to have the correct color, font, and pixel for every item. It's so easy to bring your designs to life now.

Meet the demands on time ⏳

Have more time to focus on functionality, coding, and testing.

Get ready-to-run UI and project files 💻

Export the user-interface design as a fully-working code with assets.

Remove conflicts and misunderstandings 🗣

Improve designer-developer collaboration.

What are the most important features of the design to code with Monday Hero?

Our functions that developers & teams love:

• Converting layers to native iOS components,

• Exporting the source code, assets, fonts, colors, and UI for iOS via plugins and working independently,

• UI (Storyboard) support,

• Responsive UI to support all screen sizes,

• Exporting the design as a new project / into an existing project / only selected screens,

• Working in an all-in-one place with the team,

… and many more.

Documentation

In the docs, you will find 3 sections. In the first section, you will find the introduction and the tips that will prepare you to have the smoothest way to use Monday Hero which includes:

1. Workflow basics​

2. Installation​

3. Login & Create Your First Project​

4. ​ Prepare Design To Get Best Results​

5. ​ Export Your Design File To Monday Hero​

topics. In the second section, you will work with Monday Hero. This section covers:

1. ​Components​

2. ​Export Code​

3. ​Roles & Manage Your Team​

4. ​Configure Code Preferences​

In the last section, you will find tutorials that are handy to discover Monday Hero really fast.

​