Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Extract Adobe XD UI to Android Studio Easily?

  • Difficulty Level : Basic
  • Last Updated : 12 Apr, 2021

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.

Extracting UI to Android

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

Assets folder

Step 4: Now open Android Studio and Go to Resource Manager present on the left side of your screen.

Resource Manager in Android Studio

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.

After drag and drop, you will see something like this

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

Here the text view ‘ Background is set to @drawable/welcome_back

Resultant Output

Step 7: You can also view if the UI has been extracted correctly by checking in the drawable folder.

Checking the UI in Drawable Folder

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!