Notification Preferences UI in Figma

Quick answer

Notification preferences let users control which messages they receive—marketing emails, order updates, SMS alerts, and push notifications—without disabling legally required transactional mail. Design a settings page or modal grouped by category (Orders, Marketing, Account security) with per-channel toggles (email, SMS, push). Transactional notifications (receipts, shipping) should be on and non-disableable with clear copy explaining why. Marketing toggles need explicit opt-in/opt-out, save confirmation, and a link to one-click unsubscribe from emails. Start from the Figma guides hub and pair with the account dashboard, login registration, and forms guides.

Who this is for

Product designers building account settings, preference centers, and email footer unsubscribe flows.
CRM and lifecycle teams aligning UI with CAN-SPAM, CASL, and GDPR consent rules.
Engineers syncing preference APIs with ESPs (Klaviyo, Braze, etc.) and push providers.

Settings surface comparison

Surface	When to use	Trade-off
Account settings page	Logged-in preference management	Canonical, bookmarkable
Dedicated preference center	Email footer `?token=` links	Works without login
Registration opt-in checkbox	Initial marketing consent	Must sync to settings page
Modal after permission prompt	Push notification OS prompt follow-up	Easy to dismiss—low retention
Inline checkout checkbox	One-time promotional opt-in	Do not replace full settings

Verdict: maintain one NotificationPreferencesPanel component used on the account settings route and on the tokenized preference center (layout may differ slightly).

NotificationPreferencesPanel anatomy

Part	Spec	Notes
Page title	”Notification preferences” or “Communication settings”	Under account nav
Category sections	Orders, Marketing, Account, Optional SMS	Accordion or stacked cards
Channel row	Label + description + toggle	Email / SMS / Push per row
Transactional lock	Toggle disabled + lock icon	”Required for your orders”
Save bar	Sticky on mobile when dirty	”Save changes” + “Cancel”
Success toast	”Preferences updated”	After save
Unsubscribe all	Destructive text link at bottom	Marketing only—not orders

NotificationPreferencesPanel
├── Variant: context=accountSettings | emailFooterToken
├── Variant: state=default | dirty | saving | saved | error
└── Layers:
    ├── PageHeader
    ├── CategorySection (repeat)
    │   ├── CategoryTitle
    │   └── PreferenceRow (repeat)
    │       ├── RowLabel
    │       ├── RowDescription
    │       ├── ChannelToggle (email|sms|push)
    │       └── LockedBadge (transactional)
    ├── SaveBar
    ├── UnsubscribeAllLink
    └── SuccessToast

Use toggle switches for on/off—not ambiguous checkboxes without labels.

Category and channel matrix

Category	Email	SMS	Push	User can disable?
Order confirmations	✓	optional	optional	Email: No (transactional)
Shipping & delivery	✓	✓ common	✓	Email: No; SMS/push: Yes
Back in stock	✓	optional	✓	Yes—all channels
Promotions & sales	✓	optional	✓	Yes—all channels
Cart abandonment	✓	rare	optional	Yes
Account security	✓	optional	optional	Email: No (password, verify)
Loyalty & rewards	✓	optional	✓	Yes
Product recommendations	✓	—	optional	Yes

Verdict: never let users disable order receipts or security alerts via marketing-style toggles—show them as locked rows with explanation copy.

Registration vs settings consistency

Touchpoint	UI	Must sync to
Sign-up marketing checkbox	Unchecked by default (CASL/GDPR regions)	Marketing email toggle
Guest checkout email	No marketing pre-check	N/A until account created
Post-purchase account	Optional opt-in on create form	Marketing toggle
Email footer unsubscribe	One-click or preference center	Same API as settings page

If registration shows “Send me deals and new arrivals,” the account settings Promotions row must reflect that state on first login. Cross-link guest checkout opt-in patterns.

Users arriving from “Manage preferences” in an email may not be logged in.

Element	Spec
Header	Brand logo + “Email preferences for j•••@example.com”
No account nav	Simpler layout—no sidebar
Same categories	Reuse `CategorySection` components
Save	Immediate save per toggle or explicit save bar
Sign in CTA	”Sign in for more settings” link to login
Unsubscribe all marketing	Prominent at bottom

