Adobe XD Design Blog 3

 

 

 In this blog we will cover many things including I will show you to explore more on this topic. I will show you how to convert XD file in Html CSS etc. Already have designed some mobile app screen like this one. We will convert this into android UI codes. Then we will convert this home page into Html in this article. So be with me in this article I will show you some plug-ins and it’s settings also and how you will use them. And we will review the code how effectively that code is exported and how we can use it. We are going to start this article First of all, I want to tell you that there is a plug-in.

First of all, I want to tell you that there is a plug-in. The name is export kit and this is their website. You can download this plug-in from their website exportkit.com. The best way is to download this plug-in from inside Adobe XD itself. You can create your account at exportkit.com They have some Free demos And free templates that you can use them. Other then XD you can use it in photoshop also. Let’s start it from Adobe XD itself. Let’s see how we will install this plug-in from Adobe XD. You will go to plug-ins menu I am using Mac From here you can explore to search more plug-ins. You have to type here "export kit" If you type here export kit then Let see what we get here you will find a plug-in name lightning storm. This may create confusion for some people If this plugin name is export kit then we didn't get it in search. in our group many people were asking I want to tell you that this is actually lightening storm plugin Because I have already installed that’s why it’s not showing me an option to install if its not installed in your xd then it will show the install option Once you installed it it will be here in your list like you can see here When you click here that will show you a list like Html 5 CSS PHP Json XML JavaScript J query, android UI, and XD plug-in You are going to convert in these formats mostly those we use are HTML5, CSS, PHP, XML etc we are doing to convert into these. First of all, we want to convert this homepage.

First of all, you have to click on the artboard itself and select it and then we go to this plugin And then click on HTML5 here Here you can see an export popup or like a notification Now it’s asking where to save the HTML. Can select any folder where you want to save your HTML files. It’s already converted let’s see how it is converted actually. On my PC it's downloaded in this Folder. If we see here homepage so this is the actual folder. This is a stable page and then CSS and this folder have all the images. Now I am opening this estimate file in chrome. your page ready within one second. See all these texts is selectable. These all images are separated and if we open this in a new tab you can see. This file is in PNG you can see. Here you can see the name of the PNG file Let’s see what was the layer name of this image in the Xd file. and how it is giving names to the files We will go to the layers and check if this name was same in xd beach 612553480 this same name is here you can see this is best habit to name each image in xd like you can give this layer "background" name this about section 1,2 and 3 names whatever name you give here

The same names will be found in the assets folder accordingly it converts properly but you will see some issues also for example, if you see the main menu each item came closer but in design it has gap font problem also can be seen ok, so like i said we will review it how it works actually. but friends still this is a good conversion let's check it more in its page source coding here you can see its code In this channel, I don't teach how to code but i teaches only web designing, UIUX designing but some subscribers were demanding to teach this topic i have studied and here it is :) developers can check this code some coders already checked this code and i also have some knowledge there is always few problems in this code it doesn't convert into a standard code i hope our developers can make it perfect after making some edits In same way, i am going to android code conversion here you can see our app screen i go to plugin and 2nd last option is for "Android UI" let me zoom it a bit now if you click here then you will see that same process i am saving it on that same folder let see in the folder here you can see this is xml file all these folders are here coders will know the next steps with these codes if app developers are watching this article then please try to convert yourself and verify the codes and comment on this article how it is now lets check if this converted page is responsive or not but this is not responsive we must have responsive code for various devices like you can see it's not responding as per the screen size these buttons should work as a button if we have a form on design then it must work like a form this should be a text box only but i want to say "Yes, these things will work in the correct way" i have watched many articles on plugin's  that were created for adobe xd itself here you can see what else you can do with xd plugin they have article on how to make responsive html. 

I am a pure graphics and ui designer so may be i will not able to understand codes deeply but developers can use it and learn from articles i also checked few things and they were working actually it means here you can convert into responsive codes also and if you convert into php then forms will also work even they can be submitted mails can be sent a dropdown menu will also work properly the calendar will also work i don't feel I as an expert developer so i don't want to make detailed articles on codes but the professional developer will able to work perfectly with this plugin let's see it's PHP conversion conversion started let's save and check the files here we can see homepage.php page and css also and all the images are here it's converting to any code within seconds in next article i will show you how to create tables easily and how to add realistic data with plugin.