Pop-ups, as annoying as they might seem, when used right, can provide your users with the information they need at just the right time.
In this case, we’ll show you how to go about creating a login modal. You will need:
- A black box that’s the size of your canvas
- A group made out of a box that will outline your modal with some content (images, text, input forms, etc.)
- An icon for closing the modal.
Step 1 – create your modal background
The easiest way to go about this is to draw a box and resize it, so it fits your canvas ideally.
Then, in properties, change it’s color to black and opacity to 40%. Ta-dah!
Make sure that this box is on top of all the other layers by moving it to the front.
Step 2 – arrange your content
Now, on top of the background box, place the main box that will serve as the modal background and add your content as well as the icon for closing the interaction.
Step 3 – add closing interactions in the modal
Once you’re done with arranging your content, add interactions that will close the modal. These will be simple “On click → hide” interactions. You can also simulate form validation by following the steps in this tutorial.
Step 4 – hide your layers
The next step here is to hide the modal layers using the eye icon next to the element name.
Step 5 – add interaction to show the modal
The final step here is to add an interaction that will prompt the modal to pop up. The easiest way to do it is to simply create an “On click → show” interaction on the chosen element.
And you’re done! You’ve just created a beautiful modal, so take a look at how it works on the design preview: