Join Paul Trani for an in-depth discussion in this video Sharing a prototype, part of Design a Mobile App with Adobe XD.
- View Offline
- [Voiceover] Once you have all your prototyping and interactions set up, you can then share it with others and that's what I'd want to do. You could do that a couple different ways because if you want to show the interactions, you can actually record a video. So I can start and record a preview pointing out how this app works as you dive into any one of these sections even showing this drop down menu like that, going back to the beginning and then I can stop it right there.
From there I can save that out. That's basically gonna be a Quicktime movie file that you can then send to others. So that's one way of sharing content with others. The other way is right over here and this is the way you're probably gonna use more often, is sharing this online. So clicking that button, I can give this a title, I can drag an icon right there, which is what I'm gonna do right now. Grabbing this Wonders icon, happens to be 120 by 120.
Dropping that in. This is where it's going to start, which is this screen right here, which I previously have defined. Click Create Link. It creates this app and will give me that link that others can access whether they're in a web browser on the desktop or on their mobile phone. So I can copy this or I can just click on it and you can see this is exactly what the person you send this to will see. They'll be able to interact with it any way they want.
And, again, if they see this on their phone, then it's actually gonna fill the screen. It won't have any of this white space and obviously you can see the icon and, of course, when it was published. So that's really cool. You could share it multiple times, but then you can start to manage links as well. So as I select that, you can see I can manage that link and essentially it just means that I can delete it in case somebody's reviewed it already. Maybe I don't want that link to be out there. Nonetheless, I can remove it just by selecting Manage Links, but in essence everything is set up, I can share with whoever I want.
I can also come over here and Embed it, say, for instance, if it's part of a larger campaign. So you can see sharing content is easy from Adobe XD whether you're making a video that you want to send out or you can just create a link like I just did all from directly within Adobe XD.
Learn how to lay out a screen design with graphics and text and import vector and raster images. See how easy it is to create complex screen designs, complete with repeated lists and grids that are as simple to change as they are to create. This goes for any mobile screen type: iOS or Android, tablet or smartphone. Once the design is done, author Paul Trani shows how to add interactions and transitions to see how the app will "work" from one screen to the next. The end result is a full-featured prototype that can be shared with designers, developers, and clients, and broken down and exported as assets for use in development.
- Creating your first Adobe XD project
- Working with graphics and text in Adobe XD
- Importing assets
- Building additional screens for different display sizes and platforms
- Creating UI elements
- Using Repeat Grid for easy prototyping of lists and recurring elements
- Adding interactions to elements
- Creating transitions between screens
- Publishing and sharing a prototype
- Exporting artboards and assets