Command palette
Desktop11 components29 variants4 recreations
Desktop command palettes: Command K, nested pages, scoped tabs, preview, Ask AI, cheat sheet and quick switcher.
$9, or included with Pro
Media players (Desktop)
Desktop packDomain
Desktop media patterns: player bars, volume, queues, video with picture in picture, live streams, timelines and transcripts.
- components
- 12
- variants
- 36
- recreations
- 3
- themes
- 5
Also for mobile: Media players
What’s inside
10 media patterns for desktop apps in 12 sets: player bar, volume control, queue rows and panel, video player with a settings menu, picture in picture, live stream with chat, an editing timeline, a voice note player, a transcript player, and chapter rows and lists. Scrubbers, volume and waveforms are drawn to match the values shown. Each page has notes and a live grid in light and dark, comfortable and compact.
- Scrubbers, volume and waveforms drawn to match their values
- Editing timeline with clip selection and trimming
- 3 recreations of a music player, video page and audio editor
Player bar
3 variants
- Playing
- Paused
- Buffering
Volume control
Free sample4 variants
- Default
- Muted
- Adjusting
- Focus
Queue row
4 variants
- Default
- Playing
- Hover
- Focus
Queue panel
2 variants
- Queue
- Empty
Video player
4 variants
- Playing
- Paused
- Captions on
- Settings open
Picture in picture
3 variants
- Playing
- Hover
- Paused
Live stream
2 variants
- Live
- Ended
Editing timeline
3 variants
- Default
- Clip selected
- Trimming
Voice note player
3 variants
- Idle
- Playing
- Played
Transcript player
2 variants
- Playing
- Searching
Chapter row
4 variants
- Default
- Current
- Played
- Focus
Chapter list
2 variants
- List
- On scrubber
- Figma file
- SuperDuper Pack: Media players (Desktop)
- 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 Descript 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 web player
Recreated from Spotify
Video watch page
Recreated from YouTube
Audio editor
Recreated from Descript
Not affiliated with, endorsed or sponsored by Spotify, YouTube and Descript. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the volume control full size, free
A volume control in default, muted, adjusting and focus states, with the level shown in words. All 4 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More domain packs
Notifications and inbox
Desktop8 components36 variants4 recreations
Desktop notification bell and popover, inbox page, row types, snooze, preferences matrix, email digest and empty inbox.
$9, or included with Pro
Commerce and product pages
Desktop18 components76 variants3 recreations
Desktop product galleries, buy boxes, variant pickers, quick view, carts, reviews, comparison tables and store headers.
$9, or included with Pro
Questions about the media players pack
One Figma file: SuperDuper Pack: Media players (Desktop). It has 12 components with 36 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.