Skip to main content

I’m looking for the ability to insert screenshots or screen-recordings into device mockups, such as an iPhone or a Mac frame and exporting it with the device.


For example, if I take a screenshot or screen recording on my iPhone or Mac, I want to be able to insert that into a real iPhone or Mac device frame to use for presentations, share with my team for quick feedback, etc.


As another example, if I design a screen or animated a series of screens for an iPhone 13 in Figma, then present in Prototype mode, I would like to be able to export the design with the iPhone device frame, and a transparent background to add it to a Powerpoint presentation, etc.


Figma can already display the device frame when presenting a Prototype but it doesn’t let users export/save/download it (as a PNG, video, or GIF) so that you just see the Figma prototype within the device (e.g. iPhone 13 frame) and no background (transparent background).


To give you an idea, here are a couple tools that offer something like this:



If Figma can support this feature, it would help many users tremendously!

Someone’s added this as a “share an idea” too 🙂 Export prototype to PNG or JPG - #2 by Sophie_Price


@Robert_Bye - do you or any of your colleagues working on this part of Figma have any updates on this idea that you could share please?


Please Figma add an export feature to have our screens in a phone frame this will help share our work in presentations!


Hey @Sho_Kuwamoto @GarrettMiller ! Any update or thoughts you could share on this please?


Hopefully, this is a simple feature since Figma already displays a ‘Preview’ of the mockup in the Prototype panel (see attached screenshot). From there, the solution could be:

Select the iPhone design/layer to show it with the iPhone mockup in the Preview > right-click the preview > save as PNG (transparent).


Another solution could be simply adding an ‘Export’ option in Presentation mode (just like the Export function in the Design panel.



Reply