2.5 Repeat Grid Tool, Publishing Design Specs, and Downloading UI Kits
The repeat grid tool is really useful and can save a lot of time when creating dynamic UI designs. In this lesson we’ll use the repeat grid tool with images, publish design specs for developer handoff, and explore UI kits that are available to download.
1.Introduction1 lesson, 00:34
2.Adobe XD Tips and Tricks6 lessons, 1:13:44
3.Conclusion1 lesson, 00:17
2.5 Repeat Grid Tool, Publishing Design Specs, and Downloading UI Kits
[MUSIC] Okay, Repeat grid tool, now, this is amazing, this is something that is unique to XD. I absolutely love this, so then I'm in, this is 300 pixels wide by 300 pixels high, that's the art board. So I'm going to create a grid of images, you can use this for a content feed. It's fantastic for a content creator like myself as well when I've got lots of stuff I want to lay out quickly. So let's just create a square. And we'll just give this any fill for now because we're going to cover it with images in a minute. So of course, we have an art board 300 wide, 300 high, so we're going to have three going across and three down. So let's do the math, 300 divided by three is 100. Now whereas normally, in other apps, like Photoshop or Illustrator or anything, you'd have to go and manually create all of these. And then mask them and all that stuff, no, no, no, no, no. In XD, we simply create one piece of content, it could be a piece of content on a content feed. We select Repeat grid, and we drag out. Now, by default, it will add a 20 pixel gutter, or a bit of spacing between these, both horizontally and vertically. But we just drag that down to zero, by clicking in that space. And then, just snap these here, so all of this, you can see as I'm mousing over. These are our images. And what we can do is we can grab these nine images, drag them on, and it will populate all of these different things. So if you have a content feed, and the content feed UI is going to have one style, but you want to simulate lots of content. You just design one repeat grid and then just chuck in the content. So we can double click to go inside our repeat grid group now. We could type some text, we position it here. So we get Photo Title, and you can see as I start changing the actual text content. It's specific to each image, Misty Mountains, but if I move it around, it's consistent. So any pieces of content the actual image, the text content, the words that are being written. Those are unique to each image, but the styling, so if we go and change the color now, styling is consistent. So when you have an entire content feed and you want to make little changes and things like that. It makes it incredibly easy to do so. So a fantastic tool, and of course, if you create your content and you think, I need to do something that isn't repeat grid tool friendly. Just go to Ungroup Grid, and it will leave all your content there, but it's just normal shapes and text now. And a few bits may be grouped together, so you just need to ungroup them. Right-y-o, Publish design specs. Now this is something else that's a new edition, or a very recent edition to XD. Incredibly useful for that process from handing off from a designer to a developer. So when you hand over a project from designer to developer. Obviously, there's so many details that you've got to try and communicate to them. The spacing, the colors, this, that, and the other. And a lot of that can get lost in translation between the designer and the developer, not anymore. So, let's just say we've done a really, really lovely app here, I'll show you a much better example in a moment. You finished your app where your art boards are fantastic. You go up to the share icon in the top-right corner, and go Publish Design Specs. And this is in beta at the moment, and you just give this a name. The units, well, they're based on custom units, because we created our own art boards. And you can click New Link, and it will generate a link. I believe this is going to generate one from all of the art boards that we've been working on. And it will just take a moment to do that. And there we go. So we can then open that and it will open it in our default browser or we can just click Copy Link and it copies that to the clipboard. And if you make any changes, just jump back up here and then go Update Link, and it will update it. So here's an app that I believe [LAUGH] is from another stream. So this was a two screen app that I designed, I uploaded it, and we can click in here. And we can see that if I start clicking around, so, I'm now a developer, I'm looking at this. And I can see here if I click on the menu icon, I've got the dimensions, oops, I've got some half pixels there, naughty. [LAUGH] I can see the dimensions, I can click on the text, I get all this font information, the width, the height, the X and the Y position. The alignment, the size, the weight, the color, everything, everything, and any content there. And I can just click in that space and it will copy any content here to the clipboard. I click in here, it copies that color reference, so #FFFFFF, which, of course, represents white. So it makes it incredibly easy for a developer to just hover over content, see what's what. What the width of things are, click on certain elements, and they just get more information here, as well. And you can adjust the zoom up here, or you can hold down space on the keyboard. And you get that little hand, and you can scroll up and down the design. And you can navigate from screen to screen at the bottom as well. So you can even see here, I've got a gradient over a blurred background here. And it has all of the different colors that make up the gradient, the opacity, the angle, it's just brilliant. It just gives developers so much more information than they would have been able to previously have. And what this means is that the more information that you're able to give as a designer to a developer. The less of that information is going to get lost in that process, so the better process, it means a better output. It's just going to be a much, much better product and everyone's going to be happier. Designers get to see their product built with all the detail that it was designed with. And developers get the information they need to be able to build it, so, it's just a win, win, really. Anyway, let's calm down and jump back into XD. Now this is the last one, Downloading UI kits. Now I don't know if you know this or not, but you can go to File, open Get UI Kits. And you get the Apple iOS, Google Material, Microsoft Windows UI kits that you can open up in XD. Or you get Wireframes as well, so I've actually loaded these up in a browser, so this is the Apple one. So if you're designing an iOS app, you can get all of these different bits of UI. It's a huge kit, and you get everything in there that you can use to build your app. Or mock it up, or if you want to mock it up in a certain way, or within the iOS framework, then you have it here. In fact, you can download it for other programs as well, but you've got the XD1 right here. And just open it up in XD, and voila, you've got the UI kit for iOS, Google Material and Windows. Now that's pretty cool, in my opinion, this is even cooler. So these lovely folks here, they've pulled together these wireframe kits. And you can get this for Adobe XD, and well, let's have a look. 170 mobile templates, 90 web templates, 240 components, and 178 customizable icons. Now if that's not cool, well, I don't know what is, that is a huge, huge head start. So if you're thinking of wireframing a project, I mean, these wireframes look good. I mean, look at them, they're pretty high fidelity wireframes, they're very smart. But this is a completely free wireframe kit that you can download, so apologies if I'm getting excited. This is really cool, in my opinion, so fair play to these guys for doing this. But that's super cool, that is super cool, so there we go, you've got the UI kits and we've got some wireframe kits. So if you're interested in getting started with XD, or you're even starting a new project. And you'd love a really, really nice high-fidelity wireframe kit to use for your project, then here we go. There are some things to get you started. But yes, on that note, if there are no more questions, I think we're going to wrap up the stream there. So thank you to everyone for joining, I hope you enjoyed this, a nice bit of variety in XD. There's a few time saving tips there, and some things like background blurring, that's just really cool, so I hope you enjoyed it. Thank you so much to the moderators within the chat and for everyone joining. It's been an absolute pleasure to be here, as always. My name is Daniel White, aka, Danski, thank you very much. Have a fantastic morning, noon, or night, depending on where you are in the world, take care, and I'll see you soon.