Figma Stack Card Effect | Isometric Design cards

hi everyone and welcome to today's video today i'll be showing you how to create to create beautiful profile cards just the way you see these on the on the screen and then something happens when you click on each one of them you actually see they actually switch to a beautiful isometric design when you click back on that isometric design doctor just goes back to the card i'll show you how to do this using figma alright let's get into today's video [Music] all right so welcome to today's video so this is what you're gonna do we're gonna first name our project we're gonna call it isometric design right so that's that workshop work so this that's that's the main concept of this entire thing so when i create a frame right i'm going to give my frame a yellow color actually i would think everything will look very nice in in a yellow kind of environment so don't worry about it just make sure it's something orange yellow okay that would do all right then we're gonna create our first card all right so this is gonna act as our first card right here we're gonna give it a white color okay then we're gonna design it a little bit so we're gonna write some draw some ellipse right around there all right then we're gonna write in some text it's gonna be like the first profile i'm going to call the person john doewey okay we can increase that front font to 30. okay it's looking okay and then we can change it to my favorite font for pins gonna give it a bold bold kind of feel right and i'm gonna we're gonna change the color of this i'm gonna give it some orange color some red orange color just like that right so i'm going to call this the this is the um accounts manager all right then we're going to reduce this to size 20 okay that looks fine change that to medium place it right below that text okay i think that position looks fine okay sure we can okay that's fine all right so next we're gonna add some links to their social media but before we do that let's just add some some duplicate text some more text around there sex text of files front 15. when i use my favorite plugin one of my favorite plugins lorem ipsum to generate for some random text all right so it's actually opening so just going to auto generate that's fine change that to regular then we're going to center that it's going to appear right around there okay everything looks looking fine now next we're gonna add some icons i'm gonna make use of a plugin called iconify okay this is not going to be for their social media so facebook all right so this is this is gonna be for their facebook account then we wanna wanna make sure there's one for the instagram okay this would do that actually looks too big it's okay we can reduce its size all right then one more just make sure they have their tweeter okay that looks fine that's perfect i'm gonna reduce the size all right so just to make sure everything actually just fits perfectly within just reduce that so that's actually 31 by 31. it's gonna make sure it's actually the same for all 31 31 all right so they actually just have the same size literally 31 on the width 31 and the height all right then you want to center these just going to make sure they're positioned right around the middle okay this actually looks quite smaller instagram icon yeah i think that size is fine right around there let's make sure this is set to the center okay let's just make sure it's set to the center of this no i just this alone set to the center all right right around the side okay that's looking fine oh so we actually have that within the frame we can get rid of the frame we don't need that okay let's actually okay then we're going to add an image i'm going to make use of a plugin i have called and splash just give it a second to load right so our plugin has loaded we're just gonna search for faces let's click on type one face all right so a lot of random faces coming up uh john doe so this can be our ceo right here right just click on it and it will just load right there right actually that's our accounts manager sorry about that then we can duplicate this actually just make sure to actually just make sure to just group it all right that's it for our first card we're gonna duplicate this let's uh let's actually group these all right just make sure that within the frame then i'm gonna duplicate this twice do that by clicking ctrl d okay that's looking fine all right then we're gonna enlarge our frame a little bit sorry about that just don't make sure that everything actually just fits within all right that's okay they actually fit within then i just want to change some details in the second and the third all right then we can change this text here to mary angeline i don't know if that's the name makeup sock was actually on just wanted to remove that i'm gonna change this to mary adam let's make sure it's actually centered some mirror add-in connectors are main square chief of staff you wanna center this also then we're gonna change this text also uh change that from john doey to uh lisa carr man i don't know what that the meaning of that but actually it's actually looking fine then she's the chief secretary okay so i'm gonna center that so actually those are three different cards so next we just want to change the images of the three i'm gonna change this image let's just go back to our plugin and splash okay then we're gonna search for faces again so this is mary can make use of that all right then we can also change this go back to your plugins our plugin and splash faces right you can make use of that image right there all right looking good okay our frame is actually looking good so something we're gonna do next so next we're going to duplicate our mainframe just click ctrl d as you can see it has already actually duplicated and then in our second frame we're going to get rid of everything except the accept the the rectangle so in our second framework you're going to ungroup everything just select on each icon and ungroup select on that let's just select on that and ungroup just want to make sure it will remain with only the box okay so now that we've actually ungrouped we can get rid of of that text we don't need any icon so we're gonna do that for each and everyone we're gonna leave everything blank okay i do that by just clicking delete delete delete delete delete all right so next there is a plugin on and make sure you've installed it's a plugin i use very much it's a plugin called isometric so if you've if you've not uninstalled it so you can just go to your plugins uh browse plugins community then go to plugins and just type in iso so just click enter you actually just see it it's actually a plugin i use for doing all this so it's called isometric just make sure to do that to install it if you haven't so we uh we're gonna make some changes so we're gonna right click so what you do is when you go to your first with to your first original you actually realize that the rectangles that we designed originally have the have the same name but we would just want to change that all right so we're going to change the names of the initial rectangle so this one was rectangle one then this will actually be called rectangle two okay then this when i change that to rectangular name to rectangle three okay so that's something we're going to have to maintain so the names max actually looks similar so this will act as our rectangle two and this will act as our rectangle three okay so we're going to make use of the plugin so just go to your plugin then just open isometric just make sure the plugin is actually open all right so we've actually opened it right there then we're gonna select this side so just wanna make sure everything faces the right like that this can also then just want to make sure that face is the right okay then one more time so actually structure closed then we'll just make sure this actual surface is the right okay so this is gonna be our this is gonna be the arrangement okay it's just gonna make sure they actually stacked on top of each other okay but now to differentiate them we'll have to actually change the colors slightly make sure this is actually set to some lighter color and this is also set to some lighter color like that just make sure there is actually a difference in between each one of them that you can actually see the difference so for proper arrangement we're just gonna place that right there right this is what we're gonna do we're gonna give this a white color also but then we're going to reduce the opacity i'm going to reduce the opacity to 90. so let's reduce that to 70. okay it actually looks better i'm also going to give this a white then i'm going to reduce its opacity to 50. okay that's actually looking much better right that's looking fine then we're gonna go to our first frame then i'm gonna go to prototyping mode and i'm gonna add an interaction make sure the entire frame is selected so when i say on click navigate to frame two just make sure it's set to submit animate 300 milliseconds that's fine then when i also make sure that when the second frame is also clicked also navigate to frame one make sure it's also set to smart animate 300 milliseconds that's fine all right so lastly before we actually go to ultimate animate we're gonna now finally we're gonna ungroup this again just right click on that then we're gonna ungroup right click on that then we're gonna ungroup right click on that then make sure to also ungroup okay that's so that it will actually appear smoothly so we grouped that first just to make sure the contents are actually organized in order and that nothing mixed up with the rest so we're gonna click play right now then we're gonna try it again so as you can see it actually happens smoothly and that's actually what we wanted to create so that's actually that's actually how i'll do that symmetric design in figma in a few simple steps so this is actually called animation so thank you so much for watching if you like this video feel free to tell me below in the comments and then if you learned something new just let me know just feel free to leave a like and then if you're new to this channel i encourage join in by subscribing then 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: 35

Keywords: Figma Stack Card Effect | Isometric Design cards, figma isometric tutorial, figma isometric, figma isometric mockup, isometric figma, figma easometric plugin, figma isometric plugin, figma stack card effect, figma stack card design, figma flip object, figma flip card, figma smart animate, figma snimation

Id: ht1rd-6YB5U

Length: 17min 6sec (1026 seconds)

Published: Thu Dec 16 2021