Figma Support Forum

Choose image or frame as prototype background

Hello to the Figma team and forum users! I have been learning this tool over the last couple of weeks and I’m amazed at so many of the features and ideas. However, there is one thing I’m struggling to achieve due to a limitation.

When prototyping for some platforms, it’s nice to create a mockup for the overall platform UI (like a Mac/Windows desktop, with a window open), to then use a background for all other frames, which are in turn the contents of that window.

Currently, in prototype viewer mode, it’s not possible to keep this mockup frame as a background for all frames.

One way to solve it is copy-pasting it (most likely as a component) into each and every frame you want to show in the prototype, and placing it behind everything else. That’s a lot of repeated manual labor. Plus, the frames themselves end up bigger - they have to stay at the fixed size of the mockup screen. So checking how your UI’s resize is harderd.

Apart from that, having that background always be visible or clickable is quite distracting, so you need to always lock it or hide it when working, and then unhide before presenting. Again, repetetive manual labor.

Another option is to make the “desktop mockup” frame the starting frame, and only use “show overlay” for any frames that need to show up inside the mockup, but I assume it’s not the best performance-wise, as you end up stacking frame over frame over frame, without ever closing them. Plus that adds limitations that come with the overlay transition mode (no smart animate etc).

The third option is the “device” dropdown, which makes an image of the device screen visible around your prototype, but that’s extremely limited, as it doesn’t let you customize the visual elements/size/devices available in any way.

Instead of all that, it would be very nice to be able to select an image, or even better a frame, as the “background” option in the Prototype tab. This way, you can focus on making individual screens with no distractions and external elements, but preview them with whatever custom background you want.

That way it can support custom size, custom device hardward and device-specific UI renderings, which can be quickly switched by just selecting another frame, or just removed by selecting a one-color fill (the only option available now for “Custom size” device).

I’d love to see this as an option. If anyone has any feedback about this idea, I’d love to know. Thanks!

2 Likes