Behind The Framer Plugin: Device Mockups
Device Mockups is a powerful plugin for Framer, offering an expansive library of customisable mockups for popular devices.
Hi! I’m Omar Farook, one of the creators of the Device Mockups plugin for Framer. I’m excited to share the journey behind this plugin and how it’s designed to simplify and elevate your design workflow.
What Does the Device Mockups Plugin Do?
Device Mockups is a powerful plugin for Framer, offering an expansive library of customisable mockups for popular devices. Whether it’s a smartphone, tablet, laptop, or wearable, our plugin gives you beautifully rendered components that support both static images and videos.
But it’s more than just a collection of mockups. Each component is built natively with Framer’s framework, meaning no complex code overrides—just smooth, seamless design. To take things further, we’ve crafted full mockup scenes with dynamic animations and studio-style backdrops to give your projects a professional edge.
This plugin is ideal for designers, developers, and creators who want to build stunning, interactive visuals without the hassle of traditional workflows.
A Little About Us
I’m a motion designer turned tech founder who loves creating tools that make design more accessible and enjoyable. My journey includes co-founding Glorify, a graphic design tool for marketers, and Blitzit, a productivity app designed for busy professionals. More recently, my team and I have been diving into the Framer ecosystem, creating templates and plugins that reflect our passion for design and belief in Framer’s future.
My co-creator, Chris Nutbeen, is a designer, developer, and founder of Nuttifox, a product studio helping businesses leverage world-class design and technology. Chris brings a wealth of experience in visual design, strategy, and craftsmanship to everything he works on, and together we’ve built something we’re really proud of.
The Inspiration Behind Device Mockups
The idea for Device Mockups came out of necessity. At Glorify, we’ve spent years working with editable device mockups for graphic design. When building our own websites in Framer, we noticed the process of adding device screens was clunky. We’d design mockups externally, export them as static images, and upload them into Framer.
The workflow got even more tedious when we wanted video previews, which required exporting animations from After Effects. It was clear there had to be a better way.
That’s when the lightbulb moment struck: Why not build these mockups directly in Framer, where they could be dynamic, editable, and fully integrated with the platform?
We started experimenting with prototypes, embedding variables for easy customisation, and animating components for a polished look. The result? A plugin that lets you create device mockups natively in Framer without breaking a sweat.
Why We Decided to Build the Plugin
After building a working prototype, we saw its potential to solve a real pain point for Framer designers. We approached the Framer team with the idea of turning it into a full plugin, and their enthusiasm matched ours.
We got to work expanding the library, perfecting the designs, and incorporating features like image and video embedding. We even added fully animated scenes with customisable backdrops to help creators bring their ideas to life in a more dynamic way.
Device Mockups isn’t just a tool, it’s a way to streamline your process and focus on what you do best: creating incredible designs.
Overcoming Challenges
While building the plugin, one of the biggest hurdles was ensuring the mockups stayed proportional as users resized them. We wanted the components to be as flexible as possible without compromising their design integrity.
To solve this, we developed responsive scaling rules and even added a control slider for the Perspective transform property. These small details ensure the plugin is intuitive and frustration-free, even for beginners.
What’s Next?
We’re just getting started. Device Mockups has already transformed how we build designs in Framer, and we’re excited to keep improving it. Our mission is to make your workflow faster, more flexible, and more enjoyable.
We can’t wait to see what you create with it!
Read more stories from other creators behind Framer plugins!