HOW CAN THE BEST FEATURE ALSO BE THE WORST FEATURE OF ADOBE XD?! | I’ll show you how to create a scrollable area in your design for client preview. But I’ll also show you why you shouldn’t use it for client reviews either.
In this Adobe XD tutorial, we’ll take a look at how to quickly create a scrollable area in your design and preview it. We’ll cover some of the pitfalls of this feature, namely the fact that you cannot pin graphics to the top of bottom of your design so when you preview the work, any lower menu bars will scroll right up and away with the rest of the design. It’s good to know about this feature, but because of this major flaw, it makes previews for a mobile device impossible to send to clients and still be able to sleep easy at night.
Images used in this video:
https://unsplash.com/photos/zFrUz_tNjCY
https://unsplash.com/photos/2OSEWkQHiGI
https://unsplash.com/photos/zYJkisrhskE
https://unsplash.com/photos/uP3wVijuRxw
https://unsplash.com/photos/GHOiyov2TSQ
https://unsplash.com/photos/ktDODr-3tvY
https://unsplash.com/photos/rOhxayzwwvA
https://unsplash.com/photos/c8F6wiHEG48
https://unsplash.com/photos/Yql8bO9_F1g
https://unsplash.com/photos/KHbt9Q3udw8
https://unsplash.com/photos/ichHy_4EvUY
Tags: adobe xd scrollable content, adobe xd scrollable artboard, adobe xd scrollable prototype, adobe xd scrolling area, adobe xd scroll bar, scroll bar Adobe XD, scroll area XD, scrollable XD, scrollable area XD, Adobe XD tutorial, Adobe XD tutorials, how to, tutvid, nathaniel dodson, adobe xd cc, adobe xd app design, adobe xd for beginners, XD
Tutorial Recording Notes:
Disclaimer: these are the actual notes I used to record this video and are written in a language you may or may not understand. Hopefully, you find them useful or cool.
- Show the welcome screen and start with an iPhone 8 screen (just open the XD prerun file)
Quick show the Wires UI setup. - Building a news feed and show the repeating grid (plug last XD tutorial)
- Stretch it out and then try to preview it. See how we have no scrolling?
- Close this and go to the actual artboard and look to the properties panel and choose Vertical Scrolling and ensure that the viewport height is the same as the artboard’s height.
- Now go preview. Still no scrolling!
- Choose the artboard and show that you must extend the artboard to get the scrolling window.
- Now go open the iPhoneX UI kit and find a lower navigation bar and drag it into the design and plug it at the bottom and make the base of it 95% opacity.
- Zoom way in to ensure it’s perfectly aligned with the bottom of the screen.
- Now show how we can preview this, but OH NO! Adobe XD doesn’t support fixed elements so everything scrolls, including the bar at the bottom that must be stationary.
- I must admit, this is one very frustrating and glaring omission on the part of the folks at Adobe. It makes prototypes like this that I want to send to a client unusable because a client paying you thousands or tens of thousands of dollars doesn’t want to see a lower bar go flying upward with everything else, they want everything to appear normal. And because of that, you’ll look like a designer that doesn’t have their stuff together. It’s not a good look and when I know I need fixed headers or footers, I cannot use this feature in Adobe XD. It’s very annoying. Hopefully Adobe gets this fixed soon.
Leave a Reply