Updating Components & Repeat Grids
Hey there in this video, you are going to learn some of the issues that you can run into with using adobe XD. Especially with re sizing symbols, you're gonna learn how, That's a weird thing that can't be fixed, but we'll work out how to do it. The other thing is when you're working with the peak grids, sometimes they just disappear and you're like, what do we do now? Okay. So we're going to work through that in the class plus how to add an update to repeat grids. Alright, buddies, let's jump in. Okay. First thing we're gonna do is just duplicate our dashboard. We're gonna end up with that courses page. So double click the name at the top here. Courses, I'm going to been our dashboard and I'm going to rename this, this one's gonna be called courses so an instructor can log in, check their stats and let's see what courses they've got made and edit them. That type of thing. That's what this is meant to do anyway. Now I'm going to show you a couple of issues that you're going to run into, ...
you might already run into them already. So, um, I'm going to create like a little repeat grid here and the first thing I'm gonna do is just draw a little shape for our placeholder video. I wanted to be an image, like a little thumbnail so I want to grab the image and we might have it in our assets panel, we do there. I can't image. I'm gonna drag this out. It's a bit big and I want to shrink it down and that is going to run into our first problem. So symbols are awesome. The problem is that can't be different sizes. You know, you're like what? I'll show you a link at the end where you can go to and request this feature from adobe. You might be in the future and it might be totally doable. It's not at the moment. So what ends up happening is like I want to resize this right? I can't resize it until I like double click it and now I'm inside that symbol and now I can resize it. Okay. Remember we have to turn our responsive, resize off. We did that earlier in the course. So I've made it smaller. Okay. I come out of it by just clicking outside and that's cool. I closed it. What's wrong dan go back to the original though. Back to the beginning here. Where are you? These guys got teeny tiny because they're all connected so I'm gonna undo undo again. Oh you can't undo that even extra problem. No, you can't just gonna keep undoing Hopefully now back at the beginning they're back to their original size. Alright so what do we do basically? It's just there's no real good way you make it not a simple. So right click it say one group symbol and now it's not a simple anymore. There are not connected so I'm going to shrink it down and this just happens to be, I might just probably live with it the bigger size. But I guess I wanted to show you here as a problem. So now I can resize it. I could turn it into like another symbol. I could say actually there's an icon image large and small. But how much how helpful is that now? Kind of loses its this will be my small version. Why not? It's just do that. All right. So that's one of the problems. The next one is I'm just going to skip ahead while get the editor to zoom this forward because I'm just gonna build some stuff. I need to create our problem first. So I'll do that and I'll explain it in a sec. So I'll see you in a zippy sick. All right. You're back. Um so you're playing along. You're going to have to do this. Um so create your little thumbnail video image thing. Just a bit of sample texts. Nothing just like a placeholder. And I grabbed the tick check mark from the wires web that we've been using and the trash is just in your exercise files in the images and icons and there's one in there called um trash. So we do it and I want a few of them. Right. So I'm going to use our sweet new repeat grid. So selected them all repeat grid, please. They go green and I can just go wham. I love that. Okay, so I just got lots of them. Cool. Now where is the problem? This is the problem you run into is I actually want this two things I want to do. I want to add to this repeat grid. Okay I forgot conveniently just kind of show you I guess is I want to add like an edit button. There's a turn it on and off. There's a delete but I want there to be an edit button so you can go into the course and do some edits. So how do you do it first of all? Let's bring in the edit icon. So I'm just gonna go to my import so file import. There's one here called edit. Okay, so it's in the exercise files, not in images and icons. I've got a separate folder. Icons. Let's go to edit and bring in the SVg. There it is there. Okay. What color is it going to be? And going to switch it to the blue to match everything else. Cool. So I wanted to get in here and repeat. So how do I get it in there? I grab it. I go edit cut. Okay, it's gone. And then I go double click to go inside and it's like what you did with symbols, repeat grid shares a lot of the kind of same sort of functions. Okay, so you double click it to go inside and you don't have to it doesn't matter what you've got selected in here. As long as this kind of like thick green line appears. I can just go paste. You can see it appeared to all of them and that's just the way of getting stuff in afterwards. Okay. If it wasn't in the originally cool song and have it edit, that'll do cool. So that's how to get stuff in there. Not really a problem. Where the problem lies is that's more of a trick to kind of add to repeat grids. The problem is this is actually I've decided I want this to line on the edge of my grid here. Okay, so just under where it says start trial. I want this all to be right aligned. So let's just double click to go inside. Didn't get it. Double click. Don't click on something easy. That was easier to click on some inside my repeat grid. I'm gonna stick to you guys and I gotta just come over here. Okay, they all just disappear. Just a bit weird. So you've got two options now, I'm going to undo that. So the option might be just actually let's just click on this um group the grid, delete all these guys and just do it properly. You know, get them lined up first. Ivan. Group them all. I'm just going to kind of go back now I can make a repeat grid fine but that's a way of doing it. Another way is this is a bit of a I'm not sure. It's kind of like drag and shuffle, that's what I'm calling it, dragging and shuffling. Alright, so what we want to do is we want to say drag it to the right and you're like what? That's why you can't drag it to the right because it's just more of them appears, but if you drag it out kind of where you need it to be and then come back in here and find the gap to drag it out and then you kind of just shuffle these guys across okay until they're out of the picture of where you need these fellas to be, then I can drag it back in to get rid of them by guys, but there's enough room now for these fellas so now I can double click it, drag it across and then move them across and you're sweet and I made it have I made it look easy kind of um I always find how like if you if you're following along you're like I'll give that a go, Seems easy and you're like man wrecking my head does wreck my head too. So often I just one group it and start again and so yeah, just so you know there will be times where like I just want to move this to this way, you're like oh I can't because the edge isn't there, so I'm just going to extend this out. But it's just some issues when it comes to repeat grids. It might be easier just to um group it right, click it on group grid and delete everything you need and just start again. So that is it. We learn how to add new things to an existing repeat grid, which is cool. And then we just kind of identified one of the problems of dragging it to the right where the head was earlier defined. Plus we looked at the problem of symbols. Okay. And the weird thing where you can't resize them. And also at the beginning that I told you where to go to go and vote for this thing. I've talked about it before, I think. Um, so adobe uses this thing called user voice. Okay. User voice is a way that we as users have a voice. Okay. It means we can go in and say, hey Dobie that thing and really needs to be fixed. And if you go to adobe xd dot com, nope adobe xD dot user voice dot com. And do searches in here, do a search down here for this one is called scale and re size symbols individually. It depends on whether you find that a big deal for me half it's not my heart. It's not my biggest problem with XD. It's just one of them. But give it a vote. Okay. You gotta log in. Okay? Or sign in with facebook or google and what they do is they just look at all the ones that have votes and start making adjustments on the ones that have issues. And the other cool thing is often you can find workarounds down here. There'll be some of the I do people jump in and say there's a workaround. It's not great, but This one here is kind of 1000, votes. All right. That's it. Let's get on to the next video.