Neumorphic Animations in Figma | Smart Animate | Figma Tutorial

[Music] hey everyone welcome back to the channel today we're checking out these cool new morphic designs that I've created all these animations and transitions that I've made on my own on figma in less than 10 minutes these took very little time different triggers have different interactions on this page all the good they all look beautiful so without further ado let's just get started with the tutorial one of my subscribers made a podcast and I am one of the special guests so go check the podcast out I'll have all the links in the description if you want me to do more figma tutorials comment down below we love figma and i'll understand that you want me to do more of these so for this I'm using figma you don't have to download figma you can just go to figma calm and on figma calm you just need to sign up and you'll get a page like this you just need to say new file and it creates a new file for you it's as simple and easy as that it's free of course it's available on all devices and it's super easy to use to start off let's create a basic artboard I'm going to go with a square artboard and we'll create individual frames so for this one I need to give it a dark background in figma if you go to design and under design you see this fill component you click on it you can change the color from here but it also saves all the colors that you might have used inside the document in this case I want this dark gray background and that is just perfect for this project the next thing we need to do is pick up the rectangle tool from here or just click on R to pick up the rectangle tool hold shift and create a quick rectangle or in this case a square now that this square is ready to use I can click on it and from the fill I'll click on this color picker and drag this color picker out until you are able to select this gray portion now the rectangle here and the background are the same color which is what the rule of new morphism says now for new morphism we will need to create two box shadows one the dark box shadow and one will be light both shadow in this case figma you can use multiple effects at one time so I'll click on this plus icon right next to effect and it already gives me something called drop shadow which is exactly what we want if I click on this Sun icon here I will get the blur options the XY options and the opacity options so in the X option I want to save for the Y for is already there the blur I want to say 12 you can adjust this based on your requirements and about 20% should be good for this case or maybe you know 15% is better perfect again we want to give this a border radius of about 24 pixels so here is the corner radius option on the top right I'll click on 24 you can see now we have this very soft rounded rectangle or square to give it the light shadow now what I'll do is click on the plus icon right next to effect again and as you can see they've added another drop shadow right here I'll click on the Sun icon again in this case I'll give it - 4 by minus 4 on the x and y axis and the blur I'll give it 12 again and if I click on this color right here I will get this color picker and I can drag this right to the white portion not too white just slightly greyed out white and for the pasty I'll give this about 10% you can decrease this according to what you feel is correct I'll give it maybe 8 percent or 5 percent perfect it looks good and it follows the new morphic style now in this case we want a icon right here so to get an icon I can either use one of the resources I use or I can use a plug-in to install a plug-in go to this burger menu here go to plug-in and go to manage plugins this will allow you to browse all the plugins that there are and in the search bar I'll type in feather icons now feather icons is an open source icon library which is really good I've already installed it so I'll go back to this tab here and from the plugins panel here I can select feather icons it might take half a second or two to load up and as you can see we've opened a window with all the icons right here I'll search for home and as you can see home is there I'll just drag this out or I'll click it actually and as you can see home has been dropped here just gonna make this much bigger and put this in the center I'll give this a limb crease the stroke to about 4 as you can see now this is a thicker icon so under fill' I will go and I'll select from the top left cure linear gradient inside linear gradient the top gradient should be a light blue I'll just to choose a random light blue right here maybe slightly more bluer perfect and I click on the second color right here and I'll drag this color picker a little bit so that I can get a more darker more darker see blue kind of affection now also increase the opacity of the second color to 100% if I select this again go to a linear gradient again I can drag these pointers to adjust the gradient perfectly oh now this looks really good but there is one catch we want the gradient to shift when we are hovering over this so what we'll do is inside this gradient panel here I'll drag this light gradient a little bit to the middle and towards the left to the left most I'll flick on this panel and it adds another color right here so I want to choose a slightly yellow yeah I'll drag this yellow also a little bit and on the other end I want a slightly orange color which which by the way figma has already saved for me so I have these two colors now I can easily drag this gradient so I can't see the yellow from right here now by the way don't worry I will give the figma file down in the description so you can go ahead and start the project off right away so frame 8 I will click on frame 8 and I'll say command D or ctrl D to duplicate the frame now in this case what I'll do is I'll click on this rectangle and I'll increase the border radius or corner radius to about a hundred this way it'll become turn into this complete circle I also want to increase the size of the circles just by a little bit and place it in the center perfect also I want to click on this house and I will go to this gradient that I've created here you just drag these little dots around so as to drag the gradient around as well and I can shift this yellow and orange to fit my needs and I'll make this a little larger as well not too large just a little larger so as to make this bigger now in figma what I can also do is animate box shadows and in this case I will do exactly that so if I go to this white shadow I will increase the blur for this or 24 so it'll spread out more and also give this minus 6 and minus 6 on the X&Y so that it spreads out more and you can see it more I didn't decrease the opacity to 4 percent and that will give me an effect of lifting up from the ground I'm deriving a lot of interactions you're from material design so I think it's pretty cool now to prototype this I'll go to the prototype tab here and click on this I will click on this rectangle on the left and there is a little dot round dot which appears yeah I like drag this round dot do the second artboard which is frame 9 and it makes this little 9 to guide inside here I get various options so inside interaction I want to say on hover which is while hovering I want to navigate of course to frame 9 perfect inside animation if it's selected anything else I can just go here and click on smart animate our smart animate is very similar to auto animate in Adobe XD so you know how it works inside here I can see I can select different options I'll go for ease in and out that's the smoothest of them all and inside the time transition I can give it anything I'll give 450 milli seconds that is and that's about it that's all we need to do if I click on this rectangle and top right here I have a present but click on this present button you can increase the size of this of course in the top right there is this hundred percent written I click on this size tab I can choose between all these sizing options in this case I'll select fill scale down or up to fill as you can see it fills the entire screen right here if I hover over this you see how this animates and this also shifts between this rectangle and the circle very smoothly and very intuitively now we'll create it just one more animation here I'll click on design again so as to switch back to the previous settings I will of course create another artboard just like this on top or another frame in this case and the same size perfect and I'll give it the same color as this top right your grave perfect now since I want to cut this short I will copy this rectangle from the top right here and the new morphic kind of effect is still present so I'll make this much smaller just like this and put it right here in the center so for the level or for the indicator what I'll do will eyes I'll just copy this rectangle and I'll make this much much more narrower in size now place it right here in the center I will make sure that it has some good distance between the edges or the corners right here and I'll place it in the center so the left edge is this dark gray which I'll change to a red right here and I'll give this a bright red from here and I'll on the right I'll click here again and I'll give it the same color but just you know lighter a little bit but obesity should be about say 12% yeah that look that looks really good now for a level it should go from less to more in this case I'll just click on this element here hold shift and while I'm holding shift from one of these corners I can just wrote and the gradient shifts with it so to create a subtle I'll click on paw which is the shortcut and I'll hold shift and drag it out so this creates a simple circle right here and I'll put it on one of these edges and I'll give it the same red color but I won't give it a gradient I'll reduce the opacity for this to about 45% now I'll click on this frame and say command D ctrl D to duplicate it and I'll in the second frame I'll drag this circle out to the right I'll hold shift so as to just drag it horizontally put it here and inside the colors I will shift it to this green color that I want here now increase the opacity to 100 now figma is easily able to change or animate between gradients or Pastis very smoothly so I really like that about figma so to prototype this I'll go to prototype I'll click on this circle here for interaction I'll click on on drag so while we're dragging this icon or this circle it will drag the animation as well under that I'll click on navigate to and I'll click on frame 11 so it navigates from this frame to this frame inside animation I want to say smart animate go ahead and do that inside easing I'll say easy now since that's the smoothest and I'll give this a 500 millisecond timer so if we drag this little icon from left to the right see how the opacity also changes it shifts from this dark to first this orange then from this orange to this green and it looks amazing it's a perfect way to it's a perfect example to actually animate gradient now that was a little figma tutorial if you want me to do more tutorials on Sigma or more videos on Sigma then go ahead and subscribe to my channel but that when I could right next to the subscribe button so that you get all my videos on and I'll see you in the next video every Monday and Thursday without mistake

Channel: Punit Chawla

Views: 203,915

Keywords: figma, figma tutorial, figma ui design, neumorphic ui design, skeumorphic ui design, figma smart animate, figma smart animate tutorial, smart animate, soft ui, neumorphic design tutorial, フィグマ, デザイン, figma animation, neumorphic animations, neumorphism ui design, neumorphism ui, neumorphism xd, neumorphism figma, ui design, ux design, ux/ui, figma ui, prototyping, xd vs figma, sketch vs figma, figma animation tutorial, figma auto animate, auto animate, punit chawla

Id: fB7h2RxXpqA

Length: 13min 8sec (788 seconds)

Published: Mon Jan 13 2020