If you’re here, chances are you’re after free device mockups for Figma. There are a couple of ways to do this:
You can either duplicate and use a free Figma template from the community page
Or use a Figma mockup plugin to generate thousands of mockups without leaving a Figma.
In this post, I’ll walk you through a curated list of the best Figma community-made mockups so you don’t have to waste time trawling through the sea of templates.
Stick around to the end where I show you how to get 1900+ drag and drop mockups with the Mockuuups Studio.
Let’s jump in.
- Best smartphone Figma device mockups
- Best laptop Figma device mockups
- Best tablet Figma device mockups
- Best TV, desktop and smartwatch Figma device mockups
- How to create mockups in Figma?
The best free smartphone Figma device mockups
1. Clay Phone Mockups
Up first, we’ve got clay Figma mockups made with minimalism in mind to keep your designs in focus. If you’re looking for a quick template to duplicate into your project this free template from Sergey on the community page is a great one to run with.
For more clay devices and different angles, you should check out this collection of 1200+ clay mockups available through the Figma mockup plugin.
2. Mono Devices 1.0
Next, we have this monochrome template. When I look at this I think of a futuristic web 3.0 or crypto mockup. With its monochromic dark feel and minimalist design, it could be worth a bookmark for your next project. Like all the templates in this collection. It has a ton of duplicates. So it’s hassle-free to add your screenshots.
3. Google Pixel 4 Mockup
With the launch of the Pixel 6, this mockup is a little outdated, but this template is super popular with the Figma community. And I can see why, it gives a nice photorealistic view of the device, with detailed instructions, often missing from other templates.
4. Flat iPhone Mockup
iPhone mockups are an essential part of any Figma designer's toolbox—Especially if you’re designing for iOS. This collection contains a collection of flat iPhone mockups containing all the latest devices in a ton of colors to give you everything you need for your next project.
5. Samsung Galaxy Wireframe Mockup
The Samsung Galaxy is a flagship Android device and this mockup gives you a minimal mock-up perfect for any use case. If you’re wanting more Samsung mockups you should check out this collection of over 13,000 phone mockups available in Figma via the Mockuuups plugin.
6. MIUI 12.5 Mockup
If you want to showcase your designs outside of the US. You might want to create a mock-up on android devices like the MIUI 12.5. This MIUI mockup gives you a sleek Figma mockup template ready to paste into your frames.
7. Multi Color Mockup iPhone 11
If you fancy a pop of color, you might like this collection of four iPhone 11 mockups. They’re perfect for standing out on social or for colorful landing pages.
8. Google Pixel 6 Mockups
If you’re after Pixel 6 mockups. You’ll love our collection of 136+ Google Pixel mockups ranging from transparent backgrounds to clay mockups and realistic scenes. To get them, add the plugin to Figma and add your frames to the entire collection in one click.
9. iPhone 13 Mockups for Figma
If you’re wanting to create iPhone 13 mockups to fit your brand. You might struggle to find exactly what you’re looking for trawling through community templates.
With the Mockuuups Figma plugin, you can create choose from over 1900+ realistic scenes or customize mockup backgrounds, devices, and colors in a couple of clicks. Check out the full Figma iPhone 13 collection here.
10. Hand holding mockups
When writing this post, I noticed there weren’t a ton of hand-holding mockups from the Figma community.
Thankfully, you’ll enjoy our collection of realistic scenes ranging from parks to uber rides and travel to find an endless supply of content to suit your brand. To get these mockups inside Figma, grab the free Figma mockup plugin.
11. Angle Mockups for Figma
Lots of the Figma mockup templates are limited to one or two angles. If you’re looking to capture your designs from multiple angles you’ll love our collection of Figma angle mockups available through the Figma mockup plugin.
The best free laptop Figma device mockups
1. MacBook Pro & Air Device mockups
This Macbook Figma mockup template pack is one of the most popular on the Figma community page and for good reason. With simple vector files for both Macbook Air and Pro models — It’s perfect for a no-fuss, flexible way to present your Figma frames.
2. Minimal Clay Macbook Pro & Air Mockups
This clay Macbook mockup template is by the same author as the template above. It gives you a couple of clay mockups in black and white to give you a no-fuss showcase – perfect for your app or product landing page.
3. Photorealistic and Lifestyle Macbook Mockups for Figma
While the Figma community MacBook template files I’ve shared above are great, they can only take you so far. If you’re wanting access to 270+ Macbook mockups with scenes ranging from up-close interactions, to transparent devices, and realistic scenes — Check out this collection available through the Mockuuups plugin.
4. Microsoft Surface Mockups for Figma
I don’t know about you, but the Microsoft surface looks super sleek. This free mockup template from the community page may be all you need for a quick and simple showcase on a windows device.
5. Dell XPS Mockups
The Dell XPS is another windows device that challenges the Macbook Pro. If you’re wanting to get scenes shot in a coffee shop or working from home you’ll love this Dell XPS mockup collection available through the Figma plugin.
The best free tablet Figma device mockups
1. Samsung Galaxy Tab A Mockup
This Samsung Galaxy tab A template is great for showcasing your designs on a tablet. Easily create a mockup in a couple of clicks with this free template. It's simple, neat and, relatable.
2. Lifestyle iPad Air Mockups for Figma
We recently wrote about how tablets are becoming a viable option for remote work.
In response, we created over 150+ tablet mockups of people using the iPad and Microsoft Surface tablets out and about. If you’d like to see the full Figma collection you can see them here.
Microsoft Surface Book 3 Mockup
This free Figma template lets you create a 100% Vector mockup of Microsoft Surface Book 3 for your Illustrations and Product Designs. But bear in mind it's limited to one temple.
4. iPad Pro Mockups for Figma
The iPad Pro bridged the gap for many creatives to give you iPad flexibility, yet still a workable device. Take a look through this collection of mockups available through the Figma plugin to showcase someone loving your product or app.
The best free TV, desktop and smartwatch Figma mockups
1. Free TV Mockup
TV mockups are rare, but that doesn’t mean they aren’t important. You might need to showcase how your design would look on the big screen, and that’s where this template comes in. With this resource, you get one free TV mockup that lets you showcase your smart TVs' app designs.
2. Apple Watch mockups for Figma
You may have developed a smartwatch app or written a piece on wearable technology. You’’ enjoy this collection of Apple watch mockups of people wearing a smartwatch in their daily life. You can get these mockups via the Figma mockup plugin.
3. TV Mockups for Smart Apps and Live Events
If you're looking to go further with TV mockups. This collection will let you get creative with youtube thumbnails, streaming, or live event mockups.
Click here to check out the TV mockup collection.
How to make mockups in Figma the easy way (4 simple steps)
Now you've seen the type of mockups you can create in Figma. Let's show you how to make them.
1. Install the Figma mockup plugin
To create mockups in Figma, I’ll assume you’ve already got Figma installed, but if not you can go ahead and sign up for the generous free plan here.
Then, from inside Figma, click Plugins from the left menu, click browse all plugins, search for Mockuuups Studio in the search bar, and click install to get the Figma mockup plugin.
Or, you can install it from the Figma community page here.
2. Select your Figma frame
In Figma, we call designs “frames.” These are what you can inject into over 1600 mockups.
Inside your project, select a frame and open the Mockuuups Studio plugin from the plugin menu. A new window will pop up with your select frame formatted to the entire mockup collection.
3. Choose a Figma mockup
From the Mockuuups window, you can preview your frame in all mockups at once.
Up top, navigate through device types running from phones, tablets, smartwatches, and computers. Then, filter by hand type, orientation, and transparency.
With the vast mockup library from up-close standalone devices to lifestyle scenes... you’ll finally be able to bring your designs to life and see the back of clunky templates.
4. Export your Figma mockup
Once you’ve selected a mockup you can either export your scene or paste it back into your Figma file to customize.
Click on a mockup to enlarge it, click Export from the top right and choose from either Export as file or Place into document.
Yay. You successfully created a mockup inside Figma. Now let’s dive into how you can edit a mockup in Figma.
How to edit mockup in Figma?
Sometimes, you might want more than a mockup template, and create your own mockup from scratch.
Thankfully, Mockuuups Studio lets you customize device colors, hands, backgrounds, and effects to create custom mockups from over 788+ million combinations in seconds.
All you need to do is open up the Mockuuups Studio plugin and click “Open Studio” from the top left of the mockups grid.
Here you can choose from dozens of smartphone, tablet, and computer mockups. Customize colors, hand interactions, effects, backgrounds, and more to make any mockup imaginable.
Here’s a quick Figma mockup tutorial we put together to run you through it:
