Quick answer
Export a clean Figma frame as an image when one state tells the story, or record the prototype when interaction matters. Import that media into the matching device, review the crop, and animate the presentation without rebuilding the interface inside the mockup editor.
When this workflow is useful
This workflow helps product designers present prototypes before engineering is complete, build portfolio case studies, collect stakeholder feedback, create launch concepts, and show responsive designs across several devices.
Explore the 3D device mockup video generator for a focused creation workflow and a clear comparison of Free and Pro capabilities.
Step-by-step workflow
- Prepare production-sized frames. Use frames that match the target device ratio and include only the UI intended to appear inside the screen.
- Choose still or prototype recording. Export PNG for a single state. Record a focused prototype flow when transitions, gestures, or changing data carry the message.
- Clean the presentation. Hide Figma chrome, prototype hotspots, cursor noise, and private comments. Use realistic fictional content.
- Import into the device. Choose a phone, tablet, laptop, watch, or display that matches the designed experience and review the crop at every important state.
- Animate the story. Use device or camera movement to introduce the design, then hold the screen steady while viewers inspect the interaction.
Decisions that improve the result
Prototype fidelity
Do not imply that a prototype is a shipped product. Label concept work clearly in portfolios and stakeholder presentations.
Frame consistency
Keep status bars, corner radius, and content scale consistent across screens so transitions do not visibly jump.
Responsive work
Export genuine layouts for phone, tablet, and desktop instead of placing one desktop screenshot inside every device.
Production checklist
- Correct frame ratio
- Prototype chrome hidden
- Fictional safe data
- Still versus recording chosen
- Crop reviewed
- Prototype status disclosed
Frequently asked questions
Does freemockup.video import a Figma file directly?
The reliable workflow is to export a frame or record the prototype, then upload the resulting image or video.
Should I use PNG or video?
Use PNG when one interface state proves the idea. Use video when the transition or interaction is essential.
Can I show responsive Figma layouts together?
Yes. Export each layout separately and assign the correct media to each device in a Pro multi-device scene.