Adobe XD Scroll & Blur Tutorial (New Updates to XD)

Key Takeaways

hey guys this is just a quick video Gary Simon here of cor setrac I just wanted to put this out there real quick just because Adobe just released February's update for experience design now if you've been paying attention then you'll know that adobe is planning on releasing an update for XD every month now fortunately they're sticking to their word so just yesterday for this update there are four I conditions two of which are big in my opinion so first we have sharing the ability to share your artwork now and I already created kind of like a share just for this little fake project here and scrollable artboards blurring elements of the user interface and exporting SVG and previously you can only export PNG so now you can Import and Export SVG files okay so let me just show you scrollable artboards and blurring elements of the user interface and how all of that works now right here this is just kind of a template that I took from the Android or the Google material design uh user interface kit I have two windows open by the way so this is where I grabbed that from and you can just grab it from right there over here if you want to follow along or not and so what we can do now is if we click on the artboard itself we can see that it has a viewport height section right here it's kind of hard to see because they've made these so you know not very much contrast I don't know why they did that uh but as you can see it's set to 667 for the uh the actual viewport height so to make something scrollable like for a given artboard itself all you have to do now is we can select it and we can just drag it it down so you know maybe just a little bit further right around here I'm going to get rid of this and then we'll take this repeating list of names and we'll just go all the way down past the viewport and as you can see it has this little dotted line that lets us know the viewport and so all this stuff will be scrolled content that will be visible so just to give you an idea of what that is we go to prototype we hit play and now if we hover over it previously this did not happen we could see that we have this scroll bar and we can scroll down obviously basically a necessity of a feature for a full-fledged app but they're getting there and so I just to show you uh the blurring of elements let's go ahead I'm just going to take this and copy it the artboard and then paste it and this one doesn't even need to scroll necessarily so I'll just bring that back up and what we'll do is you can use any of these shapes or shape tools the pen tool or whatever I'm just going to use the rectangle tool as that one makes the most sense I want to let's say for instance we wanted to blur out the whole interface in order to have Focus brought towards maybe a little popup window here so the way we do this we draw it out we can get rid of the Border here we do not need that and or you could just uncheck it that would have been quicker and then you can see we have this new Option background blur right so it's like what is that okay it doesn't make sense well it's because the amount is so high so if we drag this down now it looks a lot better so maybe right around there makes sense and then if we switch back to I'm going to switch back to my uh interface kit and just going to get one of these popups right here and copy that go back and I'll just paste it right in and position this as I need to and there a little bit uh a little bit too much showing through here so I'll click on this background blur blur it out just a tad bit more maybe increase the brightness so you can see you can wash it out a little bit more you can also control the opacity I think I like that now let's go to prototype real quick and just say we click anywhere on here we'll go here we'll leave these a default settings we'll click on this and we'll go back and then we'll hit play y yada yada click and there we go very very cool so these are two big features that are definitely going to be you know coming in handy for pretty much any serious app design or mockup project all right so that's it for this update I'm personally looking forward to what are called micro interactions now I hit up adobe on their Facebook account to inquire about what or when they're going to release the ability to animate individual user interface elements as opposed just to being able to animate the page transitions which is really all they allow you to do at this point in terms of animation and they actually responded and said that yes they're calling these micro interactions and it is on their road map okay so I've been really busy with other stuff lately but look out for more tutorials in the very near future like within the week or so once I get all this other stuff out of the way I've been recording courses for another Network um but that's almost completed fortunately all right so subscribe here on YouTube if you haven't yet and check out cet.com see you