What's Figma?
Figma has become the UX/UI design tool of choice for forward-thinking designers to create digital interfaces. According to The Hustle, in June 2021 they raised $200MM in a round that valued the company at $10B.
[Update: Sep 2022] Adobe's recent acquisition of Figma is a huge coup for the software giant, and will no doubt help them to further cement their place as the go-to choice for creative professionals. Figma is a cloud-based vector graphics editor and prototyping tool, which will complement Adobe's existing Creative Cloud suite of tools perfectly. It is also used by many top design firms and has a very loyal following among designers. With this acquisition, Adobe is clearly signalling its intention to be the one-stop-shop for all things design.
Since then, they’ve released their FigmaJam collaboration tool. And plan to become an end-to-end solution from initial designs to finished products. With its rate of growth, vast plugins, and generous free plan — It’s taking the industry by storm. Light years ahead of traditional tools like Photoshop which can cost anywhere from $252/year.
The trouble is… Figma doesn't let you create beautiful device mockups from your designs.
In this post, I’ll walk you through how to access Figma’s plugin library. How to make a mockup on Figma. And how to use Figma mockups.
Let’s jump in.
What are Figma plugins?
If you’re new to Figma, you might be new to plugins. In a moment, I’ll show you how to install them. But you can think of them as adding extra functionality to your design tool by adding other apps inside the program.
For example, Mockuuups Studio is a desktop app to create over 1600 drag and drop mockups in a few clicks.
With the rise of Figma in 2019, we turned it into a Figma mockup plugin to give users access to over 1600+ device mockups inside Figma.
Since then, the Mockuuups Studio plugin has over 135K Figma installs by designers like you. There are tons of Plugins to enhance your workflow. We go into detail about these here.
But to give you an idea of how much functionality the plugin can bring, here’s a round-up from our friend Nattu at LottieFlies (another great plugin):
Side note: If you’re wondering how to build a mockup plugin yourself so you can contribute to this space too, keep reading to the end of the article.
How to create mockups in Figma (4 simple steps)
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:
Best Figma Mockups
I could go on about all the mockup possibilities within the Mockuuups Studio. And talk about how you can impress clients, stand out from competitors, and speed up your workflow.
But instead, let’s show you some of the favorite mockups you can create in as little as 3 minutes with Mockuuups Studio:
Liked what you saw here? Check out this round-up of the best iPhone mockups for Figma designs.
Why use mockups in Figma?
You might think creating mockups in Figma is all well and good. But why would you want to do this in the first place? For starters, creating mockups inside your design tool will save you a ton of time, but it also gets you amazing results.
Presenting your prototypes to team members
During the design process, you’ll be collaborating with your team. Whether that’s getting feedback from stakeholders or collaborating with fellow creatives. Figma mockups let you create mockups for feedback without breaking up your workflow or spending time doing low-impact activities.
Stunning ads and marketing content in a click
With apps and digital products, creating content to attract users it’s hard to generate from plain app screens. Startup founders and marketers like Fabrizio Rinaldi at Mailbrew use Figma mockups to create endless mockups to market app features:
Your startup's pitch deck
If you’re a cash-strapped startup seeking initial investment after some validation. You might not have the capital to yet develop a full-blown app. Mockups create the perfect bridge to show what you plan to create with stunning visuals to investors.
Stunning displays for your portfolio projects
If you’re a designer using Figma, you might be looking for a way to show your projects in beautiful scenes. Figma mockups give you an easy way to export professional views of your designs.
If you want to see how to craft a killer UX portfolio check this post where we dive into detail from industry experts: How to make an attention-grabbing UX portfolio to land your next client.
How to create Figma Plugins yourself
If you’ve read this far, chances are you curious about making Figma Plugins. There is official plugin documentation that goes into detail about getting started.
Under the hood, Figma plugins use simple web technologies like HTML, CSS, and Javascript for making their user interface functional.
For the Mockuuups Studio plugin, to match Figma's look and feel, we used a UI library Figma Plugin DS by Tom Lowry.
Using a UI library, allows you to prototype functionality rapidly and keep our focus on even more important things like the speed and ensuring the quality of rendered mockups.
Our Figma plugin UI is developed in React and is connected to the same set of mockups we provide in our desktop app and our rendering technology.
This lets us bring you the full desktop app experience in a small package of the plugin.
Want to know more about our Figma story?
Mockuuups has been 8 years in the making and looking back, what’s clear in hindsight is that building the Figma plugin functionality has been instrumental to our growth.
Jakob Greenfeld shared a post on Indie Hackers recently called “strapping yourself to the back of a rocket which really resonated with us.
He explains the concept of finding a fast-growing platform like Shopify, Discord, or Figma and building on top of it. Then (hopefully) as a result, you strap yourself to the back of someone else's rocket.
For us, offering a Figma plugin has allowed us to do exactly that! And this concept goes beyond plugins...
You could build on emerging technologies like GPT-3 or offer productized services to solve a "popular platform problem."
If you’re an aspiring designer, maker, or startup founder… ask yourself, what could you strap yourself to? You could make your life a whole lot easier.
You can read even more about our indie app journey here.
What you should do now
Try our Figma mockups plugin for free and join over 135K designers like you using it to impress clients and speed up their workflow.
And if you’re already with us, here are more Figma tips to give you the edge:
