Skip to content

Updated

Copy page

Sign in and sign up screens

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.

Copy page

Updated

On this page
  1. Screens
  2. Live components
  3. The rules
  4. iOS and Material
  5. Related
  6. Get the file

Screens

Every screen of the Appetite UI Figma file that shows the pattern, light and dark. The theme switch shows the dark frames.

Sign in and sign up screens393 x 852 each, Light and Dark
Onboarding welcome screen: a full bleed photograph of an athlete lifting a barbell with the Appetite UI logo on it, the headline Track your fitness journey, one line of support, three pagination dots, a Get started button and a Skip for now linkOnboarding welcome screen in dark mode: a full bleed photograph of an athlete lifting a barbell with the Appetite UI logo on it, the headline Track your fitness journey, one line of support, three pagination dots, a Get started button and a Skip for now link
Onboarding, Welcome
Onboarding sign in screen with social buttons first: Welcome back, four round buttons for X, Apple, Facebook and Google, an or divider, Email and Password fields with a Forgot password link, and a Sign in button above the Sign up linkOnboarding sign in screen with social buttons first in dark mode: Welcome back, four round buttons for X, Apple, Facebook and Google, an or divider, Email and Password fields with a Forgot password link, and a Sign in button above the Sign up link
Onboarding, Sign in, social first
Onboarding sign in screen with the form first: Welcome back, Email and Password fields with a Forgot password link, a Sign in button, an or divider and wide Sign in with Apple and Sign in with Google buttonsOnboarding sign in screen with the form first in dark mode: Welcome back, Email and Password fields with a Forgot password link, a Sign in button, an or divider and wide Sign in with Apple and Sign in with Google buttons
Onboarding, Sign in, form first
Onboarding sign up screen: Create account with Email, optional Phone with a country flag and Password fields, a password hint, a Terms and Privacy Policy consent line, a Create account button, four round social buttons and a link to sign inOnboarding sign up screen in dark mode: Create account with Email, optional Phone with a country flag and Password fields, a password hint, a Terms and Privacy Policy consent line, a Create account button, four round social buttons and a link to sign in
Onboarding, Sign up
Screens, app, screen, what it shows, page
AppScreenWhat it showsPage
OnboardingWelcomeA photograph with the logo on it, a headline, pagination dots and a way in or pastDocs
OnboardingSign in, social firstFour round provider buttons above the email and password formDocs
OnboardingSign in, form firstThe form and a Sign in button, then Apple and Google as wide buttonsDocs
OnboardingSign upEmail, an optional phone number and a password with a hint, the Terms line and four provider buttonsDocs

Which components carry the sign in pattern?

Drawn live from the kit's tokens, at the kit's geometry. Tap them: they behave as the Figma prototype does.

Sign in, live componentsKit geometry, light and dark

Text Input, Email

Social Button, icon only

Button, Fill and Link

What does every sign in screen do?

The rules the screens above share. Each app's page says how its screen applies them.

Rules, rule, why
RuleWhy
Pick the first way inSocial 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 choiceAn 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 visibleForgot password sits under the password field and the link to the other form sits under the button, on every variant.

What changes between iOS and Material?

The frames are drawn in the ios-md Platform mode. Switch a frame to android and these variables take the Material values.

Platform variables, variable, iOS, Android
VariableiOS (ios-md)Android
platform/control/corner8Full (9999)
platform/min-touch-target4448
Counterparts, component, iOS, Material 3, what differs
ComponentiOSMaterial 3What differs
Text fieldiOS / Text FieldM3 / Text Field, Filled or Outlined, 56 highMaterial has Enabled, Focused, Error and Disabled states

Start from these screens.

Every frame on this page is part of the Appetite UI file, drawn from its components and bound to its variables, so one brand edit moves every screen in light and dark.

The file holds 589 variables in 6 collections and exports its token values to SwiftUI, Jetpack Compose, Flutter and CSS. Solo covers one designer and Team up to ten people. You pay once and keep lifetime updates. Price goes up Nov 1

The read-only Figma preview opens the whole file, every screen and every variable, before you buy.

Get lifetime accessOpen the Figma previewSee the plans