Onboarding and walkthroughs
Mobile20 components128 variants4 recreations
Mobile onboarding screens from splash to celebration, with questions, goals, permissions and tutorials.
$9, or included with Pro
Auth and sign-in (Mobile)
Mobile packFlows
Mobile sign-in screens and parts, from social buttons and passkeys to codes, two-factor and locked accounts.
- components
- 15
- variants
- 83
- recreations
- 4
- themes
- 5
Also for desktop: Auth and sign-in
What’s inside
14 sign-in patterns for phone apps: welcome, email and password, magic link, one-time code, phone sign-up, Face ID, passkey, two-factor, terms and account locked. Provider buttons use the real Google, Apple, Facebook and Microsoft marks and their own wording. Every screen has its states in light and dark, comfortable and compact, with notes on use, anatomy, keyboard and screen readers.
- Google, Apple, Facebook and Microsoft buttons with real marks
- 8 form field sets shared with the Form fields (Mobile) pack
- 4 recreations of sign-in flows from well-known apps
Provider button
30 variants
- Default
- Pressed
- Focus
- Disabled
- Loading
Social sign-in stack
Free sample6 variants
- Default
- Loading
Welcome
2 variants
- Default
- Loading
Email entry
4 variants
- Empty
- Typing
- Invalid
- Checking
Password log-in
5 variants
- Default
- Shown
- Error
- Caps lock
- Loading
Magic link sent
3 variants
Code verification
5 variants
- Empty
- Partial
- Error
- Verifying
- Expired
Phone sign-up
4 variants
- Empty
- Filled
- Invalid
- Sending
Forgot password
3 variants
Biometric prompt
4 variants
Passkey
4 variants
Create password
4 variants
- Empty
- Weak
- Strong
- Error
Terms consent
3 variants
- Unchecked
- Checked
- Error
Two-factor
4 variants
Account locked
2 variants
- Figma file
- SuperDuper Pack: Auth and sign-in (Mobile)
- Themes
- Light, Dark, Light high contrast, Dark high contrast and Wireframe
- Densities
- Comfortable and Compact
- Also in the file
- Usage and accessibility notes, motion specs, Figma variables
- Covers 4 screen patterns
- Sign-up, Log-in, Verification code and Forgot password
How Spotify, Airbnb and Revolut and others do it
Recreations of real products, so you can compare approaches side by side. They are approximate, built from public product knowledge, with placeholder data and no third-party artwork.
Music streaming log-in
Recreated from Spotify
Stays phone sign-up
Recreated from Airbnb
Fintech code entry
Recreated from Revolut
Education sign-up
Recreated from Duolingo
Not affiliated with, endorsed or sponsored by Spotify, Airbnb, Revolut and Duolingo. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the social sign-in stack full size, free
A stack of two to four equal-sized provider buttons with real marks and vendor wording, plus a loading state. All 6 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More flows packs
Paywalls and pricing
Mobile14 components80 variants6 recreations
Mobile paywalls, plan cards, trial timelines, upsell sheets and offers, built around honest pricing.
$9, or included with Pro
Checkout and payments
Mobile14 components43 variants4 recreations
Mobile checkout from basket to receipt: addresses, delivery slots, cards, wallets, promo codes, tips and orders.
$9, or included with Pro
Questions about the auth and sign-in pack
One Figma file: SuperDuper Pack: Auth and sign-in (Mobile). It has 15 components with 83 variants, 4 recreations, and notes on when to use each part. Everything uses Figma variables, so you can change the colours and type to match your product.