# Fitness app dashboard

> A fitness and health app dashboard for Figma: a week strip, activity rings, heart rate, sleep and the next workout, with the analytics screen behind it.

The day at a glance in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: Today with a week strip, Move, Exercise and Stand beside three activity rings, Heart rate and Sleep cards, and the next workout on a photo. Analytics turns the same data into training time per day.

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

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| Dashboard | The day: a week strip, activity rings, heart rate, sleep and the next workout | Avatar, Button, Button / Overlay (Button), Sparkline (Chart), Navigation |
| Analytics | Training time for a period and weight against a target | Top Bar, Segmented Control, Chart / Bar - Stacked (Chart), Navigation |

- Dashboard, light: Fitness app Dashboard screen: Today with a week strip and Wednesday 30 selected, Move 486 of 600 kcal, Exercise 38 of 45 min and Stand 9 of 12 h beside three activity rings, Heart rate 62 bpm and Sleep 7h 42m cards, and an Up next Legs and Power workout card on a photo above the tab bar
  Picture: https://www.appetiteui.com/images/au_fitness_dashboard_light.webp (dark: https://www.appetiteui.com/images/au_fitness_dashboard_dark.webp)
- Analytics, light: Fitness app Analytics screen: a Week, Month and Year switch, Training time 382 min up 12.4% on last week, a stacked bar chart of Strength, Cardio and Mobility for each day, and a Weight progress card with 74.6 kg against a 72.5 kg target
  Picture: https://www.appetiteui.com/images/au_fitness_analytics_light.webp (dark: https://www.appetiteui.com/images/au_fitness_analytics_dark.webp)

## How the screen follows the dashboard pattern

| Rule | On this screen |
| --- | --- |
| One thing leads | The activity rings and their three numbers lead the screen, Move 486 of 600 kcal first; heart rate and sleep follow in smaller cards. |
| Actions sit next to what they act on | The next workout sits on a photo card with its start button on the picture, an Overlay Button, so the one thing to do today is on the first screen. |
| The tab bar is the way out | Dashboard and Analytics both end on the Navigation tab bar; Analytics adds a Week, Month and Year Segmented Control above its stacked bar chart. |

## Built from

| Component | Screens |
| --- | --- |
| Avatar | Dashboard |
| Button | Dashboard |
| Button / Overlay (Button) | Dashboard |
| Sparkline (Chart) | Dashboard |
| Navigation | Dashboard, Analytics |
| Top Bar | Analytics |
| Segmented Control | Analytics |
| Chart / Bar - Stacked (Chart) | Analytics |

## 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 |
| --- | --- | --- | --- |
| Tab bar height | 49 pt | 64 dp | `platform/bar/bottom-height` |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |
| Screen side padding | 16 pt | 16 dp | `platform/screen-padding` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Navigation | iOS / Tab Bar, floating capsule 62 high, two to five tabs | M3 / Navigation bar, 412 × 80, three to five items | Material is a full width bar with a separate 24 high Gesture Navigation component, iOS floats on glass |
| 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 profile](https://www.appetiteui.com/screens/fitness/profile)
- 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: [Dashboard screens](https://www.appetiteui.com/screens/patterns/dashboard)
- Finance app: [Finance app dashboard](https://www.appetiteui.com/screens/finance/dashboard)
- Social media app: [Social media app feed](https://www.appetiteui.com/screens/social/feed)
- Food delivery app: [Food delivery app home](https://www.appetiteui.com/screens/food-delivery/home)
- Task manager app: [Task manager app home](https://www.appetiteui.com/screens/tasks/my-work)
- Docs: [Navigation](https://www.appetiteui.com/docs/navigation)
- Docs: [Button](https://www.appetiteui.com/docs/button)
- Docs: [Platform Bridge](https://www.appetiteui.com/docs/platform-bridge)
- Glossary: [Tab bar](https://www.appetiteui.com/academy/glossary/tab-bar)
- Glossary: [Touch target](https://www.appetiteui.com/academy/glossary/touch-target)
- Glossary: [Safe area](https://www.appetiteui.com/academy/glossary/safe-area)
- Article: [How to design one app for iOS and Android in Figma](https://www.appetiteui.com/blog/design-one-app-for-ios-and-android-in-figma)
- Article: [Touch target size on iOS and Android: 44 pt, 48 dp and the WCAG minimum](https://www.appetiteui.com/blog/touch-target-size-ios-android)