Export Code
Convert Adobe XD/Sketch design to code. Export the generated UI code as iOS/Android code and run in both Android Studio/Xcode.
Last updated
Convert Adobe XD/Sketch design to code. Export the generated UI code as iOS/Android code and run in both Android Studio/Xcode.
Last updated
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:
The dialog will appear and show the export options. Select one of the export options and click the "●●●" to change the directory that the project will be exported.
The dependencies and requirements can be found on this pop-up, iOS projects require Xcode 10.0 or later.
The code can be exported in 3 different scenarios. To see more details about the options and the exported files, click the link below that fits the needs.
1- Export all screens as a new project.
2- Export only selected screen as a new project.
3- Export only selected screen into an existing project.
Click Export to complete the steps.
When the project has exported, the colors, fonts, assets, and UI layout code can be found in the project. To learn more about the downloaded files or read different exporting options, select an Exporting Option in Step 2 above, or continue reading.
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.
Monday Hero downloads the project as iOS-Example.
Storyboard File The screens are downloaded as Main.storyboard file (Also it is possible to export only code, without Storyboard). Downloaded Storyboard file:
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.
Fonts The fonts and their sizes are downloaded in one file as text styles and can be found/edited in the Fonts.swift file.
Strings The strings are also exported in a single file for the whole project in 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.
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!
