# Social media app feed

> A social media feed for Figma: stories, a post with a Follow button, likes and comments, and an Explore grid under search and topic chips, light and dark.

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.

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

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| Home | Stories and the feed, titled For you | Top Bar, Avatar, Button, Navigation |
| Explore | A photo grid under search and topic chips | Search, Chip, Navigation |

- Home, light: Social app Home screen titled For you: a row of stories with You, Leila, Priya and Erik, a post by amara_diallo with a Follow button, a photo, 1.2k likes, 48 comments and the caption Starting the day right, above the tab bar
  Picture: https://www.appetiteui.com/images/au_social_home_light.webp (dark: https://www.appetiteui.com/images/au_social_home_dark.webp)
- Explore, light: Social app Explore screen: a Search field, #trending, #fitness, #travel and #fashion chips, and a grid of photos with one large tile
  Picture: https://www.appetiteui.com/images/au_social_explore_light.webp (dark: https://www.appetiteui.com/images/au_social_explore_dark.webp)

## How the screen follows the dashboard pattern

| Rule | On this screen |
| --- | --- |
| 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. |

## Built from

| Component | Screens |
| --- | --- |
| Top Bar | Home |
| Avatar | Home |
| Button | Home |
| Navigation | Home, Explore |
| Search | Explore |
| Chip | Explore |

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

- Social media app: [Social media app profile](https://www.appetiteui.com/screens/social/profile)
- Social media app: [Social media app chat](https://www.appetiteui.com/screens/social/chat)
- Docs: [Social app screens, every screen and token](https://www.appetiteui.com/docs/screens-social)
- Pattern: [Dashboard screens](https://www.appetiteui.com/screens/patterns/dashboard)
- Finance app: [Finance app dashboard](https://www.appetiteui.com/screens/finance/dashboard)
- Fitness app: [Fitness app dashboard](https://www.appetiteui.com/screens/fitness/dashboard)
- 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)