How to create mockups in Figma

With the celebration of twenty thousand plugin installations, we are looking back on our journey here. Let's take a trip down the memory lane and see how we created our Figma plugin and how it works today.

How to create mockups in Figma

Why Figma

Figma grew into the design tool of choice for many designers in 2020. Long are the days of using Photoshop to draw shapes and apply layer styles. Figma is a fantastic tool focused on designing user interfaces and provides you with everything you need. Except for the ability to generate beautiful mockups, and that's where we come in!

Mockuuups Studio started as a mockup generator desktop app. We bring you hundreds of unique scenes for presenting your apps and websites and giving you the right to use them for commercial use.

Introducing our Plugin

At the end of 2019, we have launched our mockup plugin for Figma, which brings you the power of Mockuuups Studio right into your favorite design tool. We designed an entirely new interface for it that feels right at home in Figma.

Plugin Interface

Generating a device mockup in Figma is as easy as selecting a Frame with your content and opening our plugin. It takes an instant to see your design in hundreds of different devices, diverse hands, and various environments.

We offer photorealistic scenes of the latest iPhone and Samsung and other devices like laptops or tablets. You can also find high-quality 3D renders of popular devices. You can browse all our mockups in the plugin or in a mockup gallery on our website.

More than twenty thousand Figma designers keep our plugin handy as part of their daily workflow. They can't be wrong! :)

See it in action

Building the plugin

If you are curious about making Figma plugins, there is official plugin documentation that goes into detail. Under the hood, plugins use standard web technologies like HTML, CSS, and JavaScript for making the user interface and functionality.

To match the Figma app interface's look and feel, we have used a UI library Figma Plugin DS by Tom Lowry. It allowed us to prototype our functionality rapidly and keep our focus on even more important things like the speed and ensuring the quality of rendered mockups.

We've developed our plugin UI in React and connected it with the same set of mockups we provide in our desktop app and our rendering technology. We can now offer the best of the full desktop app in a small package of the plugin.

Conclusion

We'd love it if you could try our plugin and give us your honest opinion. You can use it for free without any registration and use one of the free scenes. You can also access absolutely everything with our 7-day free trial.

See the plugin page on the Figma Community website. It takes a single click to install it!

What's Mockuuups Studio?

Super-easy mockup generator with more than 600 high-quality scenes. Available on macOS, Windows and Linux.

START HERE

Create your mockup in a second.

It takes only a one click to create a stunning mockup for your website, presentations or social media.

Place Screenshot

Ready to impress your clients?

7-day free trial. Cancel anytime, no questions asked.

Download Mockuuups Studio

Available on macOS, Windows and Linux.