Figma 3D Image Cube | Isometric Card Design

all right so we're going to name our project we're going to call it 3d that will actually help right then we're going to design some some cards all right just make sure to dress square just as i've done then i'm going to make use of a plugin that i have we're going to create some cards for illustration and i'm going to make use of faces i'm just going to search for different faces faces i can actually make use of there actually very many on this list i'm going to make use of that just by clicking on that it should actually just fill in the box okay then we want to do multiple copies of that so when i duplicate this into three different copies then in the next one we're gonna switch that to another face okay then lastly we're gonna draw another face you just wanna inside another face right that will actually do all right then we're going to make use of our rectangle tool there draw some rectangle right around there and we're going to give this a white color all right then i'm going to type in some text we're going to call this person lisa add then sorry about the spelling all right then we're gonna place that right around there okay just make sure it's actually centered and i'm gonna give this a bold duplicate it i'm going to give this other one irregular so she's the central central executive executive officer right and i'm going to reduce this text to something 30 that is fine okay it's looking good all right then we're going to center that right around right around the bottom let's give this an orange color something red orange it's actually fine just gonna drag it a little bit down i think right there is perfect we're gonna make duplicates of both of these just by holding alt then we're gonna place this onto the other cards duplicate that so i bought that when i duplicate that actually hold alt when doing that okay this is uh david john's son okay just make sure his name is centered he's the chief of staff okay then we also want to center that text right around there then lastly we're going to edit this text also i'm going to call her jennifer parker yeah to walk center that around there then chief web design all right then i'm going to center that right around there so these are three cards they're gonna create okay then lastly we're gonna second last we're gonna draw another box we're gonna right click so there are three different angles down i demonstrate for you we're gonna make use of iconify and i'm to search for youtube youtube okay this is the plugin i love so much we're going to drag that out and also going to search for um facebook right then we're gonna make use of this first one right there okay so we're gonna enlarge this all right then i want to just make sure to drag it outside of the frame just interested in this we don't need the frame it comes with all right same thing here we only interested in the contents we're not interested in the frame delete that right duplicate this then i'm gonna draw a square something longer right that will work all right then i'm going to place the youtube statement right around here in this box same to the facebook one i'm going to introduce it right here okay right then i'm gonna just give this a white color all right so next we're just gonna design this box we're gonna give it a dark blue something that looks like the facebook logo i think that's okay then i'm gonna give this a white color okay then i'm gonna actually that's fine all right so next we're gonna make sure to install a plugin the plugin you're gonna use just go to plugins then go to your browse community plugins then select plugins then just search for iso metric okay so actually i have installed mine already just make sure to install it it's called isometric it's the plugin i'm gonna make use of okay all right so we're going to begin with these images actually created here i'm going to show you three different ways of using it so just make sure to actually group just group this right click on that so the metric actually requires us to group different elements together just make sure to group that all right then you can right click and go to our plugins the plugin is installed it's called isometric oh just make sure you have one of them selected open isometric all right and there we go we can actually now create three different designs and create something that looks like a cube so i'm going to put make that bend like that then i'm going to make sure this bends towards the the right just place them together that's looking good then i'm going to make this so go back to your isometric again just make sure this bends towards the top just like that all right i'm gonna position them all right and then they form something that actually looks like a cube okay that's a simple illustration so i'm going to create something button like for this one then just make sure that the just make sure it has the same height as this so the height is 267 i'm gonna change the height of this to two six seven okay then we're gonna give this a red color okay then i'm going to duplicate this then we're going to create another one another but actually we'll be going towards the top so i'm going to give this um i'm going to give this the same width as this i'm going to give it the same width just give it a width of 1157.1157 okay then we're going to change its height we just want to make sure it's height is the same as actually that value around the top as the width of this which is 131 this one side is going to be 131 also okay that would do all right so just make sure to group these elements right here then go back to your option plugins again isometric open isometric they're going to turn this to face that direction okay that's looking fine i'm gonna change this to that so i'm gonna position it right around there then i'm gonna position this this way all right it's looking good there we go we have a 3d youtube button okay so lastly we want to make sure this actually faces us facebook all right we're going to change this text size to 80 just make sure to type in 80. okay just need to add another o so it is actually not too much let's change that to 150. okay 150 is perfect change the text color to white okay all right then we're gonna duplicate this we just want to make sure to form some icons for the sides okay so i'm gonna give this uh i'm gonna give this okay let's first work on this group this i'm gonna right click go to your plugins again back to isometric open isometric just wanna make sure this actually moves towards the top okay that would do all right so we just have to make sure we remember the the height of the former one okay so gonna rotate this just go to isomet isometric again just to make sure this structure goes towards the right but if we do that let's duplicate this so this will actually be towards the right as you can see and then this will be towards that actually that will does that's the one that's actually going to be towards the right so as you can see even if you make something that actually does not match we can still add just that then just position it until it fits okay that's okay all right just make sure it actually fits and i'm gonna just elongate it a little bit it's looking good then we're just gonna reduce the height of this slightly and there we go that's that's those are different ways you can actually make use of the plugin uh and there is so much fun so much fun 3d icons you can actually create with it this video i encourage you to to like and comment and tell me what you thought about the video and tell me if it really assisted you if you need this community i encourage you join in by subscribing and then don't forget to hit that notification bell so that you get updates every single 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: 25

Keywords: Figma 3D Image Cube | Isometric Card Design, figma 3d shapes, figma 3d design, figma isometric tutorial, figma isometric, figma isometric cube, figma easometric plugin, figma isometric plugin, figma 3d image cube, figma image flip, figma tutorial, ui design, figma 3d design tutorial

Id: 9OylicXtEDY

Length: 11min 52sec (712 seconds)

Published: Thu Dec 16 2021