Figma web browser mockup resource

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:

• Browser tabs are set up with Auto-Layout, so you can easily add and remove them without dragging groups around
• There is a guide marking the top of the bookmarks bar in both Chrome and Firefox, so if you want to remove it, you simply hide the "bookmarks bar" layer, then reduce the height of the frame called "Browser interface" to the appropriate guide.
• I've included components so you can customize which are "focused" and "unfocused" (very important for prototypes that require switching between different tabs)
• The bookmarks in the bookmarks bar are also set up with auto layout, so you can add or remove them as you please without having to fuss with spacing them correctly.

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: