Figma change font-size animation | Custom Radio Buttons effect (2021)

all right welcome to today's video in today's video i'll be showing you how to create this change in font size animation as you can see when i click in the different boxes the font sizes actually change and uh it's an animation that's called to the infigma so sit down get a cup of coffee and then let's get into today's video [Music] all right so we're going to name our project font size okay then we're gonna just make use of a plugin i love it's called iconify we're gonna just select some two radio buttons just type in the word radio and you have some to radio buttons right there i'm gonna make use of these they're gonna be very useful to us then we just wanna make sure that we have our radio buttons but you wanna remove them out from their frames the frames they come with we don't need those frames so you do that by just dragging the piece out of the frame okay looking much better all right then we're gonna drift we're gonna draw a mega frame a quite bigger frame okay just make sure it's actually just big enough big enough and visible okay that's actually looking fine just place your icons in the frame all right so we're gonna make use of the rectangle tool i'm gonna draw three different boxes hold alt actually before you do that let's just change the border radius to 20 okay 20 looks fine then we shall give this a stroke i'm gonna give this a stroke we're gonna change the stroke color to something dark green let's change this stroke right to five okay just make sure it's some form of dark green all right that actually looks okay then for this first example so we're going to duplicate this duplicate that once then one more time okay so we're going to zoom in right so we're going to type in some three letters actually some data we're going to type in the letter a so the first letter is going to be font size 70 then i'm going to duplicate this and the second letter is going to be a font size 90. okay and i'm going to duplicate it one more time then this is going to be size 120. all right i think that's okay it looks it says 120. you can actually see the difference so three different letters of different sizes actually let's reduce the small one to 60. all right so there's actually some big difference in all the letters so we're gonna position these boxes right below then we're going to enlarge the middle box we're going to enlarge it a little bit just do that by holding shift so that the box size increases evenly then for the next box also we're going to increase it it's going to be quite bigger all right that's looking much better then i'm gonna position this right around the middle then i'm gonna place the bigger letter into this the second letter right there in the middle box then the other letter the smallest letter actually we're gonna place it in the smaller box just make sure to position them so they actually just aligned properly okay i like it that way actually it looks aligned now all right so in the in our first option right here we're gonna change the color of the we're gonna change the color of the letter to white change the color of the letter to white okay then i'm gonna change the the fill the fill is actually gonna be changed to green okay so this is an example of where this is actually set on so before we do that we're going to group this let's read the icon of ours we're going to call it radio on okay then we're gonna name the other one radio off so zoom in and i'm going to place this right around there let's just make sure to actually send both of them to front bring to front okay so gonna place this right there so it's an example actually this is actually set on then this is actually off for the moment okay duplicate this place it right there in the bigger box okay looking much better then i'm going to give this a white fill actually we're going to give these boxes a white fill okay give that a white fill also okay looking fine looking sharp actually let's give this a white color is actually just be green let's give them a green color okay with the green that shall look all right all right then we're going to draw one big mega box right below and then we're going to give it a border radius of 30. i'm gonna give it a stroke and i'm gonna remove the the text right then i'm gonna type in some text here i'm gonna type in the text font size all right so for this example we're going to start with font size 60 since it's the smallest text size you actually have enlarge this a little bit all right then we just want to put some some hyphens around this side all right at the very beginning and then at the very end i'm gonna give this let's give it that green color right that's that's looking good all right so we're gonna go to the next option so i'm gonna duplicate this frame two times ctrl d ctrl d all right so in the second frame in the second frame we're gonna swap this with the radio on just duplicate this radio on button in the second actually before we do that we're just going to give this a green fill we're going to give it a fill of green as you can see the the the off button is there so we're gonna replace it so i'm gonna place an on button right there so we want to remove that off button we're going to duplicate it so we're going to bring a copy of it and place it right here it's going to replace that one okay so i'm gonna give this so let's change the color of this entire shape we're gonna remove the fill okay then this is gonna be set to green okay actually the text the text actually should stay black it's not white now okay all right so we've made that adjustment then in the second one we're gonna change this font size so remember the font size of the middle text i'm gonna change this to 90. okay that's looking fine i'm gonna go to the last the very last box the last one right here okay so inside here we're gonna we're gonna give this actually we're gonna duplicate this on button then i'm going to give this a green fill okay so i'm not going to need that it's going to make a copy of that drag it right there you're going to replace it so before we do that we just want to make sure we position this rightly okay so there's actually already off right around there we just want to make sure that they're actually positioned right on top of each other so i'm going to position this one button right where the other was then we're gonna get rid of that okay all right we're gonna give this box a white fill okay so we're going to change the text color to black so this actually had the radio on setting but we don't want that we want it to be radio off duplicate that i'm gonna replace it with that so when i get rid of the radio off okay it's actually looking fine then i'm gonna change this font size to this font size we're gonna change this to 120. it's actually really huge it's really huge but don't worry about that it's just it's just going to be fine for testing purposes okay all right so one more thing something almost forgot we're gonna change this to white change that to white right there then i'm gonna change this to white also right it's looking okay so next we're gonna do some smart animation i'm gonna go to our first frame okay so we're going to animate these radio buttons go to prototype mode it's going to say on click actually that can just stay wherever it is so we're gonna animate this one click navigate to frame two just make sure that actually happens as a smart animation okay so unclick this one click navigate to frame 3 smart animate okay that actually looks fine and click this i want that to navigate to frame one okay when this is clicked navigate to frame three smart animation all right so let's just make sure we set a smart animation here all right so everything should actually be set to smart animation all right so lastly when this is clicked on click navigate to frame 2 when that is clicked navigate to frame one just make sure it's it's smart animate i forgot and press that smart animation right that's looking okay all right so that's it so let's test our entire animation just give it a second to load all right so everything has loaded so let's test it we're gonna click on this as you can see it actually switches to the second and i click on this it increases the font size actually increases and goes to that option and uh it's actually working just as we expected so that's how i would create this animation of increasing font size in figma otherwise thank you so much for watching if you like this video feel free to like leave a like and then tell me below in the comments how you felt about it and then if you're new to this channel encourage subscribe and join into the community then please don't forget to hit that notification bell so that you get updates every time i upload a new video thank you so much for watching see you all in my next video bye [Music] you

Channel: Create Beautiful Things

Views: 8

Keywords: Figma change font-size animation | Custom Radio Buttons effect (2021), figma text box, figma text animation, figma text styles, figma fonts, figma font size, font-size change animation, smart animate font-size in figma, figma custom radio buttons, figma radio button, figma radio button prototype, figma radio button smart animate

Id: fpWtC9hiHMg

Length: 14min 22sec (862 seconds)

Published: Thu Dec 16 2021