A security alert email has to persuade a cautious user to click without looking like a phishing email.
That tension makes these messages different from ordinary transactional email. A new-login alert, password-change confirmation, suspicious-session warning, or recovery notice must feel urgent enough to act on but calm enough to trust.
Emailify helps teams design responsive HTML emails in Figma and move approved modules into production. For security messages, the important work comes before export: defining the event, showing enough evidence, giving the user a safe action, and testing every state that dynamic account data can create.
This article is narrower than Transactional Email Design Workflow in Figma and HTML Email Compliance Review Workflow. Those cover system messages or compliance broadly. Here, the focus is the trust problem created when an email says “something happened to your account” and asks the recipient to respond.
Start with the event, not the template
Write one sentence that describes why the email exists:
Tell the account owner that a new device signed in and let them secure the account if it was not them.
That sentence should determine the hierarchy.
The message needs to answer:
- What happened?
- When did it happen?
- Where or on which device?
- Does the user need to act?
- What happens if they do nothing?
- Where can they verify the event without trusting the email link?
Avoid turning the email into a generic security campaign. Product announcements, upgrade prompts, and unrelated tips weaken the signal.
Show evidence without exposing more data
Security emails need enough context for recognition, but not a dump of sensitive account information.
Useful details may include:
- approximate time
- browser or device type
- approximate location
- account or workspace name
- the kind of change made
Review each field for both usefulness and privacy. An exact location may be misleading or unnecessarily specific. A full email address may reveal more than needed in a forwarded message. An IP address may help technical users but confuse everyone else.
In Figma, test the module with realistic extremes: long device names, unfamiliar locations, missing location data, and translated dates.
Separate “no action needed” from “secure your account”
Many alert emails need two paths.
If the user recognizes the event, say clearly that no action is required. If they do not, provide one dominant recovery action such as:
- review account activity
- secure the account
- reset the password
- revoke the session
Do not present several equal buttons for a stressed reader to interpret.
The recovery destination should explain the event again after the click. A user should not land on a generic settings page and wonder whether the email was legitimate.
Make the email verifiable without clicking
Add a plain-language route such as:
You can also open the app directly and go to Settings → Security → Recent activity.
This is one of the strongest trust signals a security email can provide. It gives cautious users a way to act without relying on the link in the message.
The sender name, reply behavior, support domain, and footer should also match the product’s normal security communications. A beautifully designed alert sent from an unfamiliar address is still suspicious.
Design the module for urgency without panic
Urgency should come from clear language and hierarchy, not alarm styling everywhere.
Use:
- a direct event title
- a concise summary
- a readable event-details block
- one obvious action
- a restrained warning treatment
Avoid:
- vague subjects like “Important notice”
- red backgrounds across the entire message
- countdown language unless a real deadline exists
- claims that the account is compromised when the event is merely unrecognized
The visual system should help the user think.
Build the family, not one perfect alert
Security communication becomes inconsistent when each event is designed separately.
Create reusable variants for:
- new sign-in
- password changed
- email address changed
- recovery method changed
- multi-factor authentication updated
- suspicious activity requiring action
Share the same structural modules, but do not force every event into identical urgency. A successful password-change confirmation and a suspected takeover warning should feel related without sounding equivalent.
Figma Email Design System Checklist is a useful companion for governing those shared modules.
Review the HTML like an attacker would
Before export and ESP upload, check:
- link destinations use the expected secure domain
- visible URLs and linked URLs do not conflict
- the message still makes sense with images blocked
- the primary action is text, not image-only
- dark mode does not hide warnings or details
- long dynamic values do not break the layout
- the plain-text version preserves the event and recovery path
- the footer does not introduce unrelated promotional links
Then send real test messages. A Figma frame cannot show sender identity, inbox preview text, link inspection behavior, or how the alert feels beside genuine phishing attempts.
Security alert signoff
The final approval should include product security, support, and whoever owns email production.
Confirm:
- the event definition is accurate
- the email does not overstate the threat
- users can recognize the event from limited, safe details
- one recovery action is dominant
- a no-click verification route is provided
- support knows what the recipient will see
- HTML and plain-text versions agree
For production handoff mechanics, use the HTML Email Handoff Checklist for Designers and Marketers.
Where Emailify helps
Emailify helps keep the security-alert family inside the same Figma system as the product team’s approved components, then exports responsive HTML for production.
It does not decide the security policy, generate trustworthy event data, or validate the final sender configuration. Those need product and engineering ownership.
Use Emailify after the team has made the trust decisions explicit. A good security alert is not the loudest email in the inbox. It is the one that lets the user understand what happened, verify it safely, and take the right action without hesitation.
Read as Markdown Related resource index Site index for AI agents
Pro Bundle