Hi, I'm Niki, welcome.
If you're new here, please make sure you subscribe.
I create weekly videos about UX UI product design and design career.
In this video I am going to share with you my favourite plugins in figma that will let
you create design mock ups using different devices.
So let's dive in.
So we are going to talk about three plugins.
I'm going to show these to you so if you don't have them added yet, then this is where you
can add them to your figma file or software actually so you just gotta come to the main
menu and hover over plugins.
Scroll down to browse plugins in community and then it opens up and this is how you can
search for plugins for example, that start with Vectary. Vectary 3d.
I already installed it, but you will have an install button here.
So you just got to click that and whenever you go back to your file, it will be here.
So this is our main screen that we would like to create a mock up and place the screen on
the device.
So let's do that.
So I'm going to start vectary 3d elements and it is starting now we have this beautiful
panel here and it's loading.
You can browse through all of these elements.
So you have like a lot of abstracts, mockups, different devices or even a hoodie. you can
add your layout to space, some cute stuff, an emoji as well, which is really cute.
So just play with it and find whatever works for you.
So I'm just going to stay in a mock up section.
This one actually tells you the layout that you can use here.
So let's just give it a go.
So we're going to use this mockup and I am going to click Load frame you can select your
frame and I have done that you can see that it is selected and then I click Load frame.
Woohoo and now this is done and then you can just click export image and it is here it
is beautiful.
And now you can move it around wherever you want.
You can resize it.
Okay, second one.
This is Mockup. Mockup library.
It is a pretty good tool.
However, to really utilize this Mockup plugin you need to have a pro account.
It has so many features so many mockups if you go pro, otherwise, you actually need
to click this thing.
It says free only and then it just filters the free only versions so you should give
it a go and see if it works for you.
It's good enough for me.
I'm going to select this one.
So this is an iPhone 13.
You can change the colour which one would be complementary to my purple.
Oh, maybe this one, add my content first.
You click that you got to select on Canvas.
So you just move this one around.
And again you select the frame and then you say crop and then this is done.
You can see what it looks like and you can also change the device colour here if it doesn't
fit.
You know what actually this one I think is nicer.
So let's just go with red and paste in Canvas.
Whoo.
It's so pretty.
Look at it.
This is so nice.
Oh what did I do?
Okay, so and you can resize it, make sure you hold down the Shift key.
If you compare this to the previous one the colours are truer see the hue is better.
It might be closer to the design that we're using here.
And the last plugin is Mockuuups studio.
I don't know how to pronounce it.
So this is like a really good practice you can see that they always ask you to select
a frame.
So just select the frame.
So I've done that.
Again, it has a premium feature but it always shows which one is free and which one is not
free.
So you just want to have a different scene.
Maybe like somebody's who's walking I think that's really nice export as file and placing
two documents are the options I am going to place into the document and we wait I can
close the panel and that is it.
And again, I think this is actually truer colour again, if you compare that to the first
one and let's just have a look at all of them.
So this one was Vectary and you can see that the colours are a little bit muted when we
place the frame onto your mock up but maybe this works for you.
I think the second one Mockup is really nice.
I really like that how sharp the edges are on the device and I really like how they actually
use the latest devices even you know if you go pro, then you will have even more options
but this is super nice.
And what I really like about this last one is once we place the frame onto the mockup
template, then it really kept the true colours and I like that we can use an image and we
can put our design into context.
You know, maybe you can use that on your marketing website or on your personal portfolio.
Thank you so much for joining me today.
I really hope you enjoyed this video and I'll see you next time. Bye!
And hey, if you are not subscribed, please make sure you subscribe to my channel so you
don't miss next week's episode