Updating Components & Repeat Grids
Lesson 20 from: Adobe XD: UX/UI Design EssentialsDaniel Walter Scott
.jpg/webp/500)
Updating Components & Repeat Grids
Lesson 20 from: Adobe XD: UX/UI Design EssentialsDaniel Walter Scott
Lessons
Getting Started
1Getting Started with XD
02:21 2What is UI vs UX
06:19 3The UX Brief & Persona
11:22Wireframing Low Fidelity, Type, Color & Icon
4Wireframing (Low Fidelity)
01:58 5How Wide for my Website
13:06 6Existing UI Kits
07:49Working with Type
09:09 8Basic Colors & Buttons
14:14 9Free UI Icons
11:45 10Footers & Lorem Ipsum
05:27 11New Pages & Artboards
04:20 12Class Project 01 - Wireframe
11:11Prototyping a Website
13Prototyping & Interactivity
08:53 14Create a Popup Modal
07:57 15Prototype
02:54 16Groups & Isolation Mode
02:30 17How to Use Components (Previously Components)
17:19 18Production Video - Left Nav
03:52 19Repeat Grid
05:27 20Updating Components & Repeat Grids
08:54 21Prototype Tricks
06:03 22Navigation Tricks & Tips
04:48 23Class Project 03 - Components
04:07Prototyping an App
24Mocking Up an App
09:40 25XD App on Your Phone
08:04 26Fixing the Position
01:01 27iPhone & Android Status Icons
03:10 28Production Video - Login
06:45 29Sharing Wireframes
13:32 30Recording Your Interactions
03:13 31Class Project - Wireframe Feedback
01:21 32Mood Boards
07:43 33Class Project - Mood Board
00:59 3412 Column or Grids
04:57 35Working with Colors
09:02 36Tricks for Using Colors
06:34 37Gradients
03:50 38Class Project 06 - Colors
02:14Text & Drawing
39Use Web Safe Fonts
18:00 40Character Styles
06:59 41Font & Text Tips Tricks
05:43 42Plugin Lorem Ipsum
05:39 43Paste Properties
13:15 44Class Project 07 - Text & Buttons
02:21 45Draw Custom Icons
04:13 46Strokes & Lines
14:28 47Pen Tool
14:34 48Drawing Practice
07:15 49Production Video with Tips
12:27Working with Illustrator, InDesign & Photoshop
50Illustrator in XD
09:34 51Class Project 08 - Custom Icons
01:49 52InDesign in XD
11:38 53Pros & Cons for Images
03:58 54CC Library Connection
11:01 55Adobe Stock
05:20 56Free Images
01:48 57Masking
06:44 58Photoshop in XD
08:41 59Infographic
12:12 60Class Project 09 - Hi-Def Mockup
05:38APP Design
61Mobile Phone Mockup
18:08 62Class Project 10 - Mobile Website
01:24Placeholder content & Plugins
63Hidden Features for Repeat Grid
05:17 64Plugin - Content Generator
04:29 65Plugin - UI Faces
03:15 66Plugin - PhotoSplash
04:31 67Plugin - Copy Cat
03:19 68Advanced Asset Panel
04:37 69Advanced Symbols
07:52Micro Interactions
70What are Micro Interactions
07:21 71Button Grow
06:13 72Animated Image Gallery
06:39 73Full Vector Change
08:19 74Class Project 11 - Micro Interactions
05:12Prototyping Advanced, Voice Interactions & User Testing
75Time Delay Transitions
04:42 76Popup Menu or Modal
12:16 77Animated Mobile Side Nav
03:26 78Drop Down Menus
03:24 79Drag Transitions
07:19 80Number Ticker Scroll
06:51 81Alexa Voice Commands
09:37 82What is User Testing
16:53 83Unmoderated UX Test
12:07 84Class Project 12 - User Testing
02:23Pitching to clients & customers
85Mocking up in Photoshop
09:21 86ProtoPie
02:40 87Add Animation Using After Effects
09:39 88Export Images & Assets
12:56 89Export Code Using Design Specs
10:49What Next
90Class Project 13 - Roar Cycles
10:29 91Conclusion
05:32Final Quiz
92Final Quiz
Lesson Info
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.
Class Materials
Bonus Materials with Purchase
Ratings and Reviews
Haseebullah Johar
Thank you, Dan Scott, for providing such a beautiful Adobe XD course. I completed the course today and noticed a couple of things that are missing. I want to share them here so that you can upgrade the course, which would be helpful for us. Hover state and toggle state. Dragging pages from 1-2 to 2-3 and then back from 3-2 to 2-1 with dragging is not working. Another thing is that we learned scrolling the website from top to bottom, but scrolling or pushing things from right to left has been completely omitted. These are the things I have noticed, and I would like you to upgrade them so that we can improve our Adobe XD skills.