# Social media app profile

> A social media profile for Figma: a verified name, a bio and link, post, follower and following counts and a photo grid, with the followers list behind it.

A public profile in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: Noemi Varga with a verified mark, a bio and a link, 124 posts, 12k followers and 480 following, and a grid of photos. Followers opens the people behind the count, each with Following or Follow.

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

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| Profile | A profile header, counts and a photo grid | Avatar, Button, Navigation |
| Followers | The people who follow an account | Top Bar, Search, Avatar, Button, Navigation |

- Profile, light: Social app Profile screen: Noemi Varga with a verified mark, a bio and a link, 124 posts, 12k followers and 480 following, and a grid of photos above the tab bar
  Picture: https://www.appetiteui.com/images/au_social_profile_light.webp (dark: https://www.appetiteui.com/images/au_social_profile_dark.webp)
- Followers, light: Social app Followers screen: a back button, a Search field and a list of people with Following and Follow buttons
  Picture: https://www.appetiteui.com/images/au_social_followers_light.webp (dark: https://www.appetiteui.com/images/au_social_followers_dark.webp)

## How the screen follows the profile pattern

| Rule | On this screen |
| --- | --- |
| Decide who the screen is for | This profile is for visitors, so it leads with the person and her work and carries no settings rows at all. |
| Settings are list rows | The followers list is rows of an Avatar, a name and a handle with a Button, under a back button and a Search field. |
| Log out is a button, not a row | Follow and Following are two styles of one Button, so the state of a relationship is the button itself, with no separate badge. |

## Built from

| Component | Screens |
| --- | --- |
| Avatar | Profile, Followers |
| Button | Profile, Followers |
| Navigation | Profile, Followers |
| Top Bar | Followers |
| Search | Followers |

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

| 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 |
| 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 feed](https://www.appetiteui.com/screens/social/feed)
- 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: [Profile screens](https://www.appetiteui.com/screens/patterns/profile)
- Fitness app: [Fitness app profile](https://www.appetiteui.com/screens/fitness/profile)
- Docs: [Avatar](https://www.appetiteui.com/docs/avatar)
- Docs: [List](https://www.appetiteui.com/docs/list)
- Glossary: [List row](https://www.appetiteui.com/academy/glossary#list-row)
- Glossary: [Touch target](https://www.appetiteui.com/academy/glossary/touch-target)
- Article: [Settings screen design for iOS and Android](https://www.appetiteui.com/blog/settings-screen-design-ios-android)