# Fitness app profile

> A fitness app profile for Figma: workouts, streak and total minutes, an achievements card and the account settings list, from Appetite UI components.

A profile that is both a record and a settings page, drawn in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: Noemi Varga with 42 workouts, a 12 day streak and 850 total minutes, an Achievements card, and Account settings with Notifications and Privacy.

Page: https://www.appetiteui.com/screens/fitness/profile. Every screen of the app: https://www.appetiteui.com/docs/screens-fitness.

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| Profile | Totals, achievements and account settings | Top Bar, Avatar, Quick Action Button, Section Header, List, Toggle, Navigation |

- Profile, light: 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 rows
  Picture: https://www.appetiteui.com/images/au_fitness_profile_light.webp (dark: https://www.appetiteui.com/images/au_fitness_profile_dark.webp)

## How the screen follows the profile pattern

| Rule | On this screen |
| --- | --- |
| Decide who the screen is for | Only its owner sees this profile, so it leads with her own totals rather than with followers, and the achievements are rewards for her, not a public wall. |
| Settings are list rows | Notifications and Privacy are List rows, one with a Toggle, under a Section Header that says Account settings. |
| Log out is a button, not a row | There is no Log out button on this profile: account changes live in the settings rows, and the rest of the screen is the record. |

## Built from

| Component | Screens |
| --- | --- |
| Top Bar | Profile |
| Avatar | Profile |
| Quick Action Button | Profile |
| Section Header | Profile |
| List | Profile |
| Toggle | Profile |
| Navigation | Profile |

## iOS and Material

The frames are drawn in the ios-md Platform mode; an android frame reads the Material values.

| What it sets | iOS | Android | Variable |
| --- | --- | --- | --- |
| List row, minimum height | 44 pt | 56 dp | `platform/list-row/min-height` |
| Top bar height | 44 pt | 64 dp | `platform/bar/top-height` |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| 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 |

## Related

- Fitness app: [Fitness app dashboard](https://www.appetiteui.com/screens/fitness/dashboard)
- Fitness app: [Fitness app workout screen](https://www.appetiteui.com/screens/fitness/workout)
- Docs: [Fitness app screens, every screen and token](https://www.appetiteui.com/docs/screens-fitness)
- Pattern: [Profile screens](https://www.appetiteui.com/screens/patterns/profile)
- Social media app: [Social media app profile](https://www.appetiteui.com/screens/social/profile)
- Docs: [Avatar](https://www.appetiteui.com/docs/avatar)
- Docs: [List](https://www.appetiteui.com/docs/list)
- Glossary: [List row](https://www.appetiteui.com/academy/glossary#list-row)
- Glossary: [Touch target](https://www.appetiteui.com/academy/glossary/touch-target)
- Article: [Settings screen design for iOS and Android](https://www.appetiteui.com/blog/settings-screen-design-ios-android)