 What is going on everybody? My name is Wadi and you're watching my channel Wadi the Brand. Today I have a very quick video for you and that's why I'm not going to do the usual introduction and we're just gonna go straight to the point. So the point is that originally when Adobe XD was released I was able to design beautiful interfaces and when it came down to exporting them and showing them to clients the images were as big as the artboard and I don't know whether you've had this issue but most of the artboards for example if you design for iPhone X that's 375 pixels by 812 pixels and that's absolutely fine when you're designing here but if you wanted to showcase your work maybe you want to post it on dribble maybe you wanted to post it on the hands or your website you want to be able to export this image as high quality as possible and maybe you want to zoom in as much as possible to show to showcase your design skills or the interface that you've designed and so on so that was a problem back then and I couldn't find a solution I tried to export in the file was png jpeg pdf and pretty much everything and nothing worked now things have changed a little bit and let me show you what I mean now first of all I have two more cups prepared here in Photoshop one of them is high resolution and the other one is standard which would totally fit the artboard that we currently have in Adobe XD and let me show you what I mean so for example this is an app that I actually designed for a new YouTube tutorial and I will link in the description below I don't know how good it is but because that was kind of like one of the first videos that I've done and basically if I wanted to export this usually you would go here on the menu the burger menu on the left side and you would click export and then all artboards for example now here is where you would choose what format you would like and out usually choose jpeg png and try to make it as big as possible now I literally tried as I mentioned earlier I literally tried every single option in here when Adobe XD originally launched the application and nothing really worked now there is a way now you could I believe that you could export your file as pdf drag it into Illustrator blow it up and I think that would work but that's a lot of work but anyways let's export this as jpeg let's say I want the quality to be 100% and to be completely honest you could choose either design or web web actually gives you designed art 1x and 2x which means that it will give you two different versions one will be bigger than the other and let's choose a photo so for this let's go desktop and I will choose export folder so I'm going to select this folder and export now let's go to the export folder now in here we have all the artboards exported and let me delete those four because we want to eat them now this is the small one here and as you can see this is literally tiny and everything looks blurry so that's unusable we can delete this and this is the second one and this is the actual original artboard size which is fine but already like one of you here you can see that the font is getting pixelated and if I was to zoom in you will see that the fonts are way too pixelated and it just doesn't look good now I could actually drag this into my mockup the standard resolution mockup in here let's quickly drag it paste it and if I do the width to be 100% this fits absolutely perfectly for my mockup I can press enter just align the mockup in here just like this and save now if you will look at this mockup this looks fine absolutely fine we could use this for instagram I don't see a problem with it and if we zoom in it's not the best and this is the problem like now if you go to Behance or dribble websites like that you wouldn't normally see this because it just looks unprofessional everything is pixelated and I wouldn't advise you to put that on your website either I had to do this a while back for some of my websites because I didn't actually have the designs made in adobe xd so I literally had to take a screenshot and put it into a mockup stretch here and it's just not good now if I was to put this in a high resolution mockup which normally there is plenty of mockups that you can download for free and use and there is obviously high quality one that you can pay for as well and this is a high quality mockup that I have created quickly and if I was to put this in here the same image by the way and drag it as you can see this is already 100% and now I literally have to do what I would usually do take a screenshot of a website and literally do this which is not good as you know this is a bitmap this is not vector so as soon as a stretcher things will get blurry just like this it's not ideal but if this is the only way then I I guess there's nothing you can do about it unless you redesign the whole thing then I guess that's fine so I've aligned my screenshot in here let's save it let's close both of them and this is the high resolution one and as you can see now it doesn't look too good if we zoom in again I wouldn't post this on drivel to showcase my work and now I'm going to show you what you have to do to export your designs in much bigger format while they still look really sharp and professional so if you go to Adobe XD I don't know whether this is a common sense by the way if you go to Adobe XD let's open the plugins panel here on the left side at the bottom control shift and P and as you can see I have this custom export plugin already installed but of course you can click on the plus sign search for the custom export and just install it it takes a second now I can actually use this custom export plugin to export my artboard into a much bigger format and the quality will be absolutely perfect so let's double click on the artboard that we want to export and I will click on this one just because this is the one that I actually want to export and let's click on the custom export plugin now this is going to ask us okay how much do you want to scale this design and I actually haven't calculated it how much I want to blow it up but let's go for something like six and you can choose png you can choose jpeg it doesn't really matter at this point because damage will be six times bigger than it is now and I think that would be absolutely fine from a mockup that I've created so let's export let's select uh select photo and did export okay sometimes it's a little bit buggy so let's do it again so let's export this but before we do that I'm going to change the name just because I've already used this name in the previous two exports so I don't want to get a mixtape so let's say hi res click on the artboard that we want to export custom export time six will be absolutely fine and then let's just click export select the folder that we want to export these two so this will be the this export folder and click export so if you give a second you will see that this has exported this file for us and if I double click on this you will see that at the moment it looks pixelated but this is because it's kind of zoomed out and if I double click on this to zoom in you will see that the fonts are actually looking so much better already than the rest let me show you if I click on some of the other ones like this one here you will see the difference already and now let me try this high resolution image in my high resolution mockup so let's go back to the mockups open the high resolution one as and as you can see here we have the blur image so let's change this super quickly gonna drag the new one and as you can see this one is at 31% at the moment so we are gonna have to um drag it up a little with the transform to to make it fit just like so and this will be absolutely fine let's go down just like this and let's hide the one below so we can see how to align a little better and now let's say let's go back to the high resolution mockup and as you can see this is looking so much better now I can already imagine if I pressed up on Photoshop I can already imagine this this being showcased on a portfolio maybe on dribble maybe on the hands or your website people can actually zoom in and see all the details that you've put into your beautiful design it doesn't look pixelated it looks professional and I think that's the way it should be so that's pretty much everything I wanted to show you in this video I hope you liked it I hope you find it useful maybe this is a common sense I don't know but I didn't know about this export extension for a while and I just wanted to share it with you and thank you very much for watching I hope you found this video useful if you did smash the likes subscribe to my channel and if you have any questions please feel free to drop me a message in the comments below and I'll see you in the next video