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

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.

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

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

All screens will be downloaded as an Xcode Project:

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

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.

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

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

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.

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.

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

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.

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.