figma guide
Designing audit log and security activity UI in Figma: sign-in history, alerts, and account event feeds
Design audit log and security activity UI in Figma with sign-in history, password changes, export feeds, filters, and Dev Mode specs for account transparency flows.
- Published
- Updated
- Jul 08, 2026
- Read time
- 7 min
- Level
- Beginner
Quick answer
Audit log and security activity UI gives users a read-only timeline of account events—sign-ins, password changes, 2FA updates, data exports, and failed login attempts—usually under Account → Security → Activity. Design an event feed with icon, title, timestamp, device/location metadata, and optional detail expand. Add filters (sign-ins, security changes, billing) and email alert toggles for suspicious activity. This is history, not control: live session revoke belongs on active sessions. Start from the Figma guides hub and pair with security settings and privacy flows.
Who this is for
- Product designers building transparency feeds for SaaS, ecommerce accounts, and compliance-conscious products.
- Design system teams distinguishing activity logs from notifications inbox and admin audit consoles.
- Engineers implementing immutable event streams, retention policies, and security alert webhooks.
Activity feed vs sessions vs notifications
| Surface | Mutable? | Typical events |
|---|---|---|
| Security activity feed | Read-only | Password changed, 2FA enabled, export requested |
| Active sessions list | Revoke actions | Current Chrome on macOS |
| Notifications inbox | Mark read | Order shipped, promo, product updates |
| Admin org audit log | Admin-only | Member invited, role changed, SSO updated |
| Email security alerts | Out-of-band | ”New sign-in from Toronto” |
Verdict: use a SecurityEventRow component with event-type icons—do not reuse order notification cards. Link “Not you? Revoke sessions” from sign-in events only.
Event categories and icons
| Category | Example events | Icon hint |
|---|---|---|
| Authentication | Successful sign-in, failed attempt, SSO login | Key or door |
| Credential changes | Password updated, passkey added, recovery email changed | Lock |
| 2FA / security | Authenticator enabled, backup codes regenerated | Shield |
| Session control | Signed out everywhere, session revoked | Logout |
| Data rights | Export requested, account deletion scheduled | Document |
| Connected apps | Google connected, OAuth app revoked | Link |
| Profile | Email changed, phone verified | User |
Keep failed login attempts visible but not alarming—“Failed sign-in attempt” with no extra CTA unless threshold triggers lockout messaging per login specs.
SecurityEventRow anatomy
| Part | Spec | Notes |
|---|---|---|
| Icon | 24px by event category | Consistent color system |
| Title | Past tense, scannable | ”Password changed” |
| Timestamp | Absolute + relative | ”Jul 8, 2026 · 2 hours ago” |
| Meta line | Device · location · IP region | Match session list format |
| Expand chevron | Optional detail | Actor, app version, request id for support |
| Action link | Contextual | ”Secure your account” on unknown sign-in |
SecurityEventRow
├── Variant: category=auth | credential | mfa | data | app
├── Variant: severity=info | warning | critical
├── Variant: expanded=true | false
└── Layers:
├── EventIcon
├── Title
├── Timestamp
├── MetaLine
├── DetailPanel (optional)
└── ActionLink (conditional)Page layout and filters
| Element | Spec |
|---|---|
| Page title | ”Security activity” or “Recent activity” |
| Retention note | ”Events from the last 90 days” |
| Filter chips | All · Sign-ins · Security changes · Data |
| Date range | Optional advanced filter for power users |
| Empty state | ”No activity yet” after new signup |
| Load more | Pagination or infinite scroll |
Place under Account → Security beside sessions—tabs work well: Sessions (revoke) | Activity (history).
High-signal events to always show
| Event | Why users care |
|---|---|
| New sign-in from new device/location | Fraud detection |
| Password or email changed | Account takeover signal |
| 2FA disabled | Critical—use warning severity |
| Passkey or backup codes changed | Credential hygiene |
| Data export completed | GDPR transparency |
| Account deletion requested | Irreversible action trail |
| SSO enforcement toggled | Enterprise policy (admin view) |
Cross-link email verification when email-change events appear—show “Pending verification” as a distinct event state.
Email and push alert settings
| Toggle | Default | Copy |
|---|---|---|
| New sign-in alerts | On | ”Email me when someone signs in from a new device” |
| Password changed | On | Cannot disable on some regulated products |
| Failed login threshold | Off or On | ”After 5 failed attempts” |
| Export / delete requests | On | Compliance notification |
Design toggles on the same page or link to notification preferences with a Security subsection—avoid duplicate toggles in two places.
Warning and critical event treatment
| Severity | Visual | Example |
|---|---|---|
| Info | Neutral icon | Routine sign-in |
| Warning | Amber accent | Sign-in from new country |
| Critical | Red accent + inline CTA | 2FA removed, email changed |
Unknown sign-in row example:
Sign-in from new location · Chrome on Windows · ~ Toronto, CA
Jul 8, 2026 · 10:42 AM
This wasn’t me →
“This wasn’t me” flows: revoke other sessions → prompt password change → suggest enabling 2FA.
Enterprise vs consumer scope
| Audience | Feed scope |
|---|---|
| Consumer account | Personal auth and data events only |
| Org member | Personal events + “Admin changed your role” |
| Org admin | Separate Admin audit log with member actions, SSO config, billing |
| SSO-only user | Show IdP sign-in; note password events may be empty |
Do not expose other users’ activity in a member-facing feed—reserve for admin consoles paired with SSO setup wizards.
Mobile and responsive layout
| Breakpoint | Pattern |
|---|---|
| Mobile | Vertical timeline with left icon rail |
| Desktop | Table optional for dense history; timeline for mixed event types |
| Expand detail | Bottom sheet on mobile, inline accordion on desktop |
Timestamps stay timezone-aware—use account timezone from account dashboard settings when available.
Handoff checklist
| Item | Dev Mode annotation |
|---|---|
Event type enum | Maps to icon and filter |
occurredAt | ISO timestamp, display localized |
| Immutability | No edit/delete in UI |
| Retention window | 90/180/365 days per policy |
| PII in details | Mask email partials in expanded JSON |
| Failed login | Aggregate vs per-attempt rows |
| Alert webhooks | Same events power email |
| a11y | Timeline announced as list; severity not color-only |
Document support correlation id in expanded detail for enterprise tickets—not in the default row.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| Revoke button on history rows | Users expect time travel | Link to sessions page |
| Order events in security feed | Noise | Keep commerce in order history |
| No retention disclaimer | Legal mismatch | Show “90 days” prominently |
| Identical copy for success/fail login | Missed fraud signal | Separate failed attempt styling |
| Missing “wasn’t me” path | Alert fatigue | CTA on new-location sign-ins |
| Admin events in user feed | Privacy leak | Role-gated admin log |
| Real-time expectation | Confusion when delayed | ”May take a few minutes to appear” |
| Duplicated email toggles | Conflicting settings | Single source in notification prefs |
Recommended workflow
- Inventory events with engineering—auth, profile, data, OAuth, session.
- Design
SecurityEventRowwith category icons and severity variants. - Build Activity page with filters and retention note.
- Add expand detail for support-friendly metadata.
- Wire “wasn’t me” to sessions revoke + password change prompt.
- Align alert toggles with notification preferences.
- Separate admin audit frames if B2B—do not mix with member feed.
- Prototype filter chips and unknown sign-in CTA path.
FAQ
How is this different from login history in banking apps?
Same UX pattern—read-only sign-ins plus security changes. Banking often adds transaction events; keep commerce out of this feed unless the product is finance-first.
Show failed login attempts?
Yes, after a single failure or threshold—helps users detect credential stuffing. Cap volume to avoid scroll spam.
Real-time updates?
Polling or websocket optional—most users refresh manually. Email alerts cover async awareness.
GDPR data export include activity log?
Include in export JSON when legally required; the in-app feed is a convenience subset with retention limits.
Ecommerce accounts need a full audit log?
Light version is enough: sign-ins, password/email change, address/payment method updates, export/delete—link order history for purchases.
Next steps
- Design active sessions and device management UI in Figma — revoke live sessions
- Design session timeout and re-authentication UI in Figma — idle expiry UX
- Design two-factor authentication and security settings UI in Figma — events when 2FA changes
- Design privacy settings and data management UI in Figma — export and deletion events
- Design notification preferences and communication settings UI in Figma — security alert toggles
§ Keep reading