Alerts are essential to prototyping, mainly if your project involves much decision-making during the User Journey. In this tutorial, we will explain this aspect of the template and how to use it.
If you’re unsure about what an Alert does, I’d be like: Are you sure you want to send that text to your ex? or something like: Do you want to post that picture? In reality, an Alert won’t say that, but you got the point; it’s a feature that makes sure you are making the right decision; it is an interface principle known as Safety and will appear in front of you as a huge textbox.
For example, let’s say you are designing a shopping application that must lead the user to buy something; let’s say the user changes their mind and wants to cancel the purchase. Before doing this action, an alert should appear trying to change the user’s mind and get them back into the purchase. Another example can be when you accidentally click on delete something important before acting; an Alert appears to save your life.
NOTE: We suggest checking How To Understand Interface Principles to learn more.
In this case, we’ll be using an iPhone template.
As you see, the Template will provide all the visual options you can get when adding an Alert. For example, how light or bold do you want the text to be.
In the Molecules section, you will find what the Alert box looks like and its different presentations. The word “Action” in the template represents where the command will be.
NOTE: Keep in mind this is a Template for iPhone, but most templates should include this feature; in case they don’t, look for another template that has it and copy/paste
Now you know the importance of using Alerts in your prototype and how they can be life saviors. So explore, have fun using Figma and stay tuned!
