By using our website you agree with ourPrivacy Policy.

Post Details

How to Use Monday Hero: Generating Code

N
Nazli Temurtas

04 Jul 2020

cover

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.

A Travel App Screen

A Travel App Screen

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:

iOS Code with only text and images(without components)

iOS Code with only text and images(without components)

Click on any item to highlight them both on the design and Views menu.

Highlighting items

Highlighting items

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

  1. 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’.

Components Menu

Components Menu

As a shortcut, you can also create a button selecting elements on the design and right-clicking:

Shortcut for Creating a Button

Shortcut for Creating a Button

2. When you click to ‘Create New Instance’ button, you’ll see:

Setting Button Properties

Setting Button Properties

On this page, click and drag to select the elements that you want to convert to a button.

Selecting the Elements

Selecting the Elements

On this page, the field types are automatically selected, it easy to change if it’s wrong:

Changing the Properties

Changing the Properties

3. Name the button as you wish and click ‘Finish’, and then we’re done 🥳

Creating a Button

Creating a Button

Follow Button and Its Code

Follow Button and Its Code

I copied the code we’ve just generated here:

Result Code for FollowButton

code standardization, Monday Hero code output

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.