Mockup Studio / Tools
Live personal toolGive your images and videos a better stage.
A free creative tool for turning images and videos into polished mockup presentations. Designed and built with AI assistance.
Try the live tool (opens in a new tab)02 / Problem
The design is ready. Presenting it shouldn’t be another project.
I wanted a simpler way to present my own work. Paid Figma-plugin restrictions were the starting frustration, but the need went beyond placing a screenshot in a phone: I wanted to compose images and videos, add context and branding, and prepare something ready to share.
I shaped the product, designed the editor and built the tool with AI assistance. The workflow brings media, frames, layout and export into one browser-based workspace.
03 / Key decisions
The choices you can see in the work.
Let the content choose the frame
Offer a single device, two devices or a plain frame for images and videos.
An app screen, a website capture and a motion demo need different kinds of presentation. The same canvas supports each starting point.Keep editing close to the result
Place the composition in the centre and show properties for the selected tool.
Frame, background, text and image controls have a predictable place without covering the work.Carry the composition through to sharing
Give image and video exports their own settings.
Still artwork needs format and scale choices; a moving presentation needs video format and resolution choices.04 / Solution
From a file to a presentation, in one place.
Bring an image or video, choose its setting, then build a composition with text, a logo or a finishing badge.
Select any editor screen for a closer look.
Choose how the work shows up.
Start with one device, pair two screens, or use a plain frame. Both images and videos can be the content of the presentation.
Make the frame fit the work.
Adjust the device and its presentation, then choose the canvas proportions for the place it will be shared.
Set the scene.
Background choices stay beside the live canvas, so the setting can support the work’s colours and mood.
Give the mockup something to say.
Add a headline, bring in an image or logo, and finish with a marketing badge. The akaani example shows the editor becoming a complete product presentation.
Still or moving. Ready to share.
Export a still presentation as PNG, JPG or WebP. For moving work, the video export offers MP4/WebM or animated GIF, with resolution options shown alongside the canvas.
05 / Outcome / reflection
A personal need turned into a working tool.
Mockup Studio is live and free to use. It brings image and video mockups, composition tools and export settings into one workspace for presenting product work, portfolio pieces and promotional visuals.
What I take forward
Building for my own workflow gave me a concrete problem to work through. The useful next step is watching other designers create and export a presentation, especially where they expect the controls to behave differently.
Try the live tool ↗ (opens in a new tab)