# Fitness app workout screen

> A workout in progress for a Figma fitness app: timer, set, reps, weight and player controls over a photo, and the exercise library it starts from.

The screen a phone shows on the gym floor, drawn in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: Barbell Back Squats over a full height photo, a 04:32 timer, set 2 of 4, 12 reps, 84 kg, and previous, play and next. The exercise library behind it filters programs by All, Strength, Cardio and Yoga.

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

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| Exercise | A workout in progress with a timer, set, reps, weight and player controls | Top Bar, Button |
| Library | Programs and exercises, filtered by category | Top Bar, Chip, Card, Badge / Overlay (Badge), Section Header, Navigation |

- Exercise, light: Fitness app Exercise screen: a full height photo of a barbell back squat under a Legs and Power title with close and confirm buttons, Barbell Back Squats as the current exercise, a 04:32 timer, set 2 of 4, 12 reps, 84 kg, and previous, play and next controls
  Picture: https://www.appetiteui.com/images/au_fitness_exercise_light.webp (dark: https://www.appetiteui.com/images/au_fitness_exercise_dark.webp)
- Library, light: Fitness app Exercise library screen: All, Strength, Cardio and Yoga chips, a Featured Legs and Power program card with a photo, a heart button and 6-week program details, and a Strength basics list that starts with Deadlift
  Picture: https://www.appetiteui.com/images/au_fitness_library_light.webp (dark: https://www.appetiteui.com/images/au_fitness_library_dark.webp)

## How the screen follows the detail pattern

| Rule | On this screen |
| --- | --- |
| The action rides along | The player controls are the action that rides along: previous, play and next sit at the bottom, where a thumb finds them mid set. |
| Proof before price | There is no proof to show during a set, so the screen leads with the numbers that change, the timer first, and leaves the program details to the library. |
| Buttons on photos are overlay buttons | Close and confirm sit over the photo as Buttons in the Top Bar, and the Library cards carry Badge / Overlay on their photos. |

## Built from

| Component | Screens |
| --- | --- |
| Top Bar | Exercise, Library |
| Button | Exercise |
| Chip | Library |
| Card | Library |
| Badge / Overlay (Badge) | Library |
| Section Header | Library |
| Navigation | Library |

## 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 |
| --- | --- | --- | --- |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |
| List row, minimum height | 44 pt | 56 dp | `platform/list-row/min-height` |

| 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 |

## Related

- Fitness app: [Fitness app dashboard](https://www.appetiteui.com/screens/fitness/dashboard)
- Fitness app: [Fitness app profile](https://www.appetiteui.com/screens/fitness/profile)
- Docs: [Fitness app screens, every screen and token](https://www.appetiteui.com/docs/screens-fitness)
- Pattern: [Detail screens](https://www.appetiteui.com/screens/patterns/detail)
- Food delivery app: [Food delivery app restaurant menu](https://www.appetiteui.com/screens/food-delivery/restaurant-menu)
- Docs: [Button](https://www.appetiteui.com/docs/button)
- Docs: [Rating](https://www.appetiteui.com/docs/rating)
- Docs: [Badge](https://www.appetiteui.com/docs/badge)
- Glossary: [Touch target](https://www.appetiteui.com/academy/glossary/touch-target)