Updated
Fitness app dashboard
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.
Updated
Preview
Dashboard, Analytics, from the Fitness page of the Appetite UI Figma file. The theme switch shows the dark frames.
| Screen | What it shows |
|---|---|
| Dashboard | The day: a week strip, activity rings, heart rate, sleep and the next workout |
| Analytics | Training time for a period and weight against a target |
Which components carry the dashboard pattern?
The kit's components, drawn live from the same tokens as the frames. Tap them: they behave as the Figma prototype does.
Quick Action Button
Navigation, four tabs
How does this screen follow the dashboard pattern?
The rules every dashboard screen in the kit follows, and what this one does with each.
| Rule | On the fitness app |
|---|---|
| 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. |
What is it built from?
Every control with a component is an instance of it, so one token change moves these screens with the rest of the file.
| 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 |
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; the components below are where the two systems draw the same need differently.
| Variable | iOS (ios-md) | Android |
|---|---|---|
platform/bar/bottom-height | 49 | 64 |
platform/min-touch-target | 44 | 48 |
platform/screen-padding | 16 | 16 |
| 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 |
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.