By using our website you agree with ourPrivacy Policy.

Post Details

How to Use Monday Hero: Exporting Code

N
Nazli Temurtas

04 Aug 2020

cover

One of the most important features of Monday Hero is exporting code. You can download the code of a screen or a whole project depending on your need. Also, you can get it as an Xcode/Android Studio Project instead of importing the new files into your existing project. 😉 Here, we’ll show how to export code in different options.

In the previous tutorial, we created components and generated code by using the Travel App Sketch file and now the project is ready to export. Before exporting the project, you may want to create components or change the code, then you can check the generating code tutorial.

Let’s export the code

How to Use Monday Hero: Exporting Code

Downloading Code as A New Project

You can download the code as an Xcode/Android Studio project in Monday Hero. Let’s start with downloading all screens option.

Downloading All Screens as a New Project:

  1. Click the Export button.

Click Export Code Button in Monday Hero

Click Export Code Button in Monday Hero

2. Choose the path you’ll export and select All Project option to download all the screens in your Monday Hero project.

Export All Screens or Only the Selected Screen

Export All Screens or Only the Selected Screen

3. When you’re ready, click Export, and downloading will start.

Exporting Code to a Selected Path

Exporting Code to a Selected Path

All screens will be downloaded as an Xcode Project:

Downloaded Project Folder

Downloaded Project Folder

In the Xcode project, you’ll find all colorsfontsassets, and layout code files.🥳 Please note that there are no duplicate values in colors, fonts, and strings. Here is the downloaded project:

Downloaded Storyboard File for Entire Project

Downloaded Storyboard File for Entire Project

Downloaded Colors in Colors.swift

Downloaded Colors in Colors.swift

Downloaded Strings in Localizable.strings file

Downloaded Strings in Localizable.strings file

Downloaded Text Styles in Fonts.swift

Downloaded Text Styles in Fonts.swift

Downloaded Assets in Assets Catalog

Downloaded Assets in Assets Catalog

Exporting Selected Screen as a New Project:

If you want to export one screen’s code, you can do it easily by selecting Only Selected Screen option and clicking the Export button.

Exporting Selected Screen (Only One Screen)

Exporting Selected Screen (Only One Screen)

When you export, you get colors, fonts, assets, and layout code of the screen. Please note that you will download only the selected screen’s colors, fonts, and strings in the files. 😉

Exporting Code into Your Current Project

Exporting Code into Your Current Project

2. Select the path of your project folder, make sure that it has .xcassets folder or you’ll get a warning in Monday Hero. I created an empty project as an instance which is called ‘Monday Hero Example Project’.

Monday Hero Example Project

Monday Hero Example Project

Selected Path

Selected Path

3. Click ‘Export’ and get the screen’s code in your existing project. It will automatically download Colors.swift, Fonts.swift, assets, and code of selected screen.

Downloaded Files

Downloaded Files

In the Xcode, you will need to add the new files to add to your project. You can do it by following the next 2 steps below.

Step-1: Click Add Files to Your Project

Step-1: Click Add Files to Your Project

Step-2: Add Downloaded Files to Your Xcode Project

Step-2: Add Downloaded Files to Your Xcode Project

Final Project Look

Final Project Look

The Storyboard file is downloaded as main.Storyboard so 👉 make sure to change your Storyboard file name in your existing project before downloading.

Main storyboard

Now the code is downloaded and you can directly play it in your own project. 🤓 Here is the Running App on iOS Simulator and source code in Xcode together.

Converted Sketch Design to Code, Running UI on iOS Simulator

Converted Sketch Design to Code, Running UI on iOS Simulator

I hope you enjoyed the writing. This was the third and last tutorial of ‘How to use Monday Hero’ series. If you have questions, feel free to reach me or the team on Monday Hero Slack.

Happy coding :)

— Nazli from Monday Hero.

Related Blog Posts