Export with Device Frame

I started my project in Figma with an iPhone frame and it’s just a rectangle shape of the screen but does not show the frame of the phone around which is fine. When I open the project in prototype and the click present a device frame is added automatically. My question is how do I export the screen with the mockup frame around of the phone?
I don’t want any background like in the screenshot attached.

This would be so helpful! Some of our stakeholders prefer presentations in powerpoint. It’s a lot of time manually exporting screens and lining them up with a device frame.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

any answer?

100% this would be great to have, and save a ton of time

It would be a great feature if they add it. I am looking for a way to export the wireframe with its device frame.

So the topic was closed without an answer?

Do you guys have any workarounds? I am currently using screenshots but lose a lot of quality for my presentations.

Hello, my friends!
You can use the plugin Device Models:

Cheers!

There are many plugins already in Community with this possibility.

I just spent some time looking at the plugins available for this and have to say that I’m really surprised this is not on the roadmap for Figma. All of the plugins are multi-step, and many are paid models. It’s a very reasonable use case to want to be able to export exactly what a prototype look likes in playback mode in a particular state.

Can anyone on the Figma team share why this is not being pursued?

Guys, let us all place a vote for this features to be available. I’m sure everyone would like to be able to “Export with Device Frame”. It had been more than 1 years since it was asked.

I used the plugin “A little bit mockup”. This one worked wonders for me! Immediately imported a device frame like the one that appears in prototyping. The Device models one listed above didn’t work for me.

Present in prototype + screenshot

🤷

Choose a green background and green screen

use the iMockup Plugin , you can choose which device to use from a pretty long list of available devices , looks identical to the Figma preview without the black background. Only downside is you have to use the plugin on the exported frames(as pdf or png) one by one.

Any updates? Would love to see frame in the PDF export when sharing with clients.

Also, I found these old apple designs where they included meta info in the header: https://twitter.com/darius/status/1730752323125993736/photo/1. Would also be super helpful!!

I wonder if the new inline device frames will bring us any movement here. Apparently the device frames are .svg now. It would be amazing to be able to export screens as .png with device frames and a transparent background.

Honestly, it’s shocking to me that this isn’t already an option?? Why don’t they let you design AND export with device frame??? Why on earth would you remove that capability when it seems so obvious… people want to see what it looks like in context, not as a random floating white rectangle. Have a heart, Figma. This makes no sense to gatekeep. Let people export with device frame AND design with device frame. If I select an iPhone 15 or whatever, then WHY IS IT JUST A RECTANGLE WITH NO FRAME. This is so frustrating. Honestly, I want to love Figma, but stuff like this just irks me. Weird dev team and management IMO.

I AGREE, even just a transparent background for png. Because when I screenshot from Present mode, then it’s got a black background and it doesn’t fit into the aesthetic of my deck. HELP US, FIGMA. Please stop gatekeeping obvious features.

Hey All, thanks for the feedback and apologies for the late acknowledgement!

We’ll pass this onto our team for future consideration.

Yes, please! Wasting so much time for looking for mockups(of course except for the paid ones)

I found the iOS 17 Figma resource pack on the official Apple Design resources website, which contains everything from icons to keyboard types, buttons and the actual frames of the latest iPhones, and you can just copy and paste them into your designs. Here’s the link: Apple Design Resources - Apple Developer

+1, this would be very useful for non-designers as well. It’s simple enough for us to do this for mockups, but non-designer product folks asked immediately for this feature.

Yeah how the hell hasnt this been integrated yet, lock in Figma seriously

i tried this plugin. it really works wonders. tq so much for sharing