figma guide
Designing cookie consent and tracking preference UI in Figma: banners, preference centers, and CMP handoff
Design cookie consent banners, preference centers, and CMP flows in Figma with category toggles, geo rules, consent receipts, and Dev Mode specs for GDPR and ePrivacy compliance.
- Published
- Updated
- Aug 02, 2026
- Read time
- 8 min
- Level
- Intermediate
Quick answer
Cookie consent and tracking preference UI is how SaaS and marketing sites collect lawful permission before non-essential cookies, pixels, and SDKs run—especially under GDPR, ePrivacy, and emerging US state privacy laws. Design a first-layer banner with equal-weight Accept / Reject / Customize actions; a preference center with category toggles (Strictly necessary, Functional, Analytics, Marketing); geo-aware defaults (opt-in in EU, notice-only where allowed); and consent receipts stored with timestamp, policy version, and category snapshot. Start from the Figma guides hub and pair with privacy settings, DPA/subprocessor management, PIA/DPIA workflow, trust center, and Dev Mode handoff.
Who this is for
- Product designers building marketing sites, SaaS signup flows, or in-app analytics consent.
- Design system teams standardizing banner variants, toggle components, and footer “Cookie settings” entry points.
- Privacy, Legal, and MarTech leads aligning CMP configuration with vendor lists and policy versions.
Consent hub (internal overview)
ConsentHub — Acme SaaS · CMP: OneTrust · Regions: 42 active
├── Header: Consent rate EU 78% · Reject rate 12% · Customize 10% · Policy v3.2 live
├── Actions: [ Preview banner ] [ Publish policy v3.3 ] [ Export consent log sample ]
├── Tabs: Banner variants · Preference center · Vendor list · Geo rules · Receipts · QA checklist
├── Alert: Marketing tag fires before consent on /pricing · GTM rule misconfigured · P0
├── Banner: EU strict · US-CA opt-out link · UK mirrors EU · Brazil LGPD variant
└── Link: [Privacy settings](/designing-privacy-settings-and-data-management-ui-in-figma/) · DPA hub · Trust center| Section | Purpose |
|---|---|
| Banner variants | First-layer UX per region and surface (web, embedded widget) |
| Preference center | Second-layer category and vendor detail |
| Vendor list | Cookie/SDK inventory synced to subprocessor registry |
| Geo rules | Which banner, default state, and legal copy per jurisdiction |
| Receipts | Audit sample of stored consent records |
| QA checklist | Pre-launch tag firing verification |
Verdict: Consent UI is not a marketing overlay—it is a launch gate tied to tag managers, SDK init, and analytics pipelines. Design and engineering must share one consent state contract.
First-layer banner patterns
CookieBanner — EU visitor · Bottom bar · Policy v3.2
├── Copy: We use cookies to run the site, measure usage, and personalize ads. See Cookie Policy.
├── Actions (equal visual weight):
│ ├── [ Accept all ]
│ ├── [ Reject non-essential ]
│ └── [ Customize ]
├── Link: Cookie Policy · Privacy Policy · Do not sell/share (US-CA)
├── No pre-checked marketing toggle on first layer
└── Focus trap: Banner blocks page interaction until choice recorded (EU variant)| Banner element | Design rule |
|---|---|
| Accept / Reject / Customize | Same button hierarchy—dark patterns invite regulatory action |
| Policy links | Open in new tab; version query param for audit |
| Dismiss without choice | Allowed only where law permits; EU requires explicit action |
| Floating vs bar | Bar preferred for mobile thumb reach; modal for high-risk first visit |
| Re-open entry | Persistent footer link “Cookie settings” on every page |
| Language | Match site locale; Legal approves translated strings |
Use modals sparingly—full-screen blocking modals increase bounce unless required by counsel.
US state variants: Add “Your privacy choices” link and opt-out of sale/share without hiding Reject behind Customize.
Preference center and category toggles
PreferenceCenter — Customize · 4 categories · 23 vendors
├── Strictly necessary · Always on · Locked · 6 cookies · Required for login, security, load balancing
├── Functional · [ toggle off ] · 4 cookies · Chat widget, video embeds, A/B assignment
├── Analytics · [ toggle off ] · 5 cookies · GA4, Amplitude, Hotjar
├── Marketing · [ toggle off ] · 8 cookies · Meta Pixel, LinkedIn Insight, Google Ads
├── Expand vendor row: Google Analytics · Purpose · Retention · [ Policy link ]
├── Footer: [ Save preferences ] [ Accept all ] [ Reject non-essential ]
└── Last updated: Policy v3.2 · 2026-07-15| Category | Typical contents | Toggle behavior |
|---|---|---|
| Strictly necessary | Session, CSRF, consent cookie itself | Disabled; explain why |
| Functional | Support chat, preferences, embeds | Opt-in in EU |
| Analytics | Product and marketing analytics | Opt-in in EU |
| Marketing | Ads, retargeting, social pixels | Opt-in in EU; extra copy for minors |
Build toggles with switch components—include on/off label, focus ring, and disabled state for necessary category.
Vendor rows should mirror Cookie Policy tables—name, purpose, duration, type (first/third party). Link third parties to vendor risk when they process personal data beyond cookies.
Save preferences must persist before tags fire—show loading state and error retry if CMP API fails.
Geo rules and default states
GeoRules — Region matrix
├── EU / UK / CH: Opt-in · Reject available · No analytics until consent
├── US-CA / US-CO / US-CT: Notice + opt-out of sale/share · GPC signal honored
├── US-other: Notice-only banner · Analytics on by default (Legal approved)
├── Brazil LGPD: Opt-in aligned with EU · Portuguese copy variant
├── Canada PIPEDA: Implied consent notice with opt-out link
└── Fallback: Strictest (EU) when geo unknown| Signal | UI response |
|---|---|
| Unknown IP / VPN | Default to strict banner |
| Global Privacy Control (GPC) | Auto opt-out marketing; show confirmation toast |
| Returning user with receipt | Suppress banner; honor stored categories |
| Policy version bump | Re-prompt only if material change—Legal defines trigger |
| Logged-in user | Sync web consent to privacy settings account |
Document region → banner variant → default toggles in Dev Mode—CMP teams configure rules; design owns copy and component states.
Consent receipts and audit trail
ConsentReceipt — Stored client-side + server log
├── consent_id: cns_8f2a…
├── timestamp: 2026-08-02T14:22:01Z
├── policy_version: cookie-policy-v3.2
├── banner_variant: eu-strict-bar-v2
├── categories: { necessary: true, functional: false, analytics: true, marketing: false }
├── geo: DE · locale: de
├── method: customize_save
└── gpc_honored: false| Receipt field | Why auditors ask |
|---|---|
| Policy version | Proves which text user saw |
| Category snapshot | Not just “accepted” boolean |
| Timestamp + timezone | Demonstrates when tags may fire |
| Method | Accept all vs granular save |
| User ID (if logged in) | Links to account privacy center |
| IP hash (optional) | Geo evidence without raw PII retention |
Admin consent log search (Privacy team) pairs with compliance exports—sample export for DPIA and SOC 2 evidence.
Never show full receipt JSON to end users—use plain language summary in privacy settings: “You allowed analytics on Aug 2, 2026.”
Tag manager and SDK integration states
TagGate — Engineering contract (design documents all states)
├── State: pending · No non-essential tags loaded · Skeleton analytics blocked
├── State: analytics_only · GA4 allowed · Marketing pixels blocked
├── State: full_marketing · All consented categories active
├── State: gpc_opt_out · Marketing forced off regardless of prior accept
├── Error: cmp_timeout · Fail closed—no marketing tags · Log incident
└── DevMode note: init order = CMP → consent read → GTM dataLayer push| UI state | User-visible cue |
|---|---|
| Pending consent | Banner visible; optional content placeholder |
| Partial consent | No ad slots filled; analytics badge in internal QA overlay only |
| Consent updated | Toast: “Preferences saved” · Tags refresh without full reload |
| CMP failure | Inline alert on banner: “Could not save—try again” |
Design QA overlay (internal build only) showing active categories—helps MarTech verify before launch. Cross-link webhooks if consent changes trigger downstream systems.
Handoff checklist (Dev Mode)
- Banner — variant_id, regions[], copy_keys, button_labels, policy_links, focus_trap boolean.
- Preference center — categories[], default_on per geo, vendor_rows[], save_endpoint.
- Toggle — category_id, disabled, aria_label, on_change_event.
- Receipt — schema fields listed above; retention_days per jurisdiction.
- Geo rule — region_code, banner_variant, default_categories, gpc_behavior.
- Re-open — footer_link_label, opens_preference_center boolean.
- Accessibility — keyboard order, ESC behavior (region-specific), contrast on bar.
- Analytics — consent events: banner_view, accept_all, reject_all, customize_open, save.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| Accept only on first layer | GDPR/ePrivacy enforcement | Equal Reject and Customize |
| Pre-checked marketing toggles | Invalid consent | All non-essential off until opt-in |
| Tags fire before choice | Regulatory breach + inflated metrics | Fail-closed tag gate |
| Banner and Cookie Policy mismatch | Audit failure | Single vendor list source |
| No policy version on receipt | Cannot prove lawful basis | Version bump triggers re-prompt rules |
| Hiding Reject behind settings | Dark pattern complaints | Reject on first layer in EU |
| Ignoring GPC | US state law gaps | Auto opt-out marketing + confirmation |
| Cookie wall blocking service | Often unlawful for essential use | Necessary cookies work without marketing accept |
| Translated banner without Legal review | Wrong legal basis copy | Locale workflow with approval |
| Consent disconnected from account | Logged-in users re-prompted daily | Sync to privacy settings hub |
Recommended workflow
- Inventory vendors with Legal—map to categories and subprocessor list.
- Design first-layer banner with Accept, Reject, Customize at equal weight per region.
- Build preference center with locked necessary category and expandable vendor rows.
- Define geo matrix and GPC behavior with Privacy and MarTech.
- Spec consent receipt schema and admin log sample for audits.
- Document tag gate states so engineering blocks pixels until consent resolves.
FAQ
Banner vs privacy settings?
Banner captures first-visit web consent. Privacy settings handles account-level marketing email, profiling, and data rights—sync categories when user is logged in.
Link to PIA/DPIA?
New tracking vendors or cross-site profiling should trigger privacy assessment before CMP publish—intake references vendor category additions.
CMP build vs buy?
Design the same UX patterns whether OneTrust, Cookiebot, or custom—preference center structure and receipt fields stay consistent for handoff.
Mobile app cookies?
App tracking transparency (ATT) and SDK consent are parallel flows—reuse category language but separate platform-specific modals; link from notification preferences.
Trust center public copy?
Publish Cookie Policy summary and subprocessor links—do not expose internal consent rates or vendor QA alerts.
Next steps
- Design privacy settings and data management UI in Figma — account-level prefs synced with web consent
- Design privacy impact assessment and DPIA workflow UI in Figma — assess new trackers before CMP publish
- Design data processing agreements and subprocessor management UI in Figma — vendor list alignment
- Design trust center and security documentation UI in Figma — public cookie and privacy docs
- Design compliance exports and legal hold UI in Figma — consent log samples for audits
§ Keep reading