See how to create a menu that slides down form the top in Adobe XD.
- View Offline
- [Voiceover] I now wanna show you how you can make…a drop down menu or a slide out menu using Adobe XD.…And the first thing I need to do…is make that screen that's gonna house the menu if you will.…And I'm gonna use this iPhone 6 Main screen…as my starting point…and essentially when you click on this button…that's when it's going to show this next screen.…So Cmd + D or Ctrl + D if you're on a PC.…From here what I can do is I can actually use…some of this content.…And what I wanna do is I wanna shrink up this repeat grid…so just the first one is showing,…'cause I wanna reuse these two elements.…
So shrink it up, hit Ungroup Grid,…and now I still have those elements…and I can start to change them.…I can double-click inside of this box,…this grouped element, and I can access that object…and change the fill color just to a nice sort of dark grey,…like that.…So this is what I want now,…just something like that, really easily done.…Let's hit Repeat Grid,…I can see that it's still all those same names,…but really what I wanna do is I wanna grab a text file…
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