Designing privacy settings and data management UI in Figma: download data, delete account, and consent

Quick answer

Privacy settings let users see what data you store, export a copy, control optional sharing, and request account deletion—usually under Account → Privacy or Security & privacy. Design three core flows: Download my data (request → email link → file ready), Delete account (warning → re-auth → confirmation → grace period), and Privacy toggles (analytics, personalization, third-party sharing) with plain-language descriptions. Required legal copy belongs in the UI, not only in Terms. Start from the Figma guides hub and pair with the account dashboard, notification preferences, and login guides.

---

Who this is for

• Product designers building account privacy pages for ecommerce, SaaS, and marketplaces.
• Legal and compliance teams aligning UI with GDPR, CCPA/CPRA, and PIPEDA requirements.
• Engineers implementing export jobs, deletion queues, consent APIs, and audit logs.

---

Privacy surface comparison

Surface	When to use	Trade-off
Account privacy page	Logged-in data rights	Canonical for export and delete
Cookie / consent banner	First visit, pre-login	Must sync with account toggles where overlap exists
Registration consent	Initial legal acceptance	Link to privacy policy version
Checkout guest notice	Order data processing	Does not replace full privacy settings
Email data-request link	Support-initiated export	Same flow as in-account request

Verdict: use one PrivacySettingsPanel component on the account route and a separate CookieConsentBanner for pre-auth visitors—sync overlapping flags (e.g. analytics) through one backend consent record.

---

PrivacySettingsPanel anatomy

Part	Spec	Notes
Page title	”Privacy & data” or “Your data”	Under account nav
Data summary	Short list: orders, addresses, payment tokens	No raw card numbers
Download section	CTA + status	”Request a copy of your data”
Sharing toggles	Optional personalization, analytics	Plain-language labels
Policy links	Privacy Policy, Cookie Policy	Open in new tab
Delete account	Destructive section at bottom	Separated visually
Last updated	Policy version date	When consent version changes

PrivacySettingsPanel
├── Variant: context=accountSettings
├── Variant: state=default | exportPending | exportReady | deleteFlow
└── Layers:
    ├── PageHeader
    ├── DataSummaryCard
    ├── DownloadDataSection
    │   ├── RequestButton
    │   ├── ExportStatusBanner
    │   └── DownloadLink (when ready)
    ├── ConsentToggleGroup
    │   └── ConsentRow (repeat)
    ├── PolicyLinks
    └── DeleteAccountSection
        ├── WarningCopy
        └── DeleteAccountButton

Use toggle switches for optional consent—not pre-checked dark patterns.

---

Download my data flow

Step	UI	Copy notes
1. Request	Primary button on privacy page	”We’ll email you when your file is ready”
2. Confirm identity	Re-enter password or OTP	Required for high-risk export
3. Pending	Status banner + disabled button	”Request submitted — usually within 48 hours”
4. Ready	Email + in-app banner with download link	Link expires in 7 days
5. Download	ZIP or JSON; file size note	List included categories
6. Rate limit	Error if requested too soon	”You can request again in 30 days”

DataExportFlow
├── Variant: step=request | verify | pending | ready | expired
└── Layers:
    ├── IdentityVerifyModal
    ├── ExportPendingBanner
    ├── ExportReadyBanner
    └── DownloadButton

Verdict: show what is included (orders, profile, addresses, wishlist) before the user confirms—reduces support tickets about “missing” payment data (tokens are not exportable).

---

Delete account flow

Account deletion is irreversible for users—design a multi-step flow with clear consequences.

Step	UI	Required copy
1. Entry	”Delete account” text button or secondary destructive	Link from privacy page only—not dashboard hero
2. Consequences	Bullet list	Active orders, subscriptions, store credit, login loss
3. Re-auth	Password or OTP	Same as export verify
4. Confirm	Type DELETE or email confirm	Prevents mis-taps
5. Grace period	Optional 14–30 day undo	Banner: “Account scheduled for deletion”
6. Complete	Sign-out + confirmation email	No silent deletion

DeleteAccountFlow
├── Variant: step=warning | reauth | confirm | scheduled | complete
└── Layers:
    ├── ConsequenceList
    ├── ActiveOrderBlocker (if open orders)
    ├── ReauthForm
    ├── ConfirmInput (type DELETE)
    ├── ScheduleDeletionBanner
    └── CancelDeletionLink

