How to Create Mockups using Figma Plugins

welcome back everyone so today's video i'm going to show you some cool figma plugins that you can use to create amazing mockups right on figma so the starting plugins are going to be very straightforward and easy to use and the ones towards the end are going to have some advanced features or you can create some advanced mockups so before i get started i've got three screens here from a ui kit that i've picked up from the figma community so we are going to use this for the demo purpose so starting off with the first one which is artboard studio mockups i've already installed it so i have it right away in my plugin so as you can see this is artboard studio mockups don't worry i'll be giving all these plug-in links in the description below you can just go ahead and install it and as you can see if you purchase their premium version you get these uh logged items unlocked but in the free version itself you have a lot of amazing devices here so if you want to filter it just go to all items and click on free items and as you can see these are some great mock-up devices so this one looks good so i just have to click on this and that will add up on the canvas as you can see here so every device you click it comes with a frame and then the device itself so this is the frame where you have to add your design here is my design i'll just create a duplicate of it and bring it inside this so don't worry if it doesn't fit exactly on this frame you just align it to the top and use the scale function which is k and just resize it so that it fits exactly in the frame now that it fits on the frame uh properly all you have to do is just click on the frame once again and click the option here which says render selected frame and that's it boom there you go you have that on the device right here and you can use this anywhere that you like so let me just show you one of the examples for which i will choose another one which is this one and there you go we have a amazing design of the mock-up already done so as you can see this is how it's gonna look and you have the shadows and all that stuff and you have a lot of variety of options to try so that is the first one so moving on to the next one which is called as clay mock-up 3d so just click on plugins option and here i have it so a window like this is going to open up so all you got to do is click on the frame or the design that you want to load here so this one is the one that i want and it just directly loads up and you can you know just rotate it in 3d space and whichever angle that you want so if you want it lying on the ground you can place it like this and you also have some great presets so you just click on the preset and you can just apply that and if you want to get some precise angle you can also go for this camera rotation and all the xyz access and also you have the option to change the device color so if you're working on a dark theme or something you can go for a dark theme and all you got to do is just click on save as image and there you go you have the high quality right on the canvas so that was how to use the clay mock-up 3d and now moving on to the next one which is vector 3d so just right click go to plugins and there we go so this one has a lot of 3d mock-ups so as you can see there are different types here not just devices let's see how this one works all you got to do is just click on the design that you want and say load frame and it gets loaded on the device and same like the previous example we saw you can just rotate this in 3d space the best part about this is it has you know the shadows also coming in and you have the lighting so if you can see the light source is also being rendered and if you don't want the shadow you can just turn it off and once you feel it's good just click on export image that will process and there you go you have the device mock-up ready and not just devices you have a lot of 3d objects to try here so this is a bonus tip in this video so if i want this hoodie right here and just click on any frame and just load it so if you want the exact dimensions you can get the layout here so that will give you the exact layout that the template requires so there you go this looks really cool so you have a hoodie with your app design on it so those were the three uh simple plugins that you could use to create this stuff and moving on a bit more advanced stuff that is you know creating your own angles and all that stuff for which you can explore your own mock-up templates and not stick to the ones that they're providing so you can go to the figma community tab and search for something like you know mockups and you will find a lot of options here so i search for mockups and as you can see i have a lot of devices that you can use let's try something here so this one looks good i like the design here so this is an iphone 12 mock-up so you all you got to do is just duplicate it and you'll have a duplicate version of the file here so as you can see this is the file and i like the blue device here so i'll just click this copy this onto the file that we created and now all you got to do is you know just select the image frame inside and just right click go to plugins and we have a plugin called as mockup so just click on that and you will have a window which basically shows all the frames in your canvas so you just have to select the design that you want to apply on this device so in my case i would like to apply this screen right here so all i have to do is just click on that and say apply but as you can see it's rotated but don't worry about that you have an option here to rotate the image so just click on that it's still rotated and i think once more there you go and here you have your design applied on the mock-up and you can just go ahead and use this just close this and you can use this wherever you want so that is a way to use it and not just the mockups that you find on figma community you can just search for any mockup that you like so let's say i search for mobile mockup and i go into the images so you have a lot of free options that you find for example this one is really looking good and they have a free version so it's actually free to use so you can go ahead and download it and copy it right away so what you can do is just put it and you just have to draw a frame around this so for example i'll just use the pen tool right here and i'm just doing this very quickly and now what you got to do is just right click go to the plugin and go to mock-up the same thing and here we're going to apply this one right there and say apply and there you go we have it right there and you have those rounded frame rounded corners that you can just apply with this and i'll just remove the stroke and there you go with just a couple of clicks you have this mock-up placed on a different device here and also you have a similar plug-in which is called as angle mock-up so this is also a cool plug-in that you can try out it just works the same way you just have to draw a frame and you get an option to choose which frame that you want to apply and just say apply and it gets applied on whichever angle that you created your frame so that's it for this video guys i hope you found it informative and helpful thanks for watching you

Channel: Design Xstream

Views: 36,749

Rating: 4.9651089 out of 5

Keywords: How to Create Mockups using Figma Plugins, creating mockups in figma easy method, create mockups in figma using plugins, best figma plugins for mockups, easy figma plugins for mockups, create wasy mockups in figma, figma easy plugins for device mockups, create mockups on device in figma, figma top plugins for mockups, easy to use figma mockup plugins, figma mockup plugin, figma mockup tutorial, figma mockups free, easy mockup plugin figma, best mockup plugin in figma

Id: XVbw79i3poc

Length: 6min 8sec (368 seconds)

Published: Mon May 10 2021

Reddit Comments

[u/deysanjay74]

Nice resource. Thanks!