Skip to content

Updated

Copy page

Profile screens

Who the person is and what they can change, drawn four ways in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system. A profile that others see leads with the person; an account that only its owner sees leads with the rows.

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.

Profile screens393 x 852 each, Light and Dark
Social app Profile screen: Noemi Varga with a verified mark, a bio and a link, 124 posts, 12k followers and 480 following, and a grid of photos above the tab barSocial app Profile screen in dark mode: Noemi Varga with a verified mark, a bio and a link, 124 posts, 12k followers and 480 following, and a grid of photos above the tab bar
Social media app, Profile
Fitness app Profile screen: Noemi Varga with 42 workouts, a 12 day streak and 850 total minutes, an Achievements card with Goal hit, 50 lifts, 7-day streak and Yoga week, and an Account settings list with Notifications and Privacy rowsFitness app Profile screen in dark mode: Noemi Varga with 42 workouts, a 12 day streak and 850 total minutes, an Achievements card with Goal hit, 50 lifts, 7-day streak and Yoga week, and an Account settings list with Notifications and Privacy rows
Fitness app, Profile
Booking app Profile screen: Leila Okonkwo with her photo, four rows for Personal information, Payments and payouts, Notifications and Login and security, and a Log out button above a floating tab barBooking app Profile screen in dark mode: Leila Okonkwo with her photo, four rows for Personal information, Payments and payouts, Notifications and Login and security, and a Log out button above a floating tab bar
Booking app, Profile
Foodie app Account screen: Matteo Ribeiro with his photo, rows for Favorites, Addresses, Payment methods, Notifications and Help, and a Log out button above a floating tab barFoodie app Account screen in dark mode: Matteo Ribeiro with his photo, rows for Favorites, Addresses, Payment methods, Notifications and Help, and a Log out button above a floating tab bar
Food delivery app, Account
Screens, app, screen, what it shows, page
AppScreenWhat it showsPage
Social media appProfileA profile header, counts and a photo gridSocial media app profile
Fitness appProfileTotals, achievements and account settingsFitness app profile
Booking appProfileThe account rows and a Log out buttonDocs
Food delivery appAccountThe account rows and a Log out buttonDocs

Which components carry the profile pattern?

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

Profile, live componentsKit geometry, light and dark

Avatar, photo

List, chevron and toggle

Personal informationName, email and phone

Button, Weak

What does every profile screen do?

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

Rules, rule, why
RuleWhy
Decide who the screen is forA public profile shows counts and work to visitors. A private account shows rows to its owner. Mixing the two puts settings in front of strangers.
Settings are list rowsEvery editable thing on a profile is a List row with a trailing chevron or switch, so the screen follows the platform’s row height on its own.
Log out is a button, not a rowWhere an account ends on Log out, it is a Button below the rows, so it never reads as one more setting.

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/list-row/min-height4456
platform/bar/top-height4464
platform/min-touch-target4448
Counterparts, component, iOS, Material 3, what differs
ComponentiOSMaterial 3What differs
ListiOS / List with a 44 minimum rowM3 / List Item, 56, 72 or 88 high by LinesMaterial sets the row height by lines of text, iOS sets only a minimum
Top bariOS / Toolbar on a 44 high top barM3 / Top app bar, Small 64 high, Medium 112, Large 152Material has four bar types: Small, Center-aligned, Medium and Large

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