Adobe XD Windows Beta Releases (quicky tutorial)

Key Takeaways

So, if you're anything like me, you won't use a damn Mac. Although, I'm really not sure why. But because of this, those of us in the front-end design PC community world have had to suffer because Sketch won't release for Windows ever. And Adobe has only made XD or Experience Design available for, you guessed it, Mac until now. So just yesterday, Adobe released XD experience design available in Creative Cloud. And holy, I download that faster than the first time I discovered cat memes in the mid90s on my 56K dialup modem. Upon installation, it opens up right away. And the UI is very, very minimalistic, very much unlike Photoshop or Illustrator. And the first thing I noticed was where is the canvas or how do I start a new document? But then I noticed this little gem down here, the artboard tool. Now this lets you draw your own artboard or select from a predefined list of device specific sizes. Then you use the very limited supply of tools to start building your interface. Now when I say very limited supply, that's a good thing because it's going to stop a lot of you newbie UI designers from adding lens flares and inner glows on every element possible. Now here I'm building out a simple list. And in the past with a tool like Photoshop or Illustrator, you would have to manually group and duplicate a ton of layers. But with XD, you simply group them and then click this little repeat grid tool and voila. Very, very simple. Now, something not shown here in this video is you can import photos or even text elements to quickly change up the repetitive nature of the content produced by the repeat grid tool. Now, to fully realize the potential of XD, you need at least two artboards. So, I'm creating one here to simulate a screen that will appear after a user has clicked one of the list items. Once that's all wrapped up, you click the prototype tab, and you select any items, and in this case, the original group that you want to remain clickable, and then drag it over to the screens that you want to appear upon clicking. And of course, we're given options such as target, transition, easing, and duration. Do that one more time for the back button and press the play icon in the upper toolbar. And there you go. We have a very quick and easy presentation of the layout in action as a user interacts with the mockup. Now, of course, this beta is very limited in terms of features, and Adobe has mentioned that they will be releasing monthly updates with new features. And as that happens, of course, I'll be here to guide you oh so gently. All right, until next time. I'll see you later.