Hi everyone, in this video we're going to look at...

these buttons down here...

they're neomorphic, is the term used to describe...

this kind of like pushed out UI style...

it's really easy to make in Figma...

they look pretty, they have some accessibility problems...

but let's jump in and talk about it now in Figma.

All right, before we get started...

what is neomorphism or neomorphic design?

It's this look, it is this...

yeah, it's this, look, it looks beautiful, and it kind of looks like...

you know, the buttons push through fabric, or gel, or...

ah, it looks beautiful.

I rushed out and added it to lots of designs...

when I kind of first discovered it...

it's basically just a bunch of drop shadows...

and I'll show you how to make it in a sec.

The trouble is, is that there's a lot of people...

who hate on it, and I'm kind of one of them now as well.

Why? It's accessibility, it's people that are using...

your device in low light or a bad screen...

or they've got visual impediments...

they're not going to see your button, see that one there, the Sign Up...

it's very hard to see, very low contrast...

it's outside of the scope of this course...

but as a UX designer you should be looking at accessibility...

and especially for this UI design in Figma...

looking at something like contrast ratios.

So write that down, and be that something...

that you go and look into after this Figma course.

Basically, what I do is, it's pretty easy after a little while...

to know what is going to work and what's not...

like if I squint my eyes at these buttons...

kind of look through my eyelashes, they disappear...

I can't even tell where they are...

there's just not, like that's my rudimentary accessibility test...

it's not infallible, but squinting your eyes is like...

yep, that disappeared, all of that interface disappeared.

You need some really strong, maybe just...

you know, strong enough kind of difference...

between things, buttons and text.

So you can't do it, you can do it...

I'm going to show you kind of...

a balanced approach in here, in Figma.

So there is lots of different kind of...

like flavors of that neomorphism.

You can go and Google, like "neomorphism"...

and look in Google Images, and find people's tutorials on them.

I'll give you the basic way, because basically...

all it is, is I've got this from, leftover from another tutorial...

I've got this button, it can be anything, it could be text, button...

UI, we're going to use this thing.

So I've got nothing applied to it, all I want to do is...

basically it's a bunch of drop shadows.

So under Effects, we know that we can add...

more than one drop shadow, so I've got my first one here...

and basically there's two to the bottom right...

and two to the top left...

and these two to the bottom right are black...

and these two to the top left are white.

Now the trouble with using white on the top left...

is that that matches the background color.

So whatever you do, whether it's a dark mode version...

or a kind of a light mode, like we're doing...

the background can't be solid black or white.

So I'm going to go, you are going to be...

like the bigger the contrast the kind of better...

if you just do a little hint, let's see how this goes.

Let's wing that one, so the background's a bit darker...

so I'm going to do two drop shadows down here...

so I'm going to go off, maybe I'll do two big ones...

so this, these numbers will have to adjust...

depending on what you're doing.

I'm going to drag that one out to maybe there...

that went out to maybe about there...

blur it, so it's nice and blurry.

So there's one kind of big wafty blurry black one...

I'm going to add another one.

So there's my big wafty black one down there...

this one here is going to be a tighter one, so maybe 1 and 1...

and the blur is going to be maybe 2.

You can see, kind of adds that, kind of depth to it...

we kind of did that before, two drop shadows...

now we need to add two more...

that one, it adds it to the top...

it's hard to know, you can't rename these ones, so it gets a little tricky...

is you need to be white...

and you need it to be negative.

So we need to go up to that, that way, you go away...

we've already got a sense for it, right?

I'm going to do just a little one, so what?

-2, -2, turn the blur down, 2...

2...

kind of getting there, right?

We'll add another one, it's at the top, go to white...

it's going to white 100% by default...

we're going to turn that down in a second...

and this one here is going to be up to the left again...

up to the top...

and maybe I'll turn the blur up quite a bit.

It's kind of cool, we might have to-- that's kind of it...

here's my tutorial.

I'm going to maybe lower the opacity of this...

and it's about that background contrast as well...

let's go a little bit darker...

oh, now it looks worse.

So it's a balance, that's a balance...

let me lower the opacity of these ones, 20%...

this one here, get it down to maybe 40%...

I'm kind of guessing at these, just looking at the document there...

I think that top, big wafty one, which is the wafty one?

I don't know why I used the word wafty one...

I got that from Sarah Parkinson, she used to say wafty lots...

look at that...

does it look neomorphic?

Anyway, I like it because there's still the contrast...

I've still got the contrast enough...

but I've also added a little bit of that.

Now you can do it on--

now let me quickly show you...

it looks different on different ones...

so those settings that I just showed you...

it's still like one big shadow, one small shadow...

the two down here are black, the two up there are white...

but if I change the background color, let's go-- let's do a bad one.

So, as in the contrast ratios, it's going to look cool...

but the contrast ratio is not going to be probably high enough...

so let's do that.

You are going to be the same color as the background...

there we go, and it's...

kind of shows up...

this doesn't work, we're going to have to go a lot lower on these...

so maybe 5...

oh, 10...

5, you see, it will depend on what you're doing...

what colors, there's not a specific setting...

so if you're following somebody's tutorial...

and yours is not looking as amazing and neomorphic...

you might have to adjust things to kind of fit...

I don't know, what do you think?

If you are interested in this, Google "neomorphic design Figma"...

there's a bunch of stuff in the community...

that you will be able to just go and like download and start using...

it's new, more thick...

and you can just copy and paste them, and start using them...

and just have a little look...

if you're like, "Oh, that looks cool," see how they've done it...

like, Dan just kind of hacked his way through it...

you saw there, but if you really want to get into...

like, where's another good one?...

I don't know, the line, oh, there's a bunch of different ones...

find the look that you like, kind of make a note...

of what effects were applied...

and kind of how big and how long they were extended...

but just be careful that you are, you know...

there are times where it is just nice to make nice stuff...

but if you want this to be usable...

in a kind of a practical real world sense...

that button there, it's not going to pass any sort of accessibility test...

and just make it hard for your users...

but if you're still excited by it like I was when I first saw it, go nuts...

put neomorphism everywhere, get out of your system...

like learning the Lens Flare when you first learn Photoshop...

put it on everything, but eventually you'll realize...

not everything needs a Lens Flare...

all right, that is it, I will see you in the next video.