How to Create Mockups in Figma
- George Apostolov
How to Create Mockups in Figma: step-by-step guide
Inside your Figma design canvas, find and select the frame you want to use.
After that, go to the bottom section and click 'Actions'.
Search for 'Quick Mockups' and choose it from the suggested results.
Next, choose the device and model you prefer to use in the mockup.
Once done, tap 'Apply Mockup' to proceed.
After completing these steps, your Figma design will be turned into an actual mockup of your preferred device.
Quick answer: To create mockups in Figma, select your design frame, click Actions at the bottom, and search for Quick Mockups. Next, choose your preferred device and model, then tap Apply Mockup to convert your design into a device mockup.
About this Figma tutorial
Convert your design into a realistic device mockup in Figma by selecting a frame, applying the Quick Mockup action, and choosing a model. This guide shows how to create Mockups in Figma in 6 steps, starting with "Inside your Figma design canvas, find and select the frame you want to use" and finishing with "After completing these steps, your Figma design will be turned into an actual mockup of...". The interactive demo above is a click-through copy of the real Figma interface, so you can rehearse each step before doing it in your own account.
Frequently asked questions
How many steps does it take to create Mockups in Figma?
6 steps. Each one is listed in order above, and the demo highlights exactly where to click.
Can I try it without changing my own account?
Yes. Clicking through the demo doesn't touch your Figma data or settings. Once you know the flow, repeat it in your own workspace.
This tutorial is filed under Figma. Related guides: How to Create Rounded Corners in Figma, How to Create Variants in Figma and How to Crop an Image in Figma. Last reviewed 05 Oct 2026.
Create your first interactive demo in minutes
No credit card required • Start building today
