Cards, tiles and carousels
Mobile15 components121 variants2 recreations
Mobile listing, media and stat cards, tiles, shelves, carousels and a swipe stack, with pressed, focus and loading states.
$9, or included with Pro
Avatars, images and placeholders (Mobile)
Mobile packData display
Avatars, presence, stacks, story rings, image frames, photo grids and viewers for phone apps, with vector placeholders.
- components
- 12
- variants
- 205
- recreations
- 3
- themes
- 5
Also for desktop: Avatars, images and placeholders
What’s inside
11 mobile patterns for people and pictures: avatars in six sizes, presence, stacks, story rings, image frames in seven ratios, loading states, logo slots, spot illustrations, photo grids, a full-screen viewer and video thumbnails. Initials, shapes and vector scenes stand in for faces and photos, so the file has no raster images. Each page shows every state in light and dark, comfortable and compact.
- Avatars from 24 to 96 px, each with a 44 px tap area
- Vector placeholders only, no photos of real people
- 3 recreations: stories, a chat list and a photo library
Avatar
Free sample30 variants
- Default
- Pressed
- Focus
- Disabled
- Loading
Avatar presence
24 variants
- Online
- Away
- Busy
- Offline
Avatar stack
24 variants
- Default
- Pressed
- Focus
Story ring
14 variants
- Unseen
- Seen
- Live
- Add
- Uploading
- Pressed
- Focus
Image frame
28 variants
- Abstract
- Tinted
- Icon
- Empty
Image loading
10 variants
- Skeleton
- Preview
- Loaded
- Error
- Offline
Logo slot
18 variants
- Monogram
- Empty
Spot illustration
18 variants
- Empty
- Success
- Error
- Offline
- Search
- Welcome
Photo grid cell
14 variants
- Default
- Pressed
- Focus
- Selectable
- Selected
- Loading
- Error
Photo grid
6 variants
- Browse
- Select
Full-screen viewer
5 variants
- Chrome shown
- Chrome hidden
- Zoomed
- Loading
- Error
Video thumbnail
14 variants
- Duration
- Live
- Watched
- Play
- Pressed
- Focus
- Figma file
- SuperDuper Pack: Avatars, Images and Placeholders (Mobile)
- Themes
- Light, Dark, Light high contrast, Dark high contrast and Wireframe
- Densities
- Comfortable and Compact
- Also in the file
- Usage and accessibility notes, motion specs, Figma variables
- Covers 4 UI elements and 1 screen pattern
- Avatar, Photo, Logo, Illustration and Grid & gallery
How Instagram, WhatsApp and Apple Photos do it
Recreations of real products, so you can compare approaches side by side. They are approximate, built from public product knowledge, with placeholder data and no third-party artwork.
Stories
Recreated from Instagram
Messaging
Recreated from WhatsApp
Photo library
Recreated from Apple Photos
Not affiliated with, endorsed or sponsored by Instagram, WhatsApp and Apple Photos. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the avatar full size, free
Six avatar sizes in default, pressed, focus, disabled and loading states. All 30 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More data display packs
Lists and rows
Mobile18 components217 variants3 recreations
Mobile list rows built on one anatomy: settings, toggles, media, people, chats, transactions and more.
$9, or included with Pro
Tables and data grids
Mobile10 components31 variants4 recreations
Ways to show tables on a phone: stacked cards, two-line rows, frozen columns, key-value lists, rankings and landscape grids.
$9, or included with Pro
Questions about the avatars, images and placeholders pack
One Figma file: SuperDuper Pack: Avatars, Images and Placeholders (Mobile). It has 12 components with 205 variants, 3 recreations, and notes on when to use each part. Everything uses Figma variables, so you can change the colours and type to match your product.