Export Figma prototype with device frame

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!

10 Likes

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

1 Like

@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?

1 Like

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

2 Likes

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.

1 Like