Skip to content

Updated

Copy page

Settings screens

Grouped rows, switches and the odd field, drawn in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system. A settings screen is the one place where the iOS and Material numbers differ on almost every row.

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.

Settings screens393 x 852 each, Light and Dark
Settings menu screen: a Settings top bar with a back button and rows grouped under Profile, App and Integrations, from Edit profile, Body measurements and Fitness goals to Notifications, Units, Language, Health data and Wearable devices, each with a leading icon tile and a chevronSettings menu screen in dark mode: a Settings top bar with a back button and rows grouped under Profile, App and Integrations, from Edit profile, Body measurements and Fitness goals to Notifications, Units, Language, Health data and Wearable devices, each with a leading icon tile and a chevron
Settings, Menu
Preferences screen: a top bar with a back button and a blue confirm button, and rows under General, Notifications and Support: Language English, Currency USD, Dark mode off, Push notifications and Email alerts switched on, SMS alerts off, Help center and Live chatPreferences screen in dark mode: a top bar with a back button and a blue confirm button, and rows under General, Notifications and Support: Language English, Currency USD, Dark mode, Push notifications and Email alerts switched on, SMS alerts off, Help center and Live chat
Settings, Selection
Account setup screen: a top bar with a back button and a blue confirm button, a profile photo with a Change avatar link, Name, Email and optional Phone fields with a country flag, and a Change password buttonAccount setup screen in dark mode: a top bar with a back button and a blue confirm button, a profile photo with a Change avatar link, Name, Email and optional Phone fields with a country flag, and a Change password button
Settings, Account setup
Finance app Card settings screen: an Appetite Debit card ending 4242, a Security and controls list with Freeze card, Online payments and Contactless switches, and a Monthly spending limit slider at $1,500 of $2,000Finance app Card settings screen in dark mode: an Appetite Debit card ending 4242, a Security and controls list with Freeze card, Online payments and Contactless switches, and a Monthly spending limit slider at $1,500 of $2,000
Finance app, Card settings
Screens, app, screen, what it shows, page
AppScreenWhat it showsPage
SettingsMenuNine rows in three groups, Profile, App and Integrations, the last one cut off at the bottom edgeDocs
SettingsSelectionThe Preferences list: values, four switches and two links to helpDocs
SettingsAccount setupA photo, three fields and a Change password buttonDocs
Finance appCard settingsThe card and the switches and limit that control itDocs

Which components carry the settings pattern?

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

Settings, live componentsKit geometry, light and dark

List, compact rows

LanguageEnglishHelp center

Toggle with label

What does every settings screen do?

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

Rules, rule, why
RuleWhy
Group, then label the groupRows sit in groups under a short heading. A long flat list makes people read every row to find one.
A switch acts at onceA Toggle inside a List row changes the setting the moment it moves. A row that needs a confirm button uses a value and a chevron instead.
Rows take the platform’s heightThe List row reads its minimum height from the Platform collection, so one frame is right on both systems.

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/switch/track-width6452
platform/switch/track-height2832
platform/bar/top-height4464
Counterparts, component, iOS, Material 3, what differs
ComponentiOSMaterial 3What differs
ToggleiOS / Toggle, 64 × 28M3 / Switch, 52 × 32Material has a 24 thumb inside the track, iOS has a 38 × 24 knob that becomes a glass lens when pressed
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