Post Details
How to Use Monday Hero: Generating Code
Nazli Temurtas
04 Jul 2020
Basics of Creating Components and Generating Code
Once you or your teammate uploaded the design to Monday Hero, then you’re ready to fasten your development by generating code with Monday Hero. For having a functional and quality mobile code, it’s good to create components.
I chose a travel app page to show how to generate code with components, and this is the example we’re going to work on.
Generating Mobile Code
Monday Hero automagically understands texts and images in the design you uploaded. You can see the classes and variable names on the Views menu, here is an example:
Click on any item to highlight them both on the design and Views menu.
Monday Hero automatically generates responsive code with text, images, and layout rules. But without components, it is not enough for a fully functional mobile app. So, Let’s create a component together.
Creating a Button
I will show you how to create a button with steps as an example for creating components, then you can repeat the same steps with other components like TextFields, TextView, SearchBar, and much more...
First, go to the components menu, you’ll see the component list that you can create😉 . Click to ‘Create New Instance’ if you will use this button only on this page, if you want to use the same type of button on different pages click ‘ Create a Custom Button’.
As a shortcut, you can also create a button selecting elements on the design and right-clicking:
2. When you click to ‘Create New Instance’ button, you’ll see:
On this page, click and drag to select the elements that you want to convert to a button.
On this page, the field types are automatically selected, it easy to change if it’s wrong:
3. Name the button as you wish and click ‘Finish’, and then we’re done 🥳
I copied the code we’ve just generated here:
Congrats! Now, you have created your first UI page with buttons in Monday Hero😎 You can follow similar steps to create text fields, lists, collection views, and more.
I’ll be telling you how to export the code in the last series of ‘How to use Monday Hero’. If you have questions, feel free to reach me or the team on Monday Hero Slack.
— Nazli from Monday Hero.