How to Extract Adobe XD UI to Android Studio Easily?
Adobe XD is a powerful and collaborative UI/UX prototyping and designing an app. Such a prototype is necessarily developed before the developers start the actual coding of the interface to have a clear plan of the way things have to be executed. Moreover, the feature of Coediting which is currently available in Beta, allows the designers to work as a team on a project all together that too in real-time. Similarly, Android Studio is the official IDE (Integrated Development Environment) for Android app development and it is based on JetBrains’ IntelliJ IDEA software. In this article, we will see how to extract the UI Designed in Adobe XD to Android Studio easily.
Step by Step Implementation
Step 1: Firstly You have to create a UI design of Your app in Adobe XD as shown below.
Step 2: Now Select the UI you want to extract and press ctr + E and Select Android. Select the desired folder you want to export to and hit Export.
Step 3: Now when you open the folder “Assets” you will observe that the UI gest stored in different folders of different sizes(i.e hdpi, ldpi, mdpi, etc).
Step 4: Now open Android Studio and Go to Resource Manager present on the left side of your screen.
Step 5: Now open the Assets Folder which was saved earlier and select all the items in the folder and do “Drag and Drop” into the Resource Manager.
Step 6: Click Next > Import. Now To check if you have correctly imported all the files go to the XML file and test it out by putting the files as background images
Step 7: You can also view if the UI has been extracted correctly by checking in the drawable folder.