Neumorphism in Figma 😍👌 | Soft UI Design (#neumorphism #figma)

hello friends neomorphic design or what we call it pneumophism is a kind of modern variation of the classic skeuomorphic design which heavily uses the gradients shadows and transcendent colors to create very real-world looking style of designs however pneumophism is a beautiful iteration of that classic design so in this video i will be talking about how you can go ahead and create pneumofism using figma so friends let's go ahead and get started all right friends to work with the pneumophism design in figma first of all we need to create a frame you can create a frame by going to this and selecting the frame and draw a frame right there and i have already drawn my frame and then select this frame go to the fill color and this select and select the desired color that you wish to use for the pneumorphism design so in this case i want to go ahead and select this color and maybe this one let's tweak it a little bit by adding the manual values to 96 and 96 and then this is the hsl value you could use right now let's go ahead and grab the rectangle from here and simply go ahead and draw a square of 224 by 224 you can choose any size you wish to work with now my friends let's go ahead and change the fill color to exactly same as this background color so you can use this color picker and now the background has been changed great now let's go ahead and try adding shadows so go to the effects click on the plus icon and you're gonna see a drop shadow option now this this is very important and enter these values very carefully click on this icon and here we need to kind of add shadows to to the bottom right corner and light or reflection to the top right corner top left corner sorry and then let's go ahead and enter the x value 10 y value 10 and then enter the blur value double the amount of this x and y offset so i want to use 20 and let's go ahead and choose the color so in this case i want to use the same hue that i am using for the background but my saturation and lightness is going to be valid so i want to put this dot route right around here and let's put it right there and this is pretty good let's tweak it it's 30 by 60 and it's looking much better all right now you could also play with this opacity so there are many kind of neomorphic design so i think i'm gonna go ahead and change this slider to adjust the color and then what you can do here is that you need to add a reflection to the top left corner so select this rectangle again click on this plus icon select the drop shadow once again and instead of using the dark color let's go ahead and choose the light color in this case a white color and then choose the x value as 10 y value is 10 but this time we need to enter a negative 10 well values here x and y and for the blur i want to use 20 so it will look something like this but you also need to increase the opacity if you have decreased it so my friends now we have created an ui component for the neomorphic design and it's really really great now my friends let's go ahead and convert this to a component so to create this as a component you can select this and click on this icon the benefit of creating the component is really very useful that you can anytime modify the master component and changes are going to reflect among all the instances of this master component for example let's duplicate this component by pressing shift and alt and dragging this to the right so i have created two instances you can see that here i have the diamond icon which is the field and this is the master component for the instances i have hollow diamond rectangle now let's go ahead and make this a rounded shape so ctrl click on this shape so that you can see that you can add the radius so let's drag it up something like 32 great and let's again control click on this one and completely round this so now we have other two components and now what we can say is that let's say i want to change the blur and shadow of these components so for all of these three components so i can go ahead and control click on the master component and go to this drop shadow and instead of using the 10x value let's go ahead and use the 12x value negative 12 and instead of a blur of 20 let's go with 24 so the changes are aren't instantly visible let's increase the value so that you can see what i'm talking about can you see that so changes are reflecting to every components so let's switch back to negative 12 and negative 12 and blur 24 great and let's do the same for the shadow so again knight it actually 12 12 and 24 great so here's our ui component so friends let's go ahead and create another states for this ui components so what i want to do here is that i want to go ahead and go to the sh i want to grab this and this component and drag it up here and then i want to go ahead and kind of control click right there and instead of these drop shadows let's go ahead and select the inner shadows and it's already looking cool now what we need to do here is that kind of adjust these values so what we can do here is that we can kind of reduce the shadow values by control clicking on the shape and let's go ahead and change back to let's say negative 8 negative 8 and 16 for the blur and also 8 8 and 16 and that is much softer and looking nice all right now let's go ahead and convert this to a component you can click on here to make this a component now what you can do here is that you can kind of grab this and duplicate the instances and control click on the second instance and round the radius or enter the radius value manually and also let's go ahead and do the same for this control click on the shape and enter the bigger value to create a circular shape let's enter the value more than the half of the height or width of this scale so it should be more than 112 so let's do something like this and now it's completely round so these uh ui components are already looking very nice so this is how we can create a pneumophism design inside figma and it's really very interesting because we don't have to do a lot of heavy lifting as we did in adobe xd you can see the adobe xd tutorial to see how we can make these ui components or pneumofism ui component inside adobe xd i will put the link in the description so let's continue with the figma once again i want to make some other changes or i want to create one more instance of this neomorphism design so let's go ahead and grab this one and kind of create an another instance now this time what i want to do here is that i want to go ahead and kind of add some other shadows to tweak it much um better so you can see one more variation so let's go ahead and control click on this shape and what you can do here is that you can add shadows to improve the design so let's go ahead and add a drop shadow to the uh bottom right corner and here we want to add a dark shadow so let's click on the color and select this color which is the 216 28 77 and 100 percent opacity and then enter these values let's say 6 6 and maybe 12 i think we can increase the x values so let's go ahead with maybe 10 by 10 and let's say 20 and this time i want to reduce the opacity to 50 percent like this and let's go ahead and create another drop shadow and this time i want to give negative 10 negative 10 and here blur of 20 and color should be white and opacity is going to be maybe around let's go ahead and play with the opacity maybe 90 is looking better so what else you can do here is that you can go ahead and duplicate this once again by pressing ctrl d and then resize this shape and now what we need to do here is that we need to again control click on this shape and change the drop shadow to inner shadow like this and inner shadows are going to be our drop shadows so it would create an effect like this but i don't think i am liking this much so let's go ahead and do some experiment right let's go and control click on the shape and then instead of using the inner shadows let's go ahead and try hiding them and now you're gonna see how it come up with and i really do like this neomorphism design style so what else we can do here is that we can make this also a component so let's go ahead and click control click and select the second shape also or you can drag a selection like this and ctrl g to create a group and then you can simply go ahead and click on this create component so now you have one more component now you can simply go ahead and press shift and alt and simply drag to the right and then you can round these corners so let's go ahead and round them let's say i want it to be 32 in it should be let's say 16 and also for this one i'm gonna round it completely and this is it so now my friends we have created the basic ui components for the pneumatism ui design now what you can do is that you can use these components to create real world ui design elements so let's go ahead and let me demonstrate them quickly you can create button by grabbing this component and you can simply go ahead and reduce the height let's enter it manually so let's go ahead and create a button so let's see first button and maybe you can write anything and select let's center this right and let's go ahead and create another component this time i want to use an input field so let's grab this one maybe and i want to create a rounded input field so let's run this completely and then i can say enter your email and put this here you can simply go ahead and change these colors and maybe this one yeah this is looking nicer what else you can do is that you can go ahead and create the radio buttons just select this component and simply go ahead and decrease the size so here is your radio button and you can make other changes to this radio button go ahead and quickly select the inner shape by control clicking on it and what else you can do is that you can convert this drop shadow to inner shadows right and just swap this light to the top right left corner by entering its positive value and this one to the bottom right and kind of increase this is our light color it's already on the top and this is our darker color we need to swap to the bottom or shift to the bottom so i can say negative eight and negative eight and here we go let's go ahead and reduce its opacity a bit yeah this is looking nice and what else we can create here we can go ahead and create uh let's say i want to use a circular image so i can go ahead and grab this component right one right here and let's duplicate this one and let's resize it a bit let's go ahead and remove the drop shadows and simply control click on this shape go to the plugins and you can install any plugins that you would like to use i'm gonna use the ui faces here and i want to use a profile photo so let's go ahead and apply avatar and it's gonna put an image like this right and you can create any design you want um by using these basic components so this is it for this video guys so if you do like this video please consider liking the video and commenting your thoughts in the comment section also please go ahead and subscribe to the channel if you want to see more contents like this i will be talking a lot about ui designs and front-end developments on this channel so i hope to see you soon in my upcoming videos thank you for watching this video take care

Channel: smashtheshell

Views: 28,878

Keywords: neumorphism in figma, neumorphism, figma, soft ui, figma tutorial, figma design, figma ui design, neumorphism tutorial, neumorphism ui, neumorphism design, neumorphic, neomorphism, neomorphism design, adobe xd vs figma, neomorphism ui design, figma vs adobe xd, adobe xd soft ui tutorial, neumorphism ui design, soft ui design, user interface, ui design tutorial, smashtheshellweb, smash the shell, figma neumorphism, figma neumorphism tutorial, figma neumorphism button, ui design

Id: BFQHOQPpQlo

Length: 17min 48sec (1068 seconds)

Published: Wed Dec 02 2020