Mobile App News Feed Screen Design
Feed is an infinite list of content with heterogeneous cards. The problem is almost always the same: designer makes one or two card types, but production has seven, and half look like patches over the design system.
Cards: Types and States
Before design starts, all post types that will be in feed must be fixed. Typical set:
- Text post (short / long with "Read more")
- Post with single image
- Post with gallery (horizontal scroll or mosaic)
- Post with video (thumbnail + duration overlay + play button)
- Repost / shared post (nested card)
- Pinned post (pinned message)
- Sponsored block (if any, marked "Sponsored")
Each type requires clear specification on max text lines and truncation behavior. lineLimit(3) in SwiftUI or maxLines = 3 in Compose with TextOverflow.Ellipsis—this decision must be explicit in design.
Author Plate and Metadata
Card header: avatar (fallback to initials on load error), name, publish date/time, "Follow" button (if not followed) or three dots (menu: hide, report). Author verification—checkmark icon, whose color and type often change through project. Done via Component Property in Figma, not hardcoded.
Action panel below card: like, comment, repost, share. Like animation—separate topic. Instagram pattern (scale + color burst) is done via Lottie or Rive; in design we show starting and end state, animation file is prepared separately.
Pull-to-Refresh and Loading
Pull-to-refresh is a system component (UIRefreshControl on iOS, SwipeRefreshLayout / PullRefreshIndicator in Compose), customize it minimally. Spinner color per system—sufficient.
Next page loading (infinite scroll): loading indicator at end of list. Not "full-screen spinner," but small component 48–56pt high. Skeleton placeholders under new cards while loading—optional, discussed with client.
Timeline—1 day with ready design system. Cost is calculated individually.