Successfully Exporting With Adobe XD

Intro

Hi everyone! This week I may be uploading two tutorials because there was a fun thing I thought of last minute. Trust me, you’ll like it. For this topic, we’re going to learn the ins and outs of exporting, how to do it, how to not take up a huge amount of storage, and how to get quality images. Anyways, let’s start by just exporting something!

Exporting

As you will see, there are multiple ways to export, one being “All Artboards”, documented thoroughly here. Anyway, to manually export something, go to file, wherever it is on your computer. For me, it is at the top of my mac. Anyways, go to File > Export > Selected. You’ll notice there is also the All Artboards, and Batch. Let’s just focus on selected right now. Let’s make a circle. I’m going to make a transparent outside, and an opaque inside. Then select them both and export selected. Screen Recording 2020-09-18 at 1.59.29 PMWait . . . why are there two circles on my Desktop now? Hmmm. What if we group the circles?Screen Recording 2020-09-18 at 2.02.58 PM
Now that’s better! It’s working now! There is also a shortcut to export the selected. Press Command/Control + E and it’ll do the same as Export Selected. Let’s focus on quality now.

Quality

I’m going to try making something new. Let’s do a 10x10 triangle. Now, just export it, and see how it looks. Wait . . . Why does this look like we’re playing Minecraft or something? This isn’t what I exported!Triangle (That is the triangle) Hmm. Let’s try holding shift while dragging from the corner. Now the dimensions are 1000x1000. Let’s try this. Ah. That looks a lot better! So, as a general rule, the bigger, the better.

Saving Space

As you may know, a game with lots of UI may take up a lot of storage on your computer. There are temporary workarounds to this. Let’s look at a few:

Screenshots

Screenshots are a great way to save space while first developing/scripting your game. They are especially good for sending a preview of something to a client. I use this all the time for a few things: One, to send something through discord. Sometimes, files are too big to be sent, so you need to send screenshots. Two, to pre-script your UI. By this, I mean to pre-upload a few screenshots to your game, just to get a sense of how much scripting it’ll need. There are a few times not to do this though:
One, do not send a screenshot with transparency to a client. It is much harder to tell. Maybe consider using a google drive folder instead. Two, NEVER and I mean NEVER do this for your actual game. There is a huge difference in quality. People can tell the difference. Anyways, let’s focus on one more thing for exporting.

Batch

Exporting in batches is a great way to save a little time. Say you are designing something big, and don’t want to export it all one by one at the end. Let’s just click batch. Make two rectangles, and select them. At the bottom right of your screen, you should see “Mark For Export”. √ That box. Now, do the same thing for the other rectangle. Now, go to File > Export > Batch. You should now have two rectangles on your desktop! You can also mark groups for export to save time. Screen Recording 2020-09-19 at 7.57.59 AM (1)

Outro

Well, that’s it! Thank you for reading! Keep an eye out for a surprise one this week! (It’s not a surprise now, is it?) I’ll leave a link to the YouTube video as soon as it’s online! I have a few options for the next tutorial. I’m leaving it up to you this time!

  • Start a GFX Series
  • Do a few tutorials on Photoshop
  • Continue with XD

0 voters

5 Likes

Thanks for the tutorial, I found it to be clear and useful.

1 Like

Hey everyone! The video for this tutorial is now out! I hope you can hear it a little better! I am still working out all of the kinks with YouTube. Any feedback is appreciated! https://youtu.be/v7nKfSCFV0E