Wallets, transactions and money movement
Mobile13 components48 variants2 recreations
Mobile balances, amount entry, send and request, transactions, cards, exchange, payouts and savings goals screens.
$9, or included with Pro
Media players (Mobile)
Mobile packDomain
Mobile music, podcast and video players: now playing, mini player, transport, video, waveforms, chapters, queues and casting.
- components
- 15
- variants
- 43
- recreations
- 3
- themes
- 5
Also for desktop: Media players
What’s inside
15 media patterns for phone apps: now playing, mini player, transport controls, playback speed, scrolling titles, inline and full-screen video, trim timeline, waveforms, skip rows, chapters, lyrics and transcripts, queues, a cast picker and story progress. Scrubbers and progress lines are drawn to match their times. Each page has notes and a live grid in light and dark, comfortable and compact.
- Scrubbers and progress drawn to match the times shown
- 3 recreations of music, video and podcast players
Now playing
2 variants
- Playing
- Paused
Mini player
Free sample3 variants
- Playing
- Paused
- Buffering
Transport controls
6 variants
- Music
- Podcast
- Video
- Playing
- Paused
Playback speed
2 variants
- Normal
- Fast
Marquee title
3 variants
- Fits
- Scrolling
- Reduced motion
Inline video
3 variants
- Poster
- Playing
- Ended
Full-screen video
3 variants
- Controls shown
- Controls hidden
- Captions on
Trim timeline
3 variants
- Default
- Dragging start
- Too short
Waveform
3 variants
- Playing
- Scrubbing
- Voice note
Skip row
2 variants
- Default
- Just skipped
Chapters
2 variants
- List
- In scrubber
Lyrics and transcript
2 variants
- Lyrics
- Transcript
Queue
3 variants
- Default
- Reordering
- Empty
Cast picker
3 variants
- Choosing
- Connecting
- Connected
Stories progress
3 variants
- First
- Middle
- Paused
- Figma file
- SuperDuper Pack: Media players (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 6 UI elements and 3 screen patterns
- Player controls, Video player, Mini player, Video timeline, Audio waveform, Marquee text, Media player, Lyrics & transcript and Queue
How Spotify, YouTube and Apple Podcasts 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.
Music player
Recreated from Spotify
Video player
Recreated from YouTube
Podcast player
Recreated from Apple Podcasts
Not affiliated with, endorsed or sponsored by Spotify, YouTube and Apple Podcasts. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the mini player full size, free
A mini player with a progress line, in playing, paused and buffering states. All 3 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More domain packs
Chat, messaging and calls
Mobile17 components71 variants4 recreations
Mobile chat list rows, message bubbles, receipts, composer, voice notes, media, reactions and call screens.
$9, or included with Pro
Notifications and inbox
Mobile9 components34 variants3 recreations
Mobile notification patterns: inbox rows, bells with counts, unread markers, activity and action rows, push previews and banners.
$9, or included with Pro
Questions about the media players pack
One Figma file: SuperDuper Pack: Media players (Mobile). It has 15 components with 43 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.