Lessons

Lesson Info

How to Share your Prototype

You're gettin' to a point where you're trying it out, you're testing it out and you think it looks pretty good. Maybe you wanna just send it to somebody to look at the design. Or you wanted somebody to test out the full prototype. Or even just look at a few screens or flow, you know, that kinda of thing. We can share it with other people. If you look in the upper right corner, you're gonna see, with the document open obviously, there's a share or a share option. Now click on share: we will see three things. You'll see publish prototype, you'll see publish design spec, which actually says beta right now. And you're gonna see manage publish links. Here's what they are. We're gonna focus on publish prototype right now. Okay. For sharing. Publish prototype means we can take this prototype that we just created, we can share it with other people, we can actually... It's gonna be put in Creative Cloud. It's gonna be viewed in browser, on device, if they want, or maybe on their desktop, that k...

inda thing. But anybody can view it, they don't need to log in; all they need is a browser and the URL essentially and obviously Internet connection to view the actual prototype. That's great. That's a great way to build a sharing. And there's a couple of pluses to that too if you share it with them, they could actually provide feedback so they can comment. And I just wanna give you a flavor of how that works. So with this file, now what I wanna do is this, I wanna actually take this and share it... Yeah, I think we're good, this is fine. I'm gonna publish the prototype by clicking on publish prototype. It's gonna say alright, what are we gonna do here. Now it's gonna ask you to name this. The reason why it's asking you for a name is that maybe you wanna do versions of this. So we could actually create multiple versions. You can create copies. As you work on this, as you edit, as you make changes: you could do version one, version two, et cetera. Every time you publish a prototype and it's saved up to Creative Cloud for you to be able to access, you can get back to that thing later on. So, the prototypes you publish or share are gonna be accessed later so you can get to 'em. So I'm just gonna kinda keep it as is. We can say at final, if you wanna change the name you can, it's up to you. Allow comments, it means they can comment. If you don't want people to comment on it in the browser, if you just want them to look at it, turn that off. You can always republish it and turn that on again, later. We don't need full screen and you're gonna see what are called hot spot hits, that's actually great because people are gonna be able to click or tap, whatever they're looking at it on, and see those blue boxes wherever they can see a connections. So they can tap or click on it. Now I'm just gonna click create public link. It's gonna create this thing for me now. Now what's gonna happen here is, depending on the size of your app, depending on the size of your web site if you're workin' on. Whatever it is, whatever design you happen to be workin' on, this could take a little bit, I'm not gonna lie to ya. Because if your images are bigger, et cetera, because you want production of the assets, it's gonna take a little time. Mine's done, that's great. So what I can do now is I can actually open the link which I'll do in a second just to show you what it looks like. We can copy the link and this is how we get it to other people. It's just a link; you can email or however you wanna do it. Give it to other people. They click on the link, they can open it in their browser to look at it. And you can also copy in BEG code, that's what's called an iFrame code and allows you to put this on web page for instance. If you've gotta web site or blog or something and you wanna be able to take this prototype that's shared and put it on the actual site, all you need is that code. You can just paste it in your page and it's off. And you will see here that we can update or create a new link later. To make a design change you can update this link and it will keep refreshing the actual prototype. That's great, that could be a great way for you to work. You realize that maybe you're working with people and you need to have version control of versions for instance. You could create a brand new link and give it a new name, and that way you can have version one, version two, et cetera. I'm just gonna click to see it. I wanna show you what this looks like. So I'm gonna click on: open link. It's gonna open the prototype in the browser and show it to us. Let me get to it. I should see out here somewhere. There it is right there. Once again, depending on the image sizes and whatcha got goin' on, it might take a second to load. But you're gonna see. Here it is. This is what people are gonna see. They're just gonna get a link. You could just copy the link from there and paste it to an email if you want, that kinda thing. They open it in the browser, they don't need to log in if they don't want. And if you look in the upper right here, there's a comment icon. People can comment. Now first and foremost, maybe wanna look at it just to see what's goin' on. Maybe they're checkin' out the prototype to see your connections, to check out the flow, how it works. If you come out here to the design and click you're gonna see the hot spot hints. Whoever's lookin' at this can just kinda follow the breadcrumbs. Right, the trail. And they can start seein', oh, well these are connections they setup. Now if you look down at the bottom down there, do you see how it says one of two. I swear we had more our boards than that and our app. It only publishes or shares our boards that are connected. Okay. So you gotta have 'em connected somehow all the way back to the first Artboard. A string of connections. And anyone that's connected to that string will be published or will be shared. Now as far as comments, if you send this to somebody, they don't have to be signed in. I'm signed in right now with my Adobe ID or my Creative Cloud ID. You don't have to. If somebody else wants to comment, you can come down here and say: change the red maybe, or something like that. Like: change the red. If I press return or enter or click submit, I could add a comment. Whoever is looking at this, regardless of if their login with an Adobe ID or a guest, it's called, they can comment. A guest can comment using guest commenting. And it just means that they're gonna give a name and just a little information and go in and comment. That's it. They don't have to have an Adobe ID. So we can reply to comments. We can say, no. We can do that. Another great thing here too, is that these comments are preserved. And the comments are per Artboard. So if you go to the next Artboard, you'll have no comment. Because those comments are only for the home Artboard currently right now. You can delete comments if you are the owner. If you are the person that started this. You can delete comments, you can edit comments. We can also resolve comments. So if I click on: resolve for a comment. Basically it's kinda like me just sayin': okay, check mark, I just took care of that or that's my way of thinking. Whatever you want that to mean. And then I can say: resolve comments or go back to the unresolved. So have kinda of a system here that we can have people comment, you can send this link out to multiple people, they can comment. Everybody will see everybody's comments. They can reply to each other, et cetera. And all those are stored within Creative Cloud, within the actual prototype that you share. So this a great way to be able to go out and show this to people. Alright, I'm gonna go ahead and close this up and go back over to XD. Now like I said, if you create a prototype and you realize later, if you say to yourself: we need to make a design change or something needs to happen or I need another version to send out to people. Whatever it is, I moved the logo up and I'm like, let's show people this. If I go back up to share after you make a change maybe, add an Artboard, make more connections, whatever it is. You can go back to publish prototype. In there you can say, I'm gonna make a decision based on my workflow. Do I wanna make a copy of this? Do I wanna update the original? I'm gonna say, I'm gonna make a version two. However you name that, the two, date. Whatever you do for your systems, I can then click on new link. It's gonna generate a brand new prototype for me. It's gonna share it. It's gonna put in Creative Cloud for me. And I can then go look at it. And I would need to reshare this link. I would need to take this link and copy it and give it to the reviewers. 'Cause they're not just gonna be able to refresh the old ones. This is a new one, right. So, depending on your workflow you work with your prototypes how you need. But prototypes are great. They are a great way to be able to share, send it off to people, get a look, get a feel and see how it all works. Okay, so that's working a little bit with sharing your prototype. The next thing I wanna to do is I wanna start to talk a little bit about exporting our assets. And kinda what that means and how this works. Now if we are creating content and we're making a design, right? And I've got this mostly staged, kinda finished file here and I'm ready to go on to the next step, whatever that may be. In the beginning I talked to ya about how Adobe XD is sort of the beginning of the process, before development I should say. What we're doing in here is we are designing, sharing, prototyping and just going through that entire process. We're iterating, we're making these design changes on the fly. It's never dead. It's never kinda of the end. Even after you develop you're probably gonna come back and make changes, et cetera. But XD is not gonna generate code for us. That's not the whole idea. That's not the purpose. The whole idea here is for us to be able to do a couple of things. To be able to share the design, share it as a prototype or just the design. Get an idea to people that we want: stakeholders, whatever it happens to be. For them to be able to see what it looks like and how it acts, et cetera. Also to be able to share production-ready assets. If we wanna do that. And finally, we'll talk about this in just a little bit here, but looking at design specs, if you're sending it maybe to a developer on your team or elsewhere. And they can see how things are built and look at specifications.