How to Create Responsive Overlay and Modal Components in Framer | Framer Responsive Design Tutorial

Framer is a web based design tool that makes it easy to create websites without knowing how to code. In this tutorial, I explain how to use the overlay tool to create a responsive sign in/sign up modal.

Music for this video is by Cordio. You can learn more about their music here:
https://www.cortes.us/music

0:00 - Intro
0:09 - How Overlays work in Framer
0:53 - Setting up the modal design
2:17 - Adding the sign in section to the overlay
4:41 - Adding the create account section to the overlay
7:27 - Adding a close button to the modal
8:50 - Testing the overlay
9:03 - Refining the modal spacings
9:40 - Fixing responsive issues on desktop
10:26 - Tablet overlay design
10:45 - Mobile overlay design
11:27 - Previewing the responsive overlay
11:50 - Animation basics
12:39 - Publishing and previewing our site
13:03 - Wrapping up

⁙ social media:
Twitter :   / soren_iverson  
Dribbble: https://dribbble.com/soreniverson
Gumroad: https://soreniverson.gumroad.com/
Website : https://soreniverson.com/

#framer #websitedesign #modal #overlay #framertutorial