Often times when I build a tool, template, or resource from scratch it's because I need it to get my work done. I only resort to this if I can't find something that does what I need it to, or it's way out of my budget, or it straight up doesn't exist. At some point a few months ago I needed a real browser mockup—not a super pretty one like this one, or this one—a true-to-life mockup. I was looking for chrome, but I also wanted something that included firefox and safari too. Even better if it also had options for both Windows and Mac interfaces. The best I could find was what Fábio Santos created: he put together a comprehensive set of mockups of the major browsers for both Windows and Mac OS, but it was published in October 2019 which means it was two months shy of Figma releasing auto-layout. I tried downloading it, but couldn't get it to open, so I can't be sure if he went back and implemented auto-layout to make things more flexible. Besides Fábio, I found a few other folks on dribbble had spun up some free-to-use browsers: Volodymyr Sadykov made one for Safari for mac, and Anton Lapko made a robust mockup of chrome (also for Mac).
I think all of those mockups are excellent if they already look the way you need them to, and are using them primarily to showcase work in a still image. But I wanted something that would also work for prototyping. That's why I put together something quite similar to what Fábio published, with a few extra features:
This is a free resourceundefined for anyone to use, but if you wanna buy me a coffee for it I sure wouldn't mind. My Venmo handle is @AlicePackard and my PayPal link is paypal.me/AlicePackard. And hey, if you find ways to improve these please leave me a comment in the Figma file! Happy to take critique ✨
Want to preview what's in the file without leaving this page? Check out the live embed below:
If you'd like to be notified of when I publish a new blog post, joining my newsletter is a great way to keep up. Readers get extra insight behind every post.