A simple Framer resource for building iOS style overlays.

How to use

We’ve utilized both the design and code views in Framer to have everything you need to make this file plug and play.

In design view you’ll find two main frames, one for the default screen view which is the first screen in the prototype. The second is the modal overlay view which is shown after the + button is tapped. You can easily replace everything inside of the REPLACE ME (Sample Screen) layers in both views to your own designs. The key elements to keep in mind is the Button layer in the Default Screen and the Close layer in the Overlay Screen. These are the main actions for opening and closing the overlay.

In code view the only thing that needs to be changed is if any of the core elements names are changed in the design view. In particular the Button and Close layers may need to be updated if changed while implementing your own design. You can also toggle on/off the drag to close overlay option from the code view.

If you’re having a problem manipulating the file or would like to suggest an improvement, shoot us an email at [email protected].

Jon Rundle Apr 10, 2018