Adobe XD Tutorials

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

hey guys this is just a quick video Gary Simon here of course tetra comm I just wanted to put this out there real quick just because Adobe just released

February's update for experienced 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 work so just yesterday for this update there are four editions 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 screwable 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 that works now right here this is just kind of a

template that I took from the Android or the Google material design I user interface kit I have two windows open by the way so this is where I grab that problem 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 can safely do so you know not very much contrast on why they did that but as you can see it's set to 667 4 D as the actual viewport height so to make something screw lab or like for a

given artboard itself all you have to do now is we can select it and we can just drag 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 the viewport 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 go to prototype hit play and now we hover over it previously this did not happen we can see that we have this

scroll bar and we can scroll down obviously a basically a necessity of a feature for a full-fledged app but they're getting there and so I just to show you I 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 our 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 pop-up window here so the way we do this we draw it out and get rid of the border here we do not need that and or you

could just uncheck it and we're being quicker and then you can see we have this new option background blur all right so it's like was that okay does it make sense what'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 interface kit I'm just going to get one

of these pop-ups right here and copy that go back and I'll just paste it right in and position this as I need to and it's a little bit 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 it's going to prototype real quick and just say we click anywhere on here we'll go here now we'll leave these are default settings we'll click on this and we'll go back and then we'll hit play

yada-yada-yada click and there we go 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 mock-up project

alright 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 roadmap 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'm recording courses for another network

but that's almost completed fortunately alright so subscribe here on youtube if you haven't yet and check out course cetera com see ya

Written tutorial: https://goo.gl/xiOKA5
Check out https://coursetro.com for more XD stuff!

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS weekly!

My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!