Convert Adobe XD/Sketch design to code. Export the generated UI code as iOS/Android code and run in both Android Studio/Xcode.
It's critical to create components before exporting code. Otherwise you'll only get automatically detected image, text and view code.
Go to components to check how to create components like buttons or custom views and more. When you're ready to export code, you can follow the steps below.
Download Code & Assets
The code can be downloaded as a screen or a whole project depending on the need. It is possible to get it as an Xcode/Android Studio Project.
To export the code, follow these steps:
Step 1: Click the Export Button
A ready to export project, and the 'Export' button.
Step 2: Select the Export Option
The dialog will appear and show the export options.
Export Options.
The code can be exported in 2 different scenarios. To see more details about the options and the exported files, click the link below that fits the needs.
The download will automatically start in a few seconds.
.zip file will be downloaded instantly.
When the project has exported, the colors, fonts, assets, and UI layout code can be found in the project.
If you don't know how to add ready-to-run files to an Xcode project, you can read it here.
Example of an Exported Project and Generated iOS/Android Code
Monday Hero exports an Xcode/Android Project with colors, fonts, assets, string, and layout files. Please note that there are no duplicate values in colors, fonts, and string files.
The results of the downloaded project are different for Android and iOS Projects.
iOS
Android
Project Structure
When you unzip the PROJECTNAME.zip file, you will get the iOS-Example folder.
Storyboard File
The screens are downloaded as Main.storyboard file (Also it is possible to export only code, without Storyboard). Downloaded Storyboard file:
Downloaded Storyboard file for entire project.
Colors
The colors are downloaded as a single file and automatically named by Monday Hero in Colors.swift file. The colors' values are also not duplicated.
Colors.swift file.
Fonts
The fonts and their sizes are downloaded in one file as text styles and can be found/edited in the Fonts.swift file.
Fonts.swift file.
Strings
The strings are also exported in a single file for the whole project in Localizable.strings file.
Localizable.strings file.
Assets
One of the most important exported files is assets. They are downloaded in 1x, 2x, and 3x densities. They are all ready to use and automatically sized. They can be found in Assets.xcassets folder.
Asset folder and files in an exported project.
⚠️This feature is available in only Mac App. Web App support for Android is coming soon.
If you need to install the desktop app, click here.
Project Structure
Monday Hero downloads the project as AndroidExample.
Exported Android Project.
Layouts
The layouts are ready as can be seen below.
List page layout of Travel App in Android Studio.
Colors
We can see the colors in colors.xml file. These colors are named automatically by Monday Hero.
Please note that there are no duplicated values in colors, fonts, and strings.
Downloaded Colors in colors.xml
Strings
As we mentioned above, the strings are also exported. They are placed in the strings.xml file.
Downloaded Strings in strings.xml file
Fonts
Also, we gather the fonts and their sizes in one place as text styles and which can be found/edited in the fonts.xml file.
Downloaded Text Styles in fonts.xml
Assets
And the last but not least, the assets. They are all ready to use and automatically sized in the res folder.
As can be seen above, the project is ready to run. After these steps, the development takes place out of Monday Hero. With already exported project UI as an Xcode project or Android Studio project, and it is ready to work in a development environment. Now it is time to work on the backend services and configurations as planned. Happy coding!