Designing passkeys and passwordless login UI in Figma: WebAuthn setup, biometrics, and sign-in flows

Quick answer

Passkeys replace passwords with device-bound cryptographic keys—users sign in with Face ID, Touch ID, Windows Hello, or a security key instead of typing a password. Design enrollment on the account security page (add passkey after login), a passkey-first sign-in screen with email lookup, native biometric prompts (browser/OS UI—annotate as external), and fallbacks to password or OTP when passkeys fail. List registered passkeys with device labels and remove actions. Start from the Figma guides hub and pair with login, 2FA security settings, and account dashboard guides.

---

Who this is for

• Product designers rolling out WebAuthn passkeys on login and account security pages.
• Design system teams standardizing passkey CTAs, device lists, and fallback auth across web and mobile.
• Engineers implementing conditional UI, discoverable credentials, and cross-device passkey sync.

---

Passkey vs password vs 2FA comparison

Method	User experience	When to prioritize
Passkey	One tap / biometric; phishing-resistant	Default for returning users on supported browsers
Password	Familiar; higher support burden	Fallback, legacy accounts, shared devices
2FA (TOTP/SMS)	Extra step after password	High-risk accounts; pair with passkeys as step-up
Magic link email	No password; inbox dependency	Low-friction guest or recovery path

Verdict: lead with passkey sign-in when the browser supports WebAuthn; keep password + 2FA as explicit fallbacks—not hidden behind broken passkey flows.

---

PasskeySignInForm anatomy

Part	Spec	Notes
Email field	Autocomplete username webauthn	Triggers discoverable credential prompt
Primary CTA	”Sign in with passkey”	Full width on mobile
Biometric hint	Icon row: Face ID / fingerprint / key	Sets expectation before OS prompt
Fallback link	”Use password instead”	Always visible—never trap users
Create account	”Sign up with passkey” on register	Same component, different copy
Error region	Cancelled, unsupported, no passkey found	Specific messages per failure
Loading	”Checking for passkeys…”	Brief—OS sheet appears quickly

PasskeySignInForm
├── Variant: mode=signIn | signUp
├── Variant: state=default | loading | error | unsupported
└── Layers:
    ├── BrandHeader
    ├── EmailField
    ├── PasskeyPrimaryButton
    ├── BiometricHintRow
    ├── FallbackPasswordLink
    ├── ErrorBanner
    └── CreateAccountLink

Reuse layout from login AuthForm—swap password fields for passkey CTA when authMethod=passkey.

---

Native biometric prompt (external UI)

Browsers and OSes render the actual WebAuthn sheet—you do not pixel-match it in Figma. Instead, add a spec frame labeled “System UI (not designed here)” with annotations:

Platform	What users see	Design note
iOS Safari	Face ID / Touch ID sheet with domain	Show wireframe placeholder + domain string
Android Chrome	Fingerprint or screen lock	Same placeholder pattern
macOS Safari	Touch ID or password	Annotate rpId domain
Windows	Windows Hello PIN or biometric
Security key	USB/NFC tap prompt	For enterprise flows

Verdict: one PasskeySystemPromptPlaceholder component with variants per platform; link to WebAuthn docs in Dev Mode for engineers.

---

Add passkey enrollment flow

Step	UI	Notes
1. Entry	”Add a passkey” row on security settings	Below or above 2FA section
2. Intro	Benefits: faster sign-in, phishing-resistant	Optional modal
3. Name passkey	Default: “MacBook Pro” or “iPhone 15”	Pre-fill from user agent
4. System prompt	Placeholder frame—user confirms biometric
5. Success	Toast + new row in passkey list	Email: “New passkey added”
6. Skip	”Maybe later” on optional prompts	Don’t block dashboard

AddPasskeyFlow
├── Variant: step=intro | naming | systemPrompt | success
├── Variant: context=settings | postLoginNudge
└── Layers:
    ├── PasskeyBenefitsCopy
    ├── PasskeyNameField
    ├── PasskeySystemPromptPlaceholder
    ├── SuccessBanner
    └── PasskeyListRow (after success)

Post-login nudge modal: “Secure your account with a passkey”—dismissible once per device; pair with notification preferences for security emails.

---

PasskeyList component

Element	Spec
Row label	User-editable name + created date
Device icon	Phone, laptop, security key
Sync badge	”Synced via iCloud Keychain” / “Google Password Manager”
Last used	Optional meta
Remove	Destructive; confirm modal
Empty	”No passkeys yet” + Add CTA
Limit note	”You can register up to 10 passkeys”