Block deletion when open orders, pending returns, or active subscriptions exist—show inline alert with link to resolve first.

---

Consent toggles vs notification preferences

Toggle type	Privacy page	Notification page
Analytics / cookies	✓	—
Personalization / recommendations	✓	Overlaps with recommendation emails
Third-party ads	✓	—
Marketing email	—	Notification preferences
SMS marketing	—	Notification preferences

When personalization off affects product recommendations UI, document the UX fallback (generic bestsellers)—note in Dev Mode.

---

Cookie consent banner (pre-login)

Element	Spec
Position	Bottom bar or corner modal
Actions	Accept all, Reject non-essential, Customize
Customize drawer	Category toggles: Essential (locked), Analytics, Marketing
Persist	localStorage + sync on login
Re-open	Footer “Cookie settings” link

CookieConsentBanner
├── Variant: state=hidden | visible | customizeOpen
└── Layers:
    ├── BannerBar
    ├── AcceptAllButton
    ├── RejectNonEssentialButton
    ├── CustomizeButton
    └── CookieCustomizeDrawer
        └── CategoryToggle (repeat)

Do not use Accept only without reject—regulators and trust audits flag it.

---

Mobile layout

Pattern	Spec
Stacked sections	Download, toggles, delete—full width cards
Delete at bottom	Extra padding; no sticky overlap with save bars
Long policy links	Wrap; min 44px tap height
Export status	Full-width banner above fold on return visit
Account nav	Collapse to sidebar drawer

At 375px, put destructive delete button below consequence copy—not beside it.

---

Handoff checklist

Item	Dev Mode annotation
Export API	POST /privacy/export → job ID → email webhook
Export TTL	Download link expiry (e.g. 7 days)
Delete API	POST /privacy/delete → grace period cron
Consent flags	Map to analytics SDK and ad pixels
Policy version	consentVersion on accept; re-prompt on change
Blockers	Open order/subscription checks server-side
Audit log	Timestamp + IP for export/delete requests
a11y	Destructive actions use aria-describedby for warnings

Document data categories in export ZIP readme—engineering often forgets the user-facing manifest.

---

Common mistakes

Mistake	Why it hurts	Fix
Delete in one click	Accidental loss + support load	Multi-step + re-auth
Export with no status UI	Users request repeatedly	Pending + ready banners
Privacy toggles ≠ cookie banner	Inconsistent consent	Single consent backend
Hiding reject on cookies	Compliance risk	Reject non-essential button
Marketing off in wrong place	Users can’t find email opt-out	Link to notification preferences
No open-order blocker	Fulfillment failures	Block delete with clear CTA
Legal jargon only	Users don’t understand	Plain-language row descriptions
No grace period undo	Regret + angry tickets	14-day cancel deletion link

---

Recommended workflow

1. Map data categories with legal—orders, profile, addresses, wishlist, consent history.
2. Build PrivacySettingsPanel with download and delete sections.
3. Design export verify + status states (pending, ready, expired).
4. Design delete flow with blockers for active orders and subscriptions.
5. Add consent toggles synced with cookie banner categories.
6. Build CookieConsentBanner for pre-login visitors.
7. Cross-link account dashboard nav and notification preferences.
8. Prototype delete confirmation on mobile—mis-taps are common.

---

FAQ

Separate Privacy page or under Profile?

Use a dedicated Privacy & data page when you offer export and delete—Profile stays for name and password; privacy rights deserve their own IA slot.

Include payment card data in export?

Show last four digits and brand only—never full PAN. State that in the data summary before export.

Cookie banner on every page load?

Show until choice saved; do not re-show on every session unless policy version changes.

CCPA “Do Not Sell” link?

Add a Do Not Sell or Share My Personal Information row in consent toggles for California users—or link to a dedicated disclosure page.

---

Next steps

• Design account dashboard and my account UI in Figma — nav entry to privacy
• Design notification preferences and communication settings UI in Figma — marketing vs privacy toggles
• Design login, registration, and password recovery UI in Figma — registration consent links
• Design email verification and OTP UI in Figma — re-auth for export/delete
• Design inline alerts and banners in Figma — export status and delete blockers