A simple Framer resource for building iOS style overlays.Download Source
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
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].