Skip to main content
David_Nadri
April 11, 2022
Question

Export Figma prototype with device frame

  • April 11, 2022
  • 4 replies
  • 27516 views

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!

This topic has been closed for replies.

4 replies

Sophie_Price
New Member
June 1, 2022

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

David_Nadri
October 25, 2022

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

September 28, 2023

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

David_Nadri
September 28, 2023

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.