PreferenceCenterToken
├── Variant: tokenValid | tokenExpired
└── Layers:
    ├── BrandHeader
    ├── EmailMasked
    ├── NotificationPreferencesPanel (embedded)
    └── TokenExpiredMessage (conditional)

Design token expired state: “This link has expired—sign in to update preferences.”

Push and SMS-specific UI

Channel	Extra UI	Notes
Push	”Enable in device settings” when OS denied	Link to browser/app settings
Push	Preview of notification types	Optional illustration
SMS	Phone number display + verify badge	Link to verify flow
SMS	”Message and data rates may apply”	Legal footnote
SMS	Disable if number unverified	Gray out SMS toggles

SMS opt-in often requires double opt-in—design a confirm screen after enabling SMS marketing, similar to email verification.

Save, undo, and error states

State	UI
Default	Toggles reflect server state; save bar hidden
Dirty	Sticky save bar appears; unsaved dot on nav item
Saving	Button spinner; toggles disabled
Saved	Toast + save bar hides
Error	Inline banner “Couldn’t save—try again” + retry
Optimistic	Optional instant toggle with rollback on fail

Avoid auto-save on every toggle unless your API is fast and idempotent—explicit Save changes reduces accidental opt-outs.

Mobile layout

Pattern	Spec
Stacked rows	Label above toggle, full width
Sticky save	Fixed bottom bar when `dirty=true`
Section spacing	24px between categories
Touch targets	Toggle + label row min 48px height
Account nav	Collapse to sidebar drawer on small screens

At 375px, put description text below the label—not beside the toggle—to avoid cramped two-column rows.

Handoff checklist

Item	Dev Mode annotation
Preference API	PATCH `/account/notifications` field map
Transactional flags	`locked=true` on server—ignore client disable
ESP sync	Klaviyo/Braze list IDs per category
Legal regions	Default marketing off in CA/EU
Token TTL	Preference center link expiry (e.g. 30 days)
Analytics	`pref_marketing_off`, `pref_save_success`, `pref_unsubscribe_all`
a11y	Toggle associated with `<label>`; section headings as `h2`
Unsubscribe one-click	RFC 8058 one-click POST for marketing emails

Document which categories map to which email templates in Dev Mode descriptions—not only in external docs.

Common mistakes

Mistake	Why it hurts	Fix
One master “Emails off” toggle	Blocks order confirmations	Split transactional vs marketing
Pre-checked marketing on sign-up	Legal risk in CASL/GDPR	Default off where required
No save confirmation	Users unsure if it worked	Toast on success
Settings ≠ email footer center	Inconsistent opt-out state	One API, two layouts
Hiding SMS legal copy	Compliance issues	Footnote on SMS rows
Push toggle when OS denied	Broken UX	Link to system settings
No token expired state	Dead-end from old emails	Sign-in fallback
Dark-pattern unsubscribe	Trust + legal exposure	Clear “Unsubscribe from marketing”

Recommended workflow

Audit message types with CRM—map to categories and channels.
Build PreferenceRow + channel toggles with locked transactional variant.
Compose NotificationPreferencesPanel with Orders, Marketing, Account sections.
Add registration checkbox state sync to marketing row.
Design tokenized preference center for email footer links.
Spec SMS/push edge cases (unverified phone, OS denied).
Prototype dirty save bar and success toast on mobile.
Cross-link account dashboard and login opt-in.

FAQ

Separate page or tab under Account?

Use a dedicated settings page linked from account nav—easier to deep-link from emails than a hidden tab.

Granular product category opt-outs?

Add only if CRM supports it—otherwise keep Promotions as one row to avoid false precision.

Unsubscribe all vs disable marketing toggle?

Unsubscribe all marketing should set the same backend flag as turning off Promotions + Recommendations + Abandonment rows.

Show notification preview?

Optional for push—small phone mockup with sample copy helps users understand toggles.

Next steps

Design account dashboard and my account UI in Figma — nav entry to preferences
Design login, registration, and password recovery UI in Figma — marketing opt-in at sign-up
Design email verification and OTP UI in Figma — SMS double opt-in confirm
Design toggle switches and checkboxes in Figma — preference row controls
Design forms in Figma: inputs, states, and handoff — save bar and validation patterns

Designing notification preferences and communication settings UI in Figma: channels, toggles, and compliance