Learn how to use probably the most powerful feature in Adobe XD: repeat grids. Repeat grids will enable you to create a lot of content easily that's also fully customizable.
One task you commoningly have to do when it comes to UI design and screen design is create lists 'cause you're going to need in this case a lot of lists when it comes down to all the different cuisines and the areas. So, how you typically do that is you'll come over here and when you click on the "eat" button it's going to take you to these different regions. So it means creating all these different items off to the side, over here. One of them might be, say, for instance, Africa, right and then I'd have to take this and then duplicate it again and duplicate it again so that gets to be a lot of work and typically what you want to do in this case is to create a repeat grid, so selecting this box and that text right there, coming right over here-- you can see it off to the side, "Repeat Grid," so rather than duplicating all of those elements you just select "Repeat Grid" and grab this bottom bar, scale it on down; there you have it.
You have four, if not five different items and I can decrease the spacing in between all of these 'cause I actually want it to be zero. So I'm going to grab this, it gets treated as a complete unit-- scale that down some more and start to tweak this 'cause maybe the background I want it to actually be something different entirely. So check this out. I can go out to any asset that I have on my Desktop. I can take, for instance, this image and drop it right in here to replace it and it's going to duplicate all the way down and I can start to adjust accordingly.
Now, if I select this text right in here-- consider this kind of like a class, so there's like a symbol and these are all instances of it but I'm actually modifying the class, if that helps you kind of understand how this works, I could change that to white, it's going to change it for all of them. Even for this image, I can turn off the border and maybe adjust the transparency. Maybe I want to take that transparency down to about 30%, okay? So that looks better. It starts to kind of mess with that background, which I'm not crazy about-- Actually what I'm thinking is I want to get rid of the background entirely, so I have it locked, I could click to unlock it, and then just hit "Delete." So this is more along the lines of what I want: being able to modify one element and it will change it across everything below it because it's part of the repeat grid.
The next step is to customize this content per item.
- Building multiple screens of different sizes
- Creating graphics and text in Adobe XD
- Importing graphics
- Using a repeat grid for easy prototyping of lists and recurring elements
- Adding interactions to elements
- Creating transitions between screens
- Sharing and getting feedback
- Exporting artboards and assets