# Settings screens

> Settings screens from a Figma UI kit for iOS and Android apps: a grouped menu, preferences with switches, account details and a card’s controls, light and dark.

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.

Page: https://www.appetiteui.com/screens/patterns/settings.

## Screens

| App | Screen | What it shows | Page |
| --- | --- | --- | --- |
| Settings flow | Menu | Nine rows in three groups, Profile, App and Integrations, the last one cut off at the bottom edge | https://www.appetiteui.com/docs/screens-settings |
| Settings flow | Selection | The Preferences list: values, four switches and two links to help | https://www.appetiteui.com/docs/screens-settings |
| Settings flow | Account setup | A photo, three fields and a Change password button | https://www.appetiteui.com/docs/screens-settings |
| Finance app | Card settings | The card and the switches and limit that control it | https://www.appetiteui.com/docs/screens-finance |

## Rules

- Group, then label the group. Rows sit in groups under a short heading. A long flat list makes people read every row to find one.
- A switch acts at once. A 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 height. The List row reads its minimum height from the Platform collection, so one frame is right on both systems.

## iOS and Material

| What it sets | iOS | Android | Variable |
| --- | --- | --- | --- |
| List row, minimum height | 44 pt | 56 dp | `platform/list-row/min-height` |
| Switch track width | 64 pt | 52 dp | `platform/switch/track-width` |
| Switch track height | 28 pt | 32 dp | `platform/switch/track-height` |
| Top bar height | 44 pt | 64 dp | `platform/bar/top-height` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Toggle | iOS / Toggle, 64 × 28 | M3 / Switch, 52 × 32 | Material has a 24 thumb inside the track, iOS has a 38 × 24 knob that becomes a glass lens when pressed |
| List | iOS / List with a 44 minimum row | M3 / List Item, 56, 72 or 88 high by Lines | Material sets the row height by lines of text, iOS sets only a minimum |
| Top bar | iOS / Toolbar on a 44 high top bar | M3 / Top app bar, Small 64 high, Medium 112, Large 152 | Material has four bar types: Small, Center-aligned, Medium and Large |

## Questions

### How tall is a settings row on iOS and Android?

In Appetite UI a List row is at least 44 points tall on iOS and 56 dp on Android, read from the Platform collection, so one settings frame is right on both.

### Should a setting change at once or wait for Save?

A switch changes at once. A value that needs confirming goes on a row with a chevron to its own screen, or behind a confirm button in the top bar, as Appetite UI’s Account setup does.

## Sources

1. [Apple Human Interface Guidelines: Toggles](https://developer.apple.com/design/human-interface-guidelines/toggles)
2. [Apple Human Interface Guidelines: Lists and tables](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables)
3. [Material Design 3: Switch](https://m3.material.io/components/switch/overview)
4. [Material Design 3: Lists](https://m3.material.io/components/lists/overview)

## Related

- Docs: [Settings app screens](https://www.appetiteui.com/docs/screens-settings)
- Docs: [List](https://www.appetiteui.com/docs/list)
- Docs: [Toggle](https://www.appetiteui.com/docs/toggle)
- Docs: [Top Bars](https://www.appetiteui.com/docs/top-bars)
- Glossary: [Toggle and switch](https://www.appetiteui.com/academy/glossary/toggle-switch)
- Glossary: [List row](https://www.appetiteui.com/academy/glossary#list-row)
- Glossary: [Variable modes](https://www.appetiteui.com/academy/glossary/variable-modes)
- Article: [Settings screen design for iOS and Android](https://www.appetiteui.com/blog/settings-screen-design-ios-android)