Skip to content
3D Phone Mockup Preview

3D Phone Mockup Preview

by 晓君

Turn selected frames into a layered 3D phone mockup with realistic lighting and gradients.

FreeFigma

Installs

68

Likes

5

Users

2,276

Views

114

Preview

3D Phone Mockup Preview preview

About this plugin

Feel free to leave a comment — feedback is always welcome.-------------What's new• Refresh button — re-read the frames you already loaded with one click. Keeps your transparent-card checkboxes, offsets and scale.• Y offset — move each block vertically (−200 to 200 px).• Per-block scale — resize a single block (0.3× to 2×).--------------Added English language support.

Now available in English. you can switch between English and Simplified Chinese anytime from the bottom of the left panel.---------------Preview your designs on a realistic 3D phone frame — right inside Figma.

Select one or more frames on your canvas, click "Read Selected Frames", and this plugin stacks them into a live 3D phone mockup you can rotate, tilt, and depth-adjust in real time. Any frame named "HP" is automatically used as the wallpaper on the phone's home screen.

Features• Live 3D preview — rotate, scale, adjust perspective• Multi-frame stacking with independent Z-depth and X-offset per block• Transparent card mode — glassmorphism cards masked by the artwork's alpha• Gradient editor for background, screen glow, and phone frame body• Real-time HDR environment lighting (color / monochrome / hue shift)• 5 built-in material presets (glossy, silver metal, matte, colorful platinum, dark metal)• Save / load full configuration as JSON (frames + images + settings)• Minimize window while working elsewhereRecommended workflow: put your app screens on separate Figma frames, add one frame named "HP" as the wallpaper, select them all, hit "Read Selected Frames", then explore.

No account or network setup required — everything runs locally in the plugin.

More device mockups plugins

View all