In this video learn about the different project sizes you can start with, as well as get an understanding of the workspace in Adobe XD.
- [Voiceover] When you launch Adobe Experience Design, you'll be greeted with this welcome screen where you can create a new design based on templates. But, I also wanted to point out that there is a sample file that's really helpful, that you can access. And also, UI kits, resources, and all your recent files will be right here, but we're gonna create one based on a template. Notice we have iPhone 6 right over here and if you click any one of these flyout menus you get additional options. Now, you can always change your mind later on, but we're gonna start with iPhone 6. With that selected I can just click on that icon and I can dive right in.
So here's my file, and notice it says iPhone 6 one and two and three as we add more Artboards, but you could easily just jump in and change this. We'll just call this Splash, because this will be our splash screen. And as I've selected that, notice that right over here, I get Properties. Okay so, for anything that you create, you're gonna get the Properties off to the side. So, the appearance for instance, I can change the fill color, all pretty straightforward right in here.
Changing that to black and not only that, again, if I just click on the title, I can change the size. And what this is, is this is actually an Artboard, so our entire screen is gonna exist within this area, but we can also rotate this Artboard, just like we can rotate our phone. We can go into landscape mode and back into our portrait mode as well, just like that. You have different zoom levels right up here and you can also use shortcut keys you might be familiar with.
You can use command plus or minus whether you're on a Mac or a PC, or you can just use this right up here. And then we have Tools off to the side. But with this all set up, I can go ahead and save this file. And in this case, I'll just save it to my desktop and I'm gonna call it Wonders. The next step is to start creating a design using the Tools on the left hand side.
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