I spent a good amount of time searching for mockups that match the ones I’m presenting my work in. The device frames presented by Figma are exactly what I’m looking for. There should be an option to “Export with Device Frame”.
The prototyping feature does already has a lot of device mockups with pretty good quality to showcase designs.
Does anyone else feel that this would save them a lot of time?
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.
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 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.
