# Sign in and sign up screens

> Login and sign up screens from a Figma UI kit for iOS and Android apps: social first, form first and create account, with the welcome screen before them.

The way into an app, drawn as one welcome screen and three forms in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system. The two sign in layouts hold the same parts in the opposite order, so the choice between them is a choice of which way in you expect most people to take.

Page: https://www.appetiteui.com/screens/patterns/sign-in.

## Screens

| App | Screen | What it shows | Page |
| --- | --- | --- | --- |
| Onboarding flow | Welcome | A photograph with the logo on it, a headline, pagination dots and a way in or past | https://www.appetiteui.com/docs/screens-onboarding |
| Onboarding flow | Sign in, social first | Four round provider buttons above the email and password form | https://www.appetiteui.com/docs/screens-onboarding |
| Onboarding flow | Sign in, form first | The form and a Sign in button, then Apple and Google as wide buttons | https://www.appetiteui.com/docs/screens-onboarding |
| Onboarding flow | Sign up | Email, an optional phone number and a password with a hint, the Terms line and four provider buttons | https://www.appetiteui.com/docs/screens-onboarding |

## Rules

- Pick the first way in. Social first puts the provider buttons above the form, form first puts email and password above them. The order says which one most people should use.
- One divider, one choice. An or divider separates the two ways in. Nothing else sits between them, so the screen never reads as two forms.
- Recovery and the other path stay visible. Forgot password sits under the password field and the link to the other form sits under the button, on every variant.

## iOS and Material

| What it sets | iOS | Android | Variable |
| --- | --- | --- | --- |
| Control corner | 8 pt | Fully round | `platform/control/corner` |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Text field | iOS / Text Field | M3 / Text Field, Filled or Outlined, 56 high | Material has Enabled, Focused, Error and Disabled states |

## Questions

### Should social login come before the email form?

Put first the way most people will sign in. Social first suits consumer apps where most people have an Apple or Google account; form first suits work apps and accounts that already exist. Appetite UI draws both layouts from the same parts.

### What does a sign up screen need?

An email field, a password with its rule shown as a hint, a consent line for the Terms and the Privacy Policy, the create account button and a link back to sign in. Appetite UI’s Sign up adds an optional phone number and the provider buttons.

## Sources

1. [Apple Human Interface Guidelines: Sign in with Apple](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple)
2. [Apple Human Interface Guidelines: Managing accounts](https://developer.apple.com/design/human-interface-guidelines/managing-accounts)
3. [Material Design 3: Text fields](https://m3.material.io/components/text-fields/overview)

## Related

- Docs: [Onboarding app screens](https://www.appetiteui.com/docs/screens-onboarding)
- Docs: [Input](https://www.appetiteui.com/docs/input)
- Docs: [Button](https://www.appetiteui.com/docs/button)
- Docs: [Divider](https://www.appetiteui.com/docs/divider)
- Glossary: [Touch target](https://www.appetiteui.com/academy/glossary/touch-target)
- Glossary: [Corner radius](https://www.appetiteui.com/academy/glossary/corner-radius)
- Article: [Mobile onboarding screen patterns for iOS and Android](https://www.appetiteui.com/blog/mobile-onboarding-screen-patterns)