Skip to main content

Updating Components & Repeat Grids

Lesson 20 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

Updating Components & Repeat Grids

Lesson 20 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

20. Updating Components & Repeat Grids

Next Lesson: Prototype Tricks

Lessons

Class Trailer

Getting Started

1

Getting Started with XD

02:21
2

What is UI vs UX

06:19
3

The UX Brief & Persona

11:22

Wireframing Low Fidelity, Type, Color & Icon

4

Wireframing (Low Fidelity)

01:58
5

How Wide for my Website

13:06
6

Existing UI Kits

07:49
7

Working with Type

09:09
8

Basic Colors & Buttons

14:14
9

Free UI Icons

11:45
10

Footers & Lorem Ipsum

05:27
11

New Pages & Artboards

04:20
12

Class Project 01 - Wireframe

11:11

Prototyping a Website

13

Prototyping & Interactivity

08:53
14

Create a Popup Modal

07:57
15

Prototype

02:54
16

Groups & Isolation Mode

02:30
17

How to Use Components (Previously Components)

17:19
18

Production Video - Left Nav

03:52
19

Repeat Grid

05:27
20

Updating Components & Repeat Grids

08:54
21

Prototype Tricks

06:03
22

Navigation Tricks & Tips

04:48
23

Class Project 03 - Components

04:07

Prototyping an App

24

Mocking Up an App

09:40
25

XD App on Your Phone

08:04
26

Fixing the Position

01:01
27

iPhone & Android Status Icons

03:10
28

Production Video - Login

06:45
29

Sharing Wireframes

13:32
30

Recording Your Interactions

03:13
31

Class Project - Wireframe Feedback

01:21
32

Mood Boards

07:43
33

Class Project - Mood Board

00:59
34

12 Column or Grids

04:57
35

Working with Colors

09:02
36

Tricks for Using Colors

06:34
37

Gradients

03:50
38

Class Project 06 - Colors

02:14

Text & Drawing

39

Use Web Safe Fonts

18:00
40

Character Styles

06:59
41

Font & Text Tips Tricks

05:43
42

Plugin Lorem Ipsum

05:39
43

Paste Properties

13:15
44

Class Project 07 - Text & Buttons

02:21
45

Draw Custom Icons

04:13
46

Strokes & Lines

14:28
47

Pen Tool

14:34
48

Drawing Practice

07:15
49

Production Video with Tips

12:27

Working with Illustrator, InDesign & Photoshop

50

Illustrator in XD

09:34
51

Class Project 08 - Custom Icons

01:49
52

InDesign in XD

11:38
53

Pros & Cons for Images

03:58
54

CC Library Connection

11:01
55

Adobe Stock

05:20
56

Free Images

01:48
57

Masking

06:44
58

Photoshop in XD

08:41
59

Infographic

12:12
60

Class Project 09 - Hi-Def Mockup

05:38

APP Design

61

Mobile Phone Mockup

18:08
62

Class Project 10 - Mobile Website

01:24

Placeholder content & Plugins

63

Hidden Features for Repeat Grid

05:17
64

Plugin - Content Generator

04:29
65

Plugin - UI Faces

03:15
66

Plugin - PhotoSplash

04:31
67

Plugin - Copy Cat

03:19
68

Advanced Asset Panel

04:37
69

Advanced Symbols

07:52

Micro Interactions

70

What are Micro Interactions

07:21
71

Button Grow

06:13
72

Animated Image Gallery

06:39
73

Full Vector Change

08:19
74

Class Project 11 - Micro Interactions

05:12

Prototyping Advanced, Voice Interactions & User Testing

75

Time Delay Transitions

04:42
76

Popup Menu or Modal

12:16
77

Animated Mobile Side Nav

03:26
78

Drop Down Menus

03:24
79

Drag Transitions

07:19
80

Number Ticker Scroll

06:51
81

Alexa Voice Commands

09:37
82

What is User Testing

16:53
83

Unmoderated UX Test

12:07
84

Class Project 12 - User Testing

02:23

Pitching to clients & customers

85

Mocking up in Photoshop

09:21
86

ProtoPie

02:40
87

Add Animation Using After Effects

09:39
88

Export Images & Assets

12:56
89

Export Code Using Design Specs

10:49

What Next

90

Class Project 13 - Roar Cycles

10:29
91

Conclusion

05:32

Final Quiz

92

Final 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

Six Completed Files
Exercise Files

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.

Student Work

RELATED ARTICLES

RELATED ARTICLES