Monday Hero
Published in

Monday Hero

How to Use Monday Hero: Generating Code

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 like Instagram
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)

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

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
Result Code for FollowButton

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store