Updated
Social media app feed
The home of a social app in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: a For you feed with a row of stories and a post by amara_diallo, and an Explore screen of photos under a Search field and #trending, #fitness, #travel and #fashion chips.
Updated
Preview
Home, Explore, from the Social page of the Appetite UI Figma file. The theme switch shows the dark frames.
| Screen | What it shows |
|---|---|
| Home | Stories and the feed, titled For you |
| Explore | A photo grid under search and topic chips |
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 social media app |
|---|---|
| One thing leads | The feed leads with the post, a full width photo; stories sit above it as a single row of Avatars, small enough to scroll past. |
| Actions sit next to what they act on | Follow sits on the post’s own header as a Button, next to the person it acts on, not in a menu. |
| The tab bar is the way out | Both screens carry the Navigation tab bar; Explore swaps the top bar for a Search field because searching is what that tab is for. |
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.
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.