Alex Poterek demonstrates Adobe XD's Repeat Grid feature, which auto-populates artboards from image folders or spreadsheets in seconds. He shows how to convert sketches into high-fidelity prototypes using symbols and UI kits, and preview designs live on iOS and Android devices simultaneously.
Chapters
not just a wireframing tool. This is meant to go from start to end. This is full production. This is just the starting point of this, but we kind of get rid of a lot of the tedious design tasks when going forward. So for instance, I have this repeat grid of all of these shoes. Now if I have just a folder full of images that I like, I can select all of those shoe images and drop it in this first cell, and it's just gonna— Aww.
Aww.
So yeah, it's just going to fully populate that, and when you run out, it'll just kind of repeat itself again.
Oh my God.
Developers are asking thousands of dollars just to do this.
What's that?
Developers, freelancers ask thousands of dollars just to do this.
This is—
15 minutes.
Yeah, easily. And that's me narrating this. Can you use it? So once you see the content getting in there, then you're going to start reacting to some of your design choices. Like, I can't read any of this, so maybe I want to put a box behind it or something really quick. And as you can see, it's doing it for all of those things just really quick, really simple. And it's not just images that this works for. So if I have a text file that has— and maybe this is a spreadsheet with all of these, the names of these products on it— I can just take this text file and drop it in here, and it's just going to update that for you as well. Then same for prices. I think we'll live with that. It's free right now. So, yeah. So, once you start having this workflow down, you can really pump out quick prototypes just in a matter of minutes. So, I actually have— I took this concept a little bit further. Just not too much further, but you can see that you can get to a pretty quick fidelity, pretty quick high fidelity. I didn't do a whole lot to get to this point. I added an image up here, I added this text block, and I adjusted some of the typefaces. But since all of this stuff were symbols already, it was all just doing it for me. I only had to do it once, and it was affecting all the other artboards.
Since it's doing so much magic, is it possible to Is there a possibility to connect some IoT and drop in the junk data that is coming?
Sorry, what was that?
For IoT prototyping, since it's doing so much, is there a possibility of just dropping the data that I receive from IoT to—
Not yet, but it's definitely things we're considering. We want to get to that point, but it's not there yet.
I would love to sign up for a beta for that.
Yeah, that's good feedback that we'll keep in mind. And again, this product is still in beta. It's not 1.0 yet. So we still have a ton of things we want to do, and it's always great to hear that kind of feedback. So just real quick with this, this was my kind of end-to-end prototype. I don't think I linked this guy up. So some more feedback that you might get is, hey, what do you do with this search bar? And that's a good point. Your developer might wanna see what the search bar interaction is. It might be kind of obvious because iOS does a lot of this for you. But sometimes you need to give them that level of details. So I can duplicate this artboard. And I can actually go up to File and Open UI Kits. And here we have all of the Apple kits made for you. So I can copy this and paste it right in here. right onto this artboard, and then link this guy up. So I actually might want to— I'll take this element, I'll link it to this artboard, and I probably want to show that this search bar has a little bit of focus to it. So I'll give it a little blue border, maybe up the pixel, not that much. So when I click on this element, it's just going to populate that with it. And because we have all of these sticker sheets of Apple UI for you, it's painless. It takes only a couple seconds. And that's kind of the portion of the demo I wanted to give you guys, just to show you how quick and easy it is. And there's a question.
I'm just wondering, does this also let you prototype for iOS and Android simultaneously?
Yeah. So right now I'm using these iOS— iOS artboards, but over here I can create custom-sized artboards, but I can also— I have this list of different ones like Android tablet, Android mobile. So if the tablet over here— so you can do all these different sized artboards at this time. And what's really nice about this, and I don't have an iOS cord on me right now, but if I plug this into my phone, I'll actually be able to live preview on my phone with all the swiping and gestures. And while I make changes on Canvas, it will update in real time on my phone, so I can get a really good feel for how this product is actually going to look.
So can we move all the iOS designs to the Android ones without any redesigning things?
Roughly. We have some features that are coming out soon that will kind of do that a little bit more seamless. It's not in there yet. You can get a kind of rough feel if I copy this to, say, the mobile one. When you resize things, it's a little wonky. But we do have— we have some new features that are coming out that are gonna kind of be revolutionary.
I've played with this app before, but for the iOS kind of tab structure, And the header, whenever I turn the scrolling feature on, it moves all of those too. Is there a way to make that stick?
No. So fixed headers and components, again, not in there, but it's in our roadmap, I promise. That's one of those features that people are just waiting on, and it's just like we want to get there really quickly. But not quite yet, but very soon. Do you guys have any training or Is there supporting information that kind of helps us learn the ins and outs of this? Yeah. So if you download this and you just go to the Learn and Support item— let's see if the internet's playing nice now— we do have a list of documents that let you do it. And a lot of YouTube videos are out there already. Are there any more questions about this while I'm in the app? before I switch back into kind of—
Are there universal design standards? So this is how big your hamburger bar should be in your outline, or is it all up to the designer?
It depends on where you're working. If you're working in a big corporation, and I'll actually get into that with how Adobe Design works, but different companies use different icon sets and different sizes, and it's the human interface guidelines. Yeah. Did I see any more hands? I don't know if I did.
Actually, related to your question, does this app have ready-to-use UI templates in it? Because the buttons should be this big, or the writings, the paragraphs should be 12 info. I'm just making that up.
Yeah. As far as XD goes, the best we're doing right now is having these UI kits that you can kind of pull from. And that'll give you a good feel of what the appropriate size for the resolution is. But other than that, we don't.
We do get all the templates of the— I mean, the buttons or anything like that, right?
Yep.
The library is big enough for us to work on the buttons.
How interconnected is this to Photoshop? For example, if I want to do some picture editing, how interactive is it? That's a good question. So from Illustrator to XD, it's pretty fluid. From Photoshop, we're working on— I don't know if you use libraries in Photoshop much. That's a new feature that's coming out soon. And then that will be a really tight integration. So if you make an edit to a photo in Photoshop, it'll update into XD for you.
Is there any way to save, like if you had your company style guide, is there a way to save that in Photoshop so that you can apply those to—
Yeah, you can create, if it's in Illustrator already, you can probably bring it into here pretty seamlessly and just create an XD document out of it. And as I was mentioning about the libraries that Photoshop has, you can also create libraries based off of Illustrator. design guidelines, and then you can easily— it would actually act pretty similar to how these icons, these symbols are. So you can just drag and then drop all your UI elements just really quickly. Cool. I'm going to move on to the talk part of this unless there's any other questions. And also feel free to raise your hand or Shout out if you want to ask something. Thanks.
