Learn how to access and use elements from UI Kits. From iOS, to Google Material, to Windows screens.
- [Voiceover] Now you can create or import…any icons that you want into Adobe XD,…just like I did here.…I made this magnifying glass…and I could just copy it right over here…by Shift and holding down the Alt key…I can drag it to Android and also clear to my iPad as well.…But to be honest with you I wanna be aware…of certain user interface guidelines…that are available for say iPad, iPhone,…Android devices, Window devices,…and I wanna use those user interface guidelines…and icons quite frankly.…
So for iPhone, what is available on the iPhone…and how will this look?…What other icons are people used to dealing with?…Well, luckily in Adobe XD…UI Kits are available.…File, Open UI Kit, and let's check it out,…Apple iOS.…All the various screens available on iOS.…We can see what it would look like…if somebody hits the Share button…or if the Share To Twitter overlays my app,…or even right over here for Control Center…if they swipe up how much of my app will get covered up.…
And oh yes, what about right up here, this carrier bar.…
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