PasskeyList
├── Variant: state=empty | populated | removing
└── Layers:
    ├── PasskeyRow (repeat)
    │   ├── DeviceIcon
    │   ├── PasskeyName
    │   ├── SyncBadge (optional)
    │   ├── LastUsedMeta
    │   └── RemoveButton
    └── AddPasskeyButton

Cross-link privacy settings when account deletion must revoke all passkeys server-side.

---

Fallback and error states

Error	User message	Next action
User cancelled	”Sign-in cancelled”	Retry passkey or use password
No passkey for email	”No passkey found for this account”	Offer password sign-in or sign up
Unsupported browser	”Passkeys aren’t supported here”	Hide passkey CTA; show password only
Platform authenticator unavailable	”Set up Face ID or a screen lock on this device”	Link to device help
Cross-device timeout	”Use your phone to complete sign-in”	QR or hybrid transport UI
Revoked passkey	”This passkey was removed”	Remove stale row; password fallback

Design HybridTransportUI (optional): QR code on desktop that completes on phone—common for cross-device passkeys. Annotate as advanced; many teams defer to password fallback first.

---

Sign-up with passkey

Step	UI
1. Email capture	Verify uniqueness
2. Create passkey	System prompt immediately after email
3. Profile optional	Name, marketing opt-in—after passkey created
4. Success	Redirect to account dashboard

Verdict: don’t ask for password on passkey-only registration unless regulations require a backup factor—offer add password later in security settings instead.

---

Mobile layout

Pattern	Spec
Passkey button	Min 48px height; platform icon left
Email first	Single field above passkey CTA
Fallback	Sticky footer link “Sign in with password”
Enrollment	Full-screen steps; system sheet overlays
List rows	Swipe to remove or overflow menu

Test on real devices—passkey UX is mostly native; Figma prototypes should focus on your chrome, not the OS sheet.

---

Handoff checklist

Item	Dev Mode annotation
rpId	Registered domain for WebAuthn
Discoverable credentials	mediation: conditional for autofill UI
User verification	Required (userVerification: required)
Attestation	None vs enterprise policy
Passkey limit	Max credentials per account
Remove passkey API	DELETE + re-auth requirement
Fallback order	passkey → password → MFA
Email events	add passkey, remove passkey, sign-in from new device
a11y	Passkey button has clear name; errors in live region

Document cross-device strategy: sync via platform (Apple/Google) vs hybrid QR vs password fallback.

---

Common mistakes

Mistake	Why it hurts	Fix
Hiding password fallback	Users locked out on unsupported browsers	Always show “Use password”
Designing fake biometric UI	Devs can’t ship pixel-matched sheets	Use annotated placeholders
Passkey-only with no recovery	Lost device = lost account	Password, recovery email, or support path
Same copy for add vs sign-in	Confusing CTAs	”Sign in with passkey” vs “Add a passkey”
No email on passkey changes	User can’t detect account takeover	Notify on add/remove
Forcing passkey before email verify	Invalid credentials on unverified accounts	Verify email first
Generic “Something went wrong”	Support tickets	Map WebAuthn error codes to copy
Ignoring shared computers	Passkeys persist on public PCs	”Not this device?” + password

---

Recommended workflow

1. Extend AuthForm with authMethod=passkey variant from login guide.
2. Add PasskeyList to security settings page frame.
3. Design AddPasskeyFlow with naming step and system prompt placeholder.
4. Spec all error states—cancelled, unsupported, not found.
5. Design post-login nudge modal (optional enrollment).
6. Wire fallbacks to password and OTP flows.
7. Annotate native UI frames per platform for engineering.
8. Prototype sign-in on 375px with fallback link always visible.

---

FAQ

Replace passwords entirely?

Phased rollout: passkey-first with password fallback. Retire password only when analytics show low usage and support is trained.

Passkeys and 2FA together?

Passkeys are multi-factor (device + biometric). Extra TOTP is optional for admin roles—don’t double-prompt everyone.

Enterprise security keys?

Add SecurityKeyRow variant with USB/NFC icon and “Register YubiKey” copy—same list component, different device icon.

Passkeys on ecommerce guest checkout?

Usually account-only—guest checkout stays email-based. Offer passkey after account creation from order confirmation.

Sync across devices?

Show sync badge when platform reports iCloud/Google sync—users expect passkeys to “just work” on new phones.

---

Next steps

• Design login, registration, and password recovery UI in Figma — AuthForm base and social row
• Design two-factor authentication and security settings UI in Figma — security page IA for passkey row
• Design email verification and OTP UI in Figma — fallback verification
• Design account dashboard and my account UI in Figma — entry to security settings
• Design privacy settings and data management UI in Figma — credential revocation on account delete