How to Use Templates in Figma: Alerts

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.

Alerting Me From What?

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.

ujd8N52oWPguj9g6UHrbRsVCNi9YTsU7vj6bzNCbVcwyqjOUXqu4AgJTG1j DAJqgmU6omvxMmFKB3taAfq3LvkpXV gWn8GbHhdsI31xBKrNq4aqzR6e9OqMo3PoJaVtmjq2Wd1i3Wj PEG fcgVum4 O3c ujnxmakyoLa2gjsKFdAjr Mwj8fZ

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.

jCtn A R u6OAGfq9YdEM4eEqMMgC80SAvEeLhJx5U4yIsGtBETobDuw4dLH2zbz2wbo vzM4FfeS7lx1kP37ou4PTFe4Mx g3yJQ BN7Knq LVL2eosYAFWA eWfFpkefUvuFPIAEWNuHyvFRAFBNQhvaxZkIqm7 SA0eNidWGCTkENl5 BYU2vXrg

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!

Read The Next Lesson