3D Mock-up Objects | Simple Figma Plugins for Beginners

[Music] what is going on guys happy friday hope everybody's having a great week i just wanted to stop by today and do a quick video on something a little bit different than the funnel side but it has a direct correlation with those of you who are building funnels i spent a lot of my time in ux ui software which is like adobe xd or figma or sketch it doesn't really matter which one you use but in order to do certain things that you need to add to your websites or your funnels i really highly recommend using one of these softwares i've been using adobe xd for the last year and i've gotten really good at it and i've just found there's certain limitations and i've found that those limitations are not present in some of the other ones like figma and figma specifically has a bunch of features that adobe xd does not have this video specifically i'm going to cover some of the plug-ins that i use that are just amazing in figma this is just like barely scratching the surface as to what's available out there and how much time you can save using these plug-ins i'm not going to give you a rundown of exactly how to use the software there's tons of videos on youtube on how to properly set up an account and use the software it is free to use the only time it costs is if you upgrade and you want to do certain things but you can use it for free so i would suggest getting one of these softwares now and i would suggest if you're debating on which one to use if you've never learned a system go with figma okay so figma is a very basic platform it has a canvas that is pretty much infinite you can scroll all the way in or all the way out and it's set up via artboard so anytime i want to make a different area of my page i would just set up a new artboard by clicking this up here it's a frame sign i just click the frame and then i choose how my size of my frame i'm going to walk you through some of the things you can do with these artboards and so i have a couple basic ones already built so the way to access your plug-ins is go to the hamburger menu and then scroll down to plugins and then if you go to manage plugins you'll be taken to this screen where you can click community and here you can click plugins and there is a giant list of awesomeness in here and so you can have as much fun as you want download test them out most of them are completely free so there's really no risk to do it once you like it click install it adds it directly into your system all right so i'm going to walk you through a couple of these here the first one we're going to talk about is called better font picker so actually before i load that inside of figma let's say you are doing like a website mockup or whatever it is and you need to add some text so when i add my text this is some text i can see it on here and i can change my size over here so i want to change this to 80. i can do that but if i want to change the actual font and i go up into the font list all these look the same to me i have no idea what they are unless i know specifically what that font is so what you can do is you go over to plugins and you go to better font picker and now when you scroll through you can see all the fonts like they would appear in google or whatever else you're using so now when i want one of these fonts i just click it exit out and now i have the font that i could see so that's better font picker it's super simple but man it saves a lot of headache okay next one we are going to go to is flat icons if you've done any type of design or website or funnel design work you know that you use icons a lot so flat icons is the place to go online and this will just save you the trouble of having to actually go to the site and download it so if i need a icon let's say i'm looking for a money icon i find the one that i want here's a money bag i click it it adds it to my time frame or my canvas here and now i can do whatever i want with this these are vector based so if i just zoom in on it and i click it i can change the color to whatever i want all right and then i can just pull that into one of my artboards and we are off and running okay so that's flat icon super super simple but super very time saving all right next one we're going to talk about is kind of the same deal but it's unsplash so if you've ever used any stock photos you're probably either using pixels or unsplash so this is just a way to use that without having to go to the site so i come into unsplash i can click portrait and it's going to load everything that it has for portrait or i actually you know what i think when you click the button it actually just gives you a random one so if i want to actually find one myself i would go in here and i would go up to search so let's say i want to search for a woman and now i can actually choose which one i want so as soon as i find the one i want i just hit that and it's going to insert it on whatever artboard you have selected if you don't have any selected it'll just put it on your canvas so you can do whichever one you want with it okay so that is unsplash next one we are going to talk about we can go to make blob make blob if you've done any design work in the last couple years blobs are pretty popular right now and so make blob is just just that it makes blobs it starts with a circle the more complex you get the more complex your blob gets and then if you do contrast that's going to give you edges so whatever kind of blob you're looking for you just kind of do that and then you add it to your canvas and once again these are vectors so if i just if i scale this i want to make it as big as i can for now i'll zoom in on it and i can take the color of this and i can change it to whatever i want okay and then if i want to i can take my other images so if i just bring this to the front here so bring to front and then i drag it over and now i can layer my images on top of each other like that okay so that is make blob all right next one we have uh we're gonna save the best one for last uh let's go to let's do clay mock-ups so clay mock-ups if you are going to be making mock-ups like iphones specifically iphones for this one there are other um there are other plugins where you can do computers or t-shirts or whatever but this is specifically for phones and it works really smoothly so i like this one really a lot so what this is is you open up clay mockups and you can turn this however you want and you can change your device color if you go here since this is a vector actually you have to have the paid version to change your device color so this one will just always stay in white if you do pay for this then you can change a lot of these settings but i can rotate it like i said it does have the branding so be careful where you're putting it once i have it where i'd like it in terms of rotation i'm just going to select my frame that i already have that's 375 by 812 and it's going to put it directly in there so if i select my other frame which is my figma frame we're going to use on the last one it's actually going to put it in there too but that's not the proper size so it's going to take a little bit longer to size it for me so it still looks pretty good but the iphone frame is the one that we would want since it's the right size then i would click save as image and once i save it as an image it's going to appear on my artboard i think i might have exited out too quickly there but basically if i would have done that so let's do that one more time clay mock-ups once i get it here let's go to iphone frame and then let's rotate it and save it as an image and once we have the image saved then it's going to show up on our canvas and we can use it wherever we want so there we go just takes a second for it to render and now i just take this and i resize it oops not flip it i'm going to resize it and then i can use this however i want on my canvas alright if i want to put it in here i can do that or whatever i want i can place it all right so that is claymockup and the last one we're going to talk about is the grand poobah of them all and it is called vectory3d so essentially vectory3d does the same thing that the clay mock-ups does it just does it in a 3d format and you can use other types of mock-ups so you're saying well why would you ever use the other one if you can use this one well the other one is really nice because it just got like a clay feel to it and it doesn't necessarily have like a super 3d feel so when you use the phone in this one it's going to make it full on 3d it just takes a little longer to load the file size a little bit bigger so i just like to shortcut the some of that stuff sometimes but you can use this software to replace the other one if you don't like the other one so for this let's do a really cool demonstration here i'm going to use a soda can and what they say is it tells you exactly what size of frame you need to put on this soda can so i built this frame in the background the black one with the figma logo to this 2220 by 1200 size and all i have to do now is i just have to click on that frame so my vectory text texture frame and then i put use frame and it's going to take that entire frame and it's going to wrap it around this can and then i can spin this and i can make it wherever i want so if i want to like tilt it down and have kind of a cool look like this with the cap up there you can see it's got good reflection and then i save it as an image and it's going to do the same thing that our other one did and it's going to put it up there you can see that i actually rotated it too far so the top is cut off so let's try that one more time again so let's go into vector 3d let's get our can let's do that same process one more time just so you can see the finale here so once i got this here i'm going to use the frame and now it looks good let's just turn it just a little bit save it as an image and now you can see how much better that looks you can see the whole top now because i didn't screw it up and when you zoom in it is really high quality all right and you can use that on any of your artboards and it will look really super 3d it would probably even look better if you used a light background because it has a shadow so if i use like a white background you can see that the shadow from the the can is casted on the white background now okay all right guys so that's just a few of them i could literally spend an hour going through these they're so fun to play with these will save you a ton of time when you're building for yourself or for your clients so i really suggest learning one of these softwares and and really just diving in and seeing what you can do i literally just started with figma about two weeks ago and i feel like i have it down almost as much as i did as adobe xd so if you learn one you can kind of see which one you like the best and feel it out and then decide for yourself but once again i've used the xd i'm pretty proficient in it and now i would definitely want to switch to figma if i only could choose one so all right guys i hope that was informative and valuable if you have any questions on anything feel free to drop a comment and let me know and i will always get back to you personally i really appreciate all the support and i will try to keep making stuff that you guys enjoy and find valuable all right thanks a lot you

Channel: Scott Wissing

Views: 12,011

Keywords: figma, xd, ui, ux, tutorial, beginner, funnels, landingpage, clickfunnels, 3d, mockups, 3dobjects

Id: Q-zKKixF9ZE

Length: 11min 30sec (690 seconds)

Published: Fri Oct 16 2020