MockupKit

About this plugin

MockupKit places your designs onto code-drawn device mockups, right inside the file. No external renders, no PNG round-trips, no waiting. Pick a device, drop in your screens, click Generate. The output is a real Figma frame you can edit, recolour, or duplicate.How it works:1. Pick a device from the sidebar (Phone, Tablet, Laptop, Desktop, or Browser)2. Drop an image into each slot, or select frames in Figma and they fill the slots automatically3. Click Place in Figma. The mockup lands beside your existing content as editable layersWhat you get:• 5 code-drawn devices: iPhone-style Phone, iPad-style Tablet, MacBook-style Laptop, iMac-style Desktop, and a Safari-style Browser• Portrait or landscape for Phone and Tablet• Quantity stepper from 1 to 5 devices per generate• Bezel colour: black, silver, or gold• Fit or fill mode for screen content• Optional drop shadow• Output is a Figma frame with Background and Screen Content as separate layers, so nothing is locked or flattenedWhy MockupKit:• Code-drawn, not raster. Every device is built from Figma primitives, so it stays crisp at any zoom and scales with your design system.• Figma-native output. The mockup lands as a frame on your canvas the moment you click Generate, ready to move, resize, or use Figma's Export panel however you need.• Multi-screen in one click. Place 1 to 5 devices side by side without dragging anything into place.• Honest scope. Five devices, three colours, two orientations. That is the whole product.