Build

UI patterns in Figma

141 guides for screens you build more than once. Filter the shelf. Starter files are not attached yet.

• Navigation · 5m Designing a command palette in Figma
• Feedback · 4m Designing a notification inbox in Figma
• Feedback · 4m Designing comments and mentions in Figma
• Feedback · 4m Designing product onboarding in Figma
• Privacy · 8m Designing privacy incident severity classification and triage UI in Figma: scoring rubrics, queues, and escalation paths
• Privacy · 7m Designing privacy impact remediation tracking and action plan UI in Figma: DPIA findings, owners, and launch gates
• Privacy · 7m Designing privacy request queue and case management UI in Figma: DSAR, erasure, objection, and SLA tracking
• Privacy · 7m Designing proof of deletion and audit trail UI in Figma: receipts, downstream jobs, and regulator-ready logs
• Privacy · 8m Designing objection and restrict processing UI in Figma: pause use, legal bases, and feature limits
• Privacy · 8m Designing right to erasure and deletion request UI in Figma: scope, exceptions, and proof of deletion
• Privacy · 8m Designing data accuracy and rectification rights UI in Figma: correction flows, source of truth, and dispute resolution
• Privacy · 7m Designing special category and sensitive personal data consent UI in Figma: explicit consent, layered notices, and withdrawal
• Privacy · 7m Designing anonymization and pseudonymization controls UI in Figma: keys, rotation, and re-identification risk
• Privacy · 7m Designing data minimization and purpose limitation UI in Figma: collection gates, field budgets, and drift alerts
• Privacy · 7m Designing data portability and machine-readable export UI in Figma: formats, scopes, and delivery
• Privacy · 6m Designing privacy-preserving analytics and aggregation controls UI in Figma: k-anonymity, noise, and consent gates
• Admin · 7m Designing AI model cards and system documentation UI in Figma: capabilities, limits, and compliance
• Privacy · 7m Designing consent withdrawal and downstream deletion UI in Figma: cascades, confirmations, and audit trails
• Privacy · 8m Designing AI training opt-out and model data usage transparency UI in Figma: controls, notices, and enterprise policies
• Auth · 8m Designing biometric data collection consent and processing transparency UI in Figma: liveness, templates, and lawful basis
• Privacy · 9m Designing children's privacy, age verification, and parental consent UI in Figma: gates, guardians, and COPPA/GDPR flows
• Privacy · 8m Designing privacy by design launch gates and feature privacy review UI in Figma: checklists, blockers, and sign-off
• Privacy · 9m Designing automated decision-making and profiling transparency UI in Figma: logic, appeals, and human review
• Privacy · 9m Designing privacy notice version management and policy changelog UI in Figma: versions, diffs, and consent linkage
• Privacy · 9m Designing consent records and preference management admin UI in Figma: proof, purposes, and audit trails
• Privacy · 8m Designing legitimate interest assessment (LIA) workflow UI in Figma: balancing tests, records, and objections
• Privacy · 9m Designing cross-border data transfer and SCC management UI in Figma: TIA records, vendor flows, and transfer registers
• Data · 8m Designing records of processing activities (ROPA) and data mapping UI in Figma: inventory, lawful basis, and retention
• Privacy · 8m Designing cookie consent and tracking preference UI in Figma: banners, preference centers, and CMP handoff
• Privacy · 9m Designing data subject access request (DSAR) and GDPR portal UI in Figma: intake, identity verification, and fulfillment
• Auth · 9m Designing data processing agreements and subprocessor management UI in Figma: DPA workflows, change notices, and customer approvals
• Privacy · 9m Designing privacy impact assessment and DPIA workflow UI in Figma: scoping, risk scoring, and approval gates
• Admin · 10m Designing bug bounty and vulnerability disclosure program UI in Figma: scope, submissions, and researcher workflows
• Admin · 11m Designing compliance audit evidence and certification renewal UI in Figma: controls, requests, and renewal timelines
• Data · 9m Designing SLA dashboard and uptime reporting UI in Figma: targets, credits, and customer-facing reports
• Admin · 10m Designing trust center and security documentation UI in Figma: certifications, policies, and request workflows
• Admin · 9m Designing business continuity and disaster recovery planning UI in Figma: RTO/RPO, runbooks, and failover drills
• Admin · 9m Designing customer incident status page and communication UI in Figma: components, subscriptions, and updates
• Admin · 9m Designing post-incident review and root cause analysis UI in Figma: timelines, five whys, and action tracking
• Admin · 8m Designing forensic evidence management and chain of custody UI in Figma: artifacts, custody, and legal hold
• Admin · 8m Designing security operations shift handover and war room UI in Figma: queues, briefings, and handoff
• Admin · 8m Designing threat hunting queries and investigation workspace UI in Figma: pivots, timelines, and handoff
• Admin · 8m Designing threat intelligence feeds and IOC management UI in Figma: feeds, blocklists, and handoff
• Admin · 7m Designing security automation and response workflows UI in Figma: triggers, actions, and handoff
• Admin · 8m Designing SIEM log ingestion and data source connectors UI in Figma: pipelines, parsers, and handoff
• Auth · 7m Designing secrets rotation and credential vault UI in Figma: storage, rotation, and handoff
• Admin · 8m Designing security alerting rules and notification routing UI in Figma: triggers, channels, and handoff
• Auth · 7m Designing privileged access management and JIT access UI in Figma: requests, approvals, and handoff
• Admin · 8m Designing security questionnaires and vendor onboarding UI in Figma: intake, scoring, and handoff
• Admin · 7m Designing access review and certification campaigns UI in Figma: reviewers, decisions, and handoff
• Admin · 7m Designing security awareness training and phishing simulation UI in Figma: campaigns, reporting, and handoff
• Admin · 7m Designing security policy management and acceptance UI in Figma: versions, attestation, and handoff
• Admin · 7m Designing vulnerability management and penetration test findings UI in Figma: severity, remediation, and handoff
• Admin · 7m Designing incident response runbooks and security playbooks UI in Figma: steps, roles, and handoff
• Admin · 7m Designing vendor risk assessment and third-party security reviews UI in Figma: questionnaires, scores, and handoff
• Auth · 7m Designing break-glass emergency access and account recovery UI in Figma: bypass flows, audit, and handoff
• Data · 7m Designing security posture dashboard and compliance checklist UI in Figma: scores, gaps, and handoff
• Data · 8m Designing content classification and sensitivity labels UI in Figma: tagging, inheritance, and handoff
• Admin · 8m Designing third-party app approvals and marketplace UI in Figma: OAuth consent, allowlists, and handoff
• Privacy · 7m Designing data retention policies and auto-deletion UI in Figma: lifecycle rules and handoff
• Admin · 7m Designing DLP and external sharing restrictions UI in Figma: policy controls and handoff
• Data · 7m Designing compliance exports and legal hold UI in Figma: GDPR, eDiscovery, and handoff
• Auth · 7m Designing IP allowlist and network restrictions UI in Figma: access control and handoff
• Admin · 7m Designing member invitations and pending invites UI in Figma: bulk invite, resend, and handoff
• Admin · 7m Designing member offboarding and deprovisioning UI in Figma: removal, transfer, and handoff
• Admin · 7m Designing custom roles and permission templates UI in Figma: RBAC builder, presets, and handoff
• Auth · 7m Designing domain verification and SSO domain management UI in Figma: DNS, claimed domains, and handoff
• Admin · 6m Designing organization billing and seat management UI in Figma: plans, invoices, and usage
• Admin · 6m Designing SCIM and directory sync UI in Figma: provisioning, groups, and IdP handoff
• Admin · 8m Designing team member roles and permissions UI in Figma: invites, RBAC, and admin settings
• Admin · 8m Designing webhooks and event subscriptions UI in Figma: endpoints, secrets, retries, and delivery logs
• Auth · 7m Designing API keys and personal access tokens UI in Figma: scopes, rotation, and developer security settings
• Auth · 8m Designing suspicious login alerts and account recovery UI in Figma: fraud signals, lockouts, and secure reset flows
• Auth · 7m Designing active sessions and device management UI in Figma: trusted devices, sign out everywhere, and session lists
• Data · 7m Designing audit log and security activity UI in Figma: sign-in history, alerts, and account event feeds
• Auth · 7m Designing session timeout and re-authentication UI in Figma: idle warnings, expired sessions, and step-up auth
• Auth · 8m Designing SSO and enterprise login UI in Figma: domain discovery, IdP buttons, and admin setup
• Auth · 7m Designing connected accounts and OAuth linking UI in Figma: social sign-in, app permissions, and unlink flows
• Auth · 8m Designing passkeys and passwordless login UI in Figma: WebAuthn setup, biometrics, and sign-in flows
• Privacy · 7m Designing privacy settings and data management UI in Figma: download data, delete account, and consent
• Auth · 8m Designing two-factor authentication and security settings UI in Figma: MFA setup, backup codes, and trusted devices
• Auth · 7m Designing email verification and OTP UI in Figma: codes, links, states, and handoff
• Admin · 7m Designing notification preferences and communication settings UI in Figma: channels, toggles, and compliance
• Commerce · 6m Designing guest checkout and account creation UI in Figma: friction, prompts, and post-purchase handoff
• Auth · 7m Designing login, registration, and password recovery UI in Figma: auth flows, states, and handoff
• Data · 7m Designing account dashboard and my account UI in Figma: navigation, orders, and settings handoff
• Commerce · 7m Designing mini cart and cart drawer UI in Figma: slide-over patterns, line items, and handoff
• Commerce · 6m Designing product variant selectors and swatches UI in Figma: color, size, and handoff
• Commerce · 7m Designing subscription and recurring purchase UI in Figma: frequency, pricing, and handoff
• Commerce · 6m Designing bundle deals and upsell UI in Figma: kits, frequently bought together, and handoff
• Commerce · 6m Designing order confirmation and thank you page UI in Figma: receipts, next steps, and handoff
• Commerce · 7m Designing buy now, pay later and installment UI in Figma: checkout, PDP, and payment handoff
• Commerce · 7m Designing product reviews and Q&A UI in Figma: ratings, filters, and submission flows
• Commerce · 7m Designing loyalty programs and rewards UI in Figma: points, tiers, and checkout redemption
• Commerce · 8m Designing store locator and pickup UI in Figma: map, inventory, and checkout handoff
• Commerce · 6m Designing category landing pages in Figma: hero, subcategories, and PLP handoff
• Commerce · 6m Designing free shipping progress bar UI in Figma: thresholds, cart drawer, and handoff
• Commerce · 7m Designing product image gallery and zoom UI in Figma: thumbnails, lightbox, and handoff
• Commerce · 6m Designing recently viewed products UI in Figma: rails, persistence, and handoff
• Commerce · 6m Designing flash sale and countdown timer UI in Figma: urgency, badges, and handoff
• Commerce · 7m Designing product quick view UI in Figma: modal patterns, variants, and handoff
• Commerce · 6m Designing size guides and size selector UI in Figma: charts, fit hints, and handoff
• Commerce · 6m Designing sticky add-to-cart bar UI in Figma: scroll behavior, variants, and handoff
• Commerce · 7m Designing back-in-stock and notify me UI in Figma: alerts, email capture, and handoff
• Commerce · 7m Designing product recommendations UI in Figma: rails, bundles, and handoff
• Commerce · 7m Designing compare products UI in Figma: tables, sticky headers, and handoff
• Commerce · 8m Designing payment methods UI in Figma: cards, wallets, BNPL, and handoff
• Commerce · 8m Designing gift cards and vouchers UI in Figma: balance, redemption, and handoff
• Commerce · 8m Designing saved addresses and address book UI in Figma: checkout, defaults, and handoff
• Commerce · 8m Designing coupons and promo codes UI in Figma: discounts, validation, and handoff
• Commerce · 8m Designing returns and refunds UI in Figma: wizard, labels, and handoff
• Commerce · 7m Designing order history and order tracking UI in Figma: status, timeline, and handoff
• Commerce · 7m Designing wishlist and save-for-later UI in Figma: hearts, lists, and handoff
• Commerce · 8m Designing product detail pages in Figma: gallery, variants, and handoff
• Commerce · 7m Designing product listing and grid UI in Figma: filters, sort, and handoff
• Commerce · 7m Designing price tags and pricing UI in Figma: sale, compare-at, and handoff
• Commerce · 7m Designing shopping cart and checkout UI in Figma: line items, totals, and handoff
• Navigation · 6m Designing breadcrumbs in Figma: hierarchy, truncation, and handoff
• Commerce · 6m Designing rating stars and review UI in Figma: patterns, states, and handoff
• Forms · 7m Designing segmented controls and radio groups in Figma: patterns, states, and handoff
• Forms · 7m Designing toggle switches and checkboxes in Figma: states, groups, and handoff
• Forms · 8m Designing combobox and autocomplete UI in Figma: patterns, states, and handoff
• Forms · 7m Designing sliders and range inputs in Figma: patterns, states, and handoff
• Forms · 9m Designing date pickers and calendar UI in Figma: patterns, states, and handoff
• Forms · 8m Designing file upload and drag-drop UI in Figma: patterns, states, and handoff
• Feedback · 8m Designing avatars and user profile UI in Figma: sizes, states, and handoff
• Navigation · 8m Designing sidebars and navigation drawers in Figma: patterns, states, and handoff
• Feedback · 7m Designing accordions and collapsible panels in Figma: patterns, states, and handoff
• Navigation · 8m Designing search UI in Figma: bars, filters, and results
• Navigation · 7m Designing pagination in Figma: patterns, states, and handoff
• Feedback · 8m Designing progress indicators and steppers in Figma: patterns, states, and handoff
• Feedback · 8m Designing inline alerts and banners in Figma: patterns, tone, and handoff
• Feedback · 7m Designing loading states and skeleton screens in Figma: patterns, timing, and handoff
• Feedback · 7m Designing empty states in Figma: illustrations, copy, and handoff
• Feedback · 7m Designing toasts and snackbars in Figma: patterns, timing, and handoff
• Feedback · 7m Designing badges and chips in Figma: status tags, filters, and handoff
• Feedback · 7m Designing tooltips and popovers in Figma: placement, triggers, and handoff
• Feedback · 6m Designing cards in Figma: layouts, variants, and handoff
• Navigation · 6m Designing navigation and tabs in Figma: patterns, states, and handoff
• Feedback · 6m Designing modals and dialogs in Figma: overlays, focus traps, and handoff
• Forms · 6m Designing forms in Figma: inputs, validation states, and handoff that engineers trust