macOS Monterey Safari Realistic Mockup – Free Figma Resource

Mockups
Figma Resource

Do you want realistic browser window frames for your presentation? Looking for an online resource that combines Apple’s Monterey Safari UI as well as adaptive color modes? There is no need to search any further!

This is a public Figma file I made because I wanted to have a resource like this on hand for presenting something that involves a web browser in the future. At first, I designed only the standard Color Mode for Safari. However, I realized the standard Color Mode isn’t widely used, so I also built out an adaptive color mode that adapts the Header to the UI.

I hope you find this free resource useful, and please contact me if you discover any errors or omissions. Thank you. ?

The Figma team is always rolling out exciting new features, so I’ll try to retrofit the browser frames in this document as they are upgraded. I’m specifically looking for ways to improve components to make them more responsive.

Might also expand upon this to include mobile browser frames as well!