How to Convert Adobe XD file into Application (through hard coding)

Good day! Could anyone guide me on how to convert an Adobe XD file into a Mobile Application (through code). Please let me know what to do and learn (e.g. specific technology, application, advice) to make the app. The particular app that I’m about to build is for final project purposes. Sorry for my broken english. Thank you so much in advance! :slight_smile:

Umm, if you have no experience at all, giving it as a to a developer is the normal answer, they open it with the XD viewer then convert it to an application. This is obviously not your situation, but I just want to emphasise that you can’t just convert a file into an application. The XD file is just an animated drawing of how a designer would like an app to look. An app itself is something vastly more complex.

There isn’t really anything that really allows creating apps without coding them. From a quick Google, there are a few visual coding applications that advertise this, and they might work for your purposes (creating a working prototype), but they look primitive.

If you really want to do this:

You will need a Mac if you want the app to be on IOS - you need XCode to compile it. For android, you need Android Studio, but that is available cross-platform. Both of those programs are specifically for building apps for that platform.

You can learn a language and use it to code an app specifically for a platform, using Swift/ObjectiveC for IOS or Kotlin/Java for Android. But that’s both a very big undertaking (unless you know a programming language) and very specific. So probably a cross-platfrom framework is your best bet

Current good options:

Flutter is very new but is possibly the best bet for getting something together quickly; the tutorials seem good, and it uses a language (Dart) which not many are likely to be familiar with, which in this case probably works in your favour - other framework docs and tutorials will assume knowledge of a specific programming language.

2 Likes

Thank you so much for your great response.

Yes, I’m willing to also do the coding part. Actually, I have a background in HTML and CSS but not JavaScript. And I’m taking an Introduction to Programming class with the language C++. And I think I have a strong fundamental foundation to help me adopt another programming languages much easier.

I don’t think my Laptop specs (4GB Ram, Pentium Processor) could manage Android Studio. Is there any alternative for that or is it inevitable? If that’s the case then I should borrow laptop.

Flutter sounds so interesting and also React Native. But do I need Android Studio to build my app and in order for these frameworks to run or could I use visual studio code as alternative?

Thanks man :slight_smile:

You’ll need it link libraries, and do the heavy lifting of compiling and building the app. You can do that all from the command line, but it’s a. much easier to just let Android Studio handle it, and b. easier to run the emulator you’re likely to want whilst developing. It also makes it much easier to get the necessary native libraries and APKs into the project.

I use React native + VS Code, Android Studio is just something I have running in the background; I don’t really touch it much beyond the initial setup and opening an emulator, but I don’t know I’d want to do all of the manual processes involved in setting up without Studio. Specs of your PC are likely to mean compiling/building will be pretty slow (that’ll be the case regardless), but you should be ok

EDIT: if you do go for React Native, then what generally happens is that you spin up an emulator (will be via Studio), then run the react native command from a terminal to watch for changes. Then you develop in your editor (you could use Studio, but VSCode will be much better for JS development). As the JS code changes, you can just refresh in the emulator to get updates, it doesn’t need to rebuild the core Java code, only JS, so it’s all pretty fast, there shouldn’t be any issues w/r/t your PC specs on that side of things.

2 Likes