Overview

Meet with Monday Hero, documentation and learn how to convert design to code.

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.

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 Android / iOS components,

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

• UI/Layout (Storyboard/XML) support,

• Responsive UI/Layout to support all screen sizes,

• Customization of the code output with Code Preferences,

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

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

• Dark/Light theme is available, … 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. Roles & Manage Your Team
5. Prepare Design To Get Best Results
6. Export Your Design File To Monday Hero

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

1. Automatically Generated Components
2. Convert To Components
3. Configure Code Preferences
4. Export Code

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

How to Use Monday Hero Briefly

You can see how to use Monday Hero in the 2-minutes-video below.

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.

After converting components, you can customize your code to maintain your/team's code standards(optional). Customizable code allows you to export the code as you prefer and helps you to get the best fit for your already agreed/existing codebase.

